added more

css/styles.css

@@ -159,23 +159,22 @@
   border: 1px solid #e5e5e5;
 }
 .invite-card-container {
-  display: table;
+  flex-wrap: wrap;
   width: 100%;
+  display: flex;
 }
 .invite-card-container .invite-option {
-  width: 28%;
+  width: 25%;
   background: white;
   float: left;
   padding: 2%;
   text-align: center;
   -webkit-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
-}
+  margin: 5px;
-.invite-card-container .invite-option:nth-child(even) {
-  margin: 0 2%;
 }
 .invite-card-container .invite-option:hover {
-  cursor: pointer;
+  /*cursor: pointer;*/
   box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.3);
   -webkit-transform: scale(1.04);
           transform: scale(1.04);
@@ -192,6 +191,7 @@
   visibility: visible !important;
 }
 .invite-card-container .invite-option:hover .back a.button {
+  cursor: pointer;
   -webkit-transform: translateY(0px) !important;
           transform: translateY(0px) !important;
 }
@@ -200,7 +200,6 @@
   border-bottom: 1px solid #F0F0F0;
 }
 .invite-card-container .invite-option i {
-  font-size: 3rem;
   color: #D8D8D8;
   -webkit-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
@@ -261,3 +260,36 @@
 .invite-card-container .invite-option .price .back a.button:hover {
   background: #286090;
 }
+.invite-card-container .invite-option:hover i {
+  color: white;
+}
+.website-card-button-group {
+  display: flex;
+  justify-content: space-around;
+}
+
+.media {
+  border: 1px solid #d5dbdd;
+  padding: 5px 20px;
+  border-radius: 5px;
+  box-shadow: 0px 2px 1px rgba(0,0,0,0.04);
+  background: #fff;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+.align-self-center {
+  -ms-flex-item-align: center !important;
+  align-self: center !important;
+}
+.rounded-circle {
+  border-radius: 50%;
+}
+.media .media-left img {
+  width: 75px;
+}
+.shares-container {
+  list-style: none;
+  -webkit-padding-start: 0px;
+}

js/controllers/website-controller.js

@@ -482,4 +482,6 @@ app.controller('websiteCtrl', [
     });
     return matches;
   };
+
+
 }]);

templates/website.html

@@ -1,5 +1,6 @@
 <div class="container">
   <div class="row">
+
     <h1>Create a new Website</h1>
     <button class="btn btn-primary btn-lg"  title="..." data-toggle="modal" data-target=".create-website-modal">
       Create Website
@@ -97,42 +98,110 @@
       <div class="front">
         <span class="price">&nbsp;</span>
       </div>
-      <div class="back">
+      <div class="">
-        <a class="button" ng-click="vm.Shares.accept()">Accept Invite</a>
+        <a class="btn btn-primary" ng-click="vm.Shares.accept()">Accept Invite</a>
       </div>
     </div>
   </div>
 </div>
 
+<div class="row">
+  <div>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th>Website</th>
+          <th class="text-center"></th>
+        </tr>
+      </thead>
+      <tr ng-repeat="r in vm.sites">
+        <td><a ng-href="https://{{r.domain}}" target="_blank" ng-bind="r.domain">example.com</a></td>
+        <td class="text-center"><button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target=".{{r.challenge}}">Edit</button></td>
+      </tr>
+    </table>
+  </div>
 
-<div class="invite-card-container">
+  <div class="modal fade {{r.challenge}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" ng-repeat="r in vm.sites">
-  <h1>Your Websites</h1>
+    <div class="modal-dialog modal-lg" role="document">
-  <div class="invite-option" ng-repeat="r in vm.sites">
+      <div class="modal-content">
-    <h3><a ng-href="https://{{r.domain}}" target="_blank" ng-bind="r.domain">example.com</a></h3>
+        <div class="modal-header">
-    <hr />
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
-    <hr />
+          <h4 class="modal-title"><a ng-href="https://{{r.domain}}" target="_blank" ng-bind="r.domain">example.com</a></h4>
-    <div class="">
+        </div>
-      <div class="">
+        <div class="modal-body">
-        <a ng-href="{{r.download}}" class="btn btn-default" target="_blank"><i class="fa fa-download"></i> Download</a>
+          <form class="form-inline text-center">
+            <h4 class="text-left">Send Invitation:</h4>
+            <div class="form-group">
+              <input type="text" ng-model="r.shareEmail" class="form-control" placeholder="ex: john@example.com" />
+            </div>
+            <div class="form-group">
+              <input type="text" ng-model="r.sharePath" class="form-control" placeholder="/" />
+            </div>
+            <div class="form-group">
+              <input type="text" ng-model="r.shareMode" class="form-control" placeholder="rwx (read, write, invite)" />
+            </div>
+            <button type="submit" class="btn btn-default" ng-click="vm.Shares.invite(r)">Invite</button>
+            <button class="btn btn-info" ng-click="vm.Shares.list(r)">View Shares</button>
+          </form>
+          <form class="form-inline text-center">
+            <h4 class="text-left">List Files:</h4>
+            <div class="form-group">
+              <input type="text" class="form-control" ng-model="r.newPath" placeholder="/" />
+            </div>
+            <button class="btn btn-default" ng-click="vm.Sites.contents(r)">List Files</button>
+          </form>
+          <div>
+            <ul class="shares-container" ng-repeat="share in r.sharedWith" ng-if="!share.me">
+              <li>
+                <div class="media">
+                  <div class="media-left align-self-center">
+                    <img class="rounded-circle" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png">
+                  </div>
+                  <div class="media-body">
+                    <h4 ng-bind="share.comment">friend@email.com</h4>
+                    <p>Share Path: <span ng-bind="share.path">/</span></p>
+                    <p>Actions Allowed: <span ng-bind="share.mode">rwx</span></p>
+                  </div>
+                  <!-- <div class="media-right align-self-center">
+                    <a href="#" class="btn btn-default">Contact Now</a>
+                  </div> -->
+                </div>
+              </li>
+            </ul>
           </div>
           <div class="">
-        <button type="button" name="button" class="btn btn-danger" ng-click="vm.Sites.remove(r)"><i class="fa fa-trash"></i> Clear</button>
+            <h4 class="text-left">Select Upload:</h4>
+            <div>
+              <label>Select upload</label>
+              <input type="file" ng-model="r.newFile" class="form-control" daplie-file-change="vm.Sites.setUpload(r)" />
+
+              <div ng-if="r.isZip" ><label><input type="checkbox" ng-model="r.unzip" /> Unpack .zip</label></div>
+
+              <div ng-if="r.unzip" ><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
+
+              <!-- div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
+
+              <div ng-if="r.uploadTotal"><span ng-bind="r.uploadPercent">99</span>% | <span ng-bind="r.uploadProgress">1</span> MiB / <span ng-bind="r.uploadTotal">100</span> MiB</div>
+
+              <div><label>Web path</label> <input type="text" ng-model="r.uploadPath" /></div>
+
+              <button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-default">Add File</button>
             </div>
           </div>
         </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </div>
 
 
 
 
 
-<style>
-  .panel{
-    box-shadow: none;
-    border: none;
-  }
-</style>
-
 <div class="home-container">
 
   <div class="white-well">
@@ -226,13 +295,11 @@
               <button class="btn btn-default" ng-click="vm.Sites.contents(r)">List Files</button>
             </td>
             <td ng-bind="r.path">Sites > blogs > blog.jane.smith.net</td>
-            <td><div ng-repeat="share in r.sharedWith" ng-if="!share.me">
+            <td><span ng-repeat="share in r.sharedWith" ng-if="!share.me">
               <span ng-bind="share.path">/</span>
               <span ng-bind="share.comment">friend@email.com</span>
-              <em ng-if="share.pending">pending</em>
               (<span ng-bind="share.mode">rwx</span>)
-              <button class="btn btn-link" ng-click="vm.Shares.remove(r, share)">[X]</button>
+            </span></td>
-            </div></td>
             <td>
               <input type="text" ng-model="r.shareEmail" placeholder="ex: john@example.com" />
               <input type="text" ng-model="r.sharePath" placeholder="/" />