Lots of UI updates

Added directive for heading bar Moved Site creation into modal Added table of sites Lots of CSS
dropbox · Jan 4, 2015 · fb04d4b · fb04d4b
1 parent e0714da
commit fb04d4b
Show file tree

Hide file tree

Showing 5 changed files with 231 additions and 47 deletions.
diff --git a/nsot/static/css/nsot.css b/nsot/static/css/nsot.css
@@ -13,12 +13,16 @@ body {
     margin-bottom: 20px;
 }
 
+.modal-open {
+    overflow-y: scroll;
+}
+
 .notification-box {
     margin-top: 100px;
 }
 
 .panel-default {
-    box-shadow: 3px 3px 6px 0px rgba(155, 155, 155, 1);
+    box-shadow: 1px 1px 1px 0px rgba(155, 155, 155, 1);
     border: 0px;
 }
 
@@ -28,6 +32,110 @@ body {
     border-color: #a3114f;
 }
 
+.close-light {
+    color: #ecf0f1;
+    opacity: .9;
+}
+
+.modal-content {
+  background-color: #333;
+}
+
+.modal-body {
+  background-color: #fff;
+}
+
+.modal-footer {
+  background-color: #d7d7d7;
+    -webkit-border-bottom-left-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    -moz-border-radius-bottomleft: 5px;
+    -moz-border-radius-bottomright: 5px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.modal-header {
+    color: #ecf0f1;
+    background-color: #333;
+    border-color: #a3114f;
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-topright: 5px;
+     border-top-left-radius: 5px;
+     border-top-right-radius: 5px;
+}
+
+.header h2 {
+    display: inline-block;
+    vertical-align: middle;
+    float: left;
+    border-right: 1px solid #a0a0a0;
+    padding-right: 15px;
+    padding-bottom: 10px;
+    margin: 0px;
+    margin-right: 10px;
+    margin-bottom: 20px;
+    text-shadow: 1px 1px 4px #A2A2A2;
+}
+
+.header h3 {
+    display: inline-block;
+    vertical-align: middle;
+    float: left;
+    padding-right: 10px;
+    padding-bottom: 10px;
+    margin: 0px;
+    margin-right: 10px;
+    margin-bottom: 18px;
+    font-size: xx-large;
+}
+
+.header hr {
+    margin-top: -20px;
+    margin-bottom: 20px;
+    border: 0;
+    border-top: 1px solid #a0a0a0;
+}
+
+.header .buttons {
+    display: inline-block;
+    vertical-align: middle;
+    float: right;
+}
+
+.header h3 small {
+    color: #6b6b6b;
+}
+
+.header h2 a {
+    color: #333;
+}
+
+.header h2 a:hover {
+    color: #666;
+    text-decoration: none;
+}
+
+.header {
+    border-bottom: 1px solid #a0a0a0;
+    content: "";
+    min-height: 44px;
+}
+
+#content {
+    padding: 20px;
+    background-color: #ececec;
+    -webkit-border-bottom-left-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    -moz-border-radius-bottomleft: 5px;
+    -moz-border-radius-bottomright: 5px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-shadow: 3px 3px 6px 0px rgba(155, 155, 155, 1);
+}
+
 #footer {
     position: fixed;
     left: 0px;
@@ -49,6 +157,10 @@ body {
     margin-right: 0px;
 }
 
+.navbar {
+    margin-bottom: 0px;
+}
+
 .navbar-default {
     background-color: #343434;
     border-color: #a3114f;

diff --git a/nsot/static/js/app.js b/nsot/static/js/app.js
@@ -76,6 +76,7 @@
         $scope.user = {};
         $scope.sites = [];
         $scope.site = {};
+        $scope.error = null;
 
         $q.all([
             $http.get("/api/users/0"),
@@ -90,6 +91,8 @@
             $http.post("/api/sites", site).success(function(data){
                 var site = data.data.site;
                 $location.path("/sites/" + site.id);
+            }).error(function(data){
+                $scope.error = data.error;
             });
         };
     }]);

diff --git a/nsot/static/js/directives.js b/nsot/static/js/directives.js
@@ -6,9 +6,8 @@
         return {
             restrict: "E",
             transclude: true,
-            replace: true,
             template: "<div class='panel panel-default'>" +
-                      "<ng-transclude></ng-transclude>" +
+                      "  <ng-transclude></ng-transclude>" +
                       "</div>"
         };
     });
@@ -17,9 +16,8 @@
         return {
             restrict: "E",
             transclude: true,
-            replace: true,
             template: "<div class='panel-heading'><strong>" +
-                      "<ng-transclude></ng-transclude>" +
+                      "  <ng-transclude></ng-transclude>" +
                       "</strong></div>"
         };
     });
@@ -28,9 +26,8 @@
         return {
             restrict: "E",
             transclude: true,
-            replace: true,
             template: "<div class='panel-body'>" +
-                      "<ng-transclude></ng-transclude>" +
+                      "  <ng-transclude></ng-transclude>" +
                       "</div>"
         };
     });
@@ -39,19 +36,37 @@
         return {
             restrict: "E",
             transclude: true,
-            replace: true,
             template: "<div class='panel-footer'>" +
-                      "<ng-transclude></ng-transclude>" +
+                      "  <ng-transclude></ng-transclude>" +
                       "</div>"
         };
     });
 
-
     app.directive("loadingPanel", function(){
         return {
             restrict: "E",
             templateUrl: "/static/templates/directives/loading-panel.html"
         };
     });
 
+    app.directive("headingBar", function(){
+        return {
+            restrict: "E",
+            scope: {
+                "heading": "@",
+                "subheading": "@"
+            },
+            transclude: true,
+            template: "<div class='row'><div class='col-md-12'>" +
+                      "  <div class='header'>" +
+                      "    <h2>[[heading]]</h2>" +
+                      "    <h3 ng-if='subheading'>[[subheading]]</h3>" +
+                      "    <div class='buttons'>" +
+                      "      <ng-transclude></ng-transclude>" +
+                      "    </div>" +
+                      "  </div>" +
+                      "</div></div>"
+        };
+    });
+
 })();
diff --git a/nsot/static/templates/site.html b/nsot/static/templates/site.html
@@ -1,4 +1,7 @@
 <loading-panel ng-if="loading"></loading-panel>
 <div ng-if="!loading">
-    [[site.id]] - [[site.name]] - [[site.description]]
+    <heading-bar heading="Sites" subheading="[[site.name]]">
+        <button class="btn btn-info">Update Site</button>
+        <button class="btn btn-danger">Delete Site</button>
+    </heading-bar>
 </div>
diff --git a/nsot/static/templates/sites.html b/nsot/static/templates/sites.html
@@ -1,44 +1,95 @@
 <loading-panel ng-if="loading"></loading-panel>
 <div ng-if="!loading">
-    <div ng-if="!sites.length" class="col-sm-6 col-sm-offset-3">
-        <panel class="notification-box">
+    <heading-bar heading="Sites">
+        <button
+            class="btn btn-success"
+            data-toggle="modal"
+            data-target="#createSiteModal"
+        >Create Site</button>
+    </heading-bar>
+
+    <div class="modal fade" id="createSiteModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close close-light" data-dismiss="modal">
+                        <span class="fa fa-close"</span>
+                    </button>
+                    <h4 class="modal-title">Create Site</h4>
+                </div>
+                <div class="modal-body">
+                    <div ng-if="error" class="alert alert-danger">
+                        [[error.code]] - [[error.message]]
+                    </div>
+                    <form novalidate class="nsot-form">
+                        <div class="form-group">
+                            <input type="text"
+                                   class="form-control"i
+                                   placeholder="Name"
+                                   ng-model="site.name"
+                                   required
+                            >
+                        </div>
+                        <div class="form-group">
+                            <textarea style="resize: vertical;"
+                                      class="form-control"
+                                      rows="5"
+                                      placeholder="Description"
+                                      ng-model="site.description"
+                            >
+                            </textarea>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button
+                        type="button"
+                        class="btn btn-default"
+                        data-dismiss="modal"
+                    >Close</button>
+                    <button type="submit"
+                            ng-click="createSite(site)"
+                            class="btn btn-primary"
+                    >Create</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div ng-if="!sites.length" class="row"><div class="col-sm-6 col-sm-offset-3">
+        <panel>
             <panel-heading>Welcome</panel-heading>
             <panel-body>
                 Welcome to the Network Source of Truth. It looks like you're new
-                here. Lets start by creating a <em>site</em> which will be a namespace
-                for all of your data.
-                <hr>
-                <form novalidate class="nsot-form">
-                    <div class="form-group">
-                        <input type="text"
-                               class="form-control"i
-                               placeholder="Name"
-                               ng-model="site.name"
-                               required
-                        >
-                    </div>
-                    <div class="form-group">
-                        <textarea style="resize: vertical;"
-                                  class="form-control"
-                                  rows="5"
-                                  placeholder="Description"
-                                  ng-model="site.description"
-                        >
-                        </textarea>
-                    </div>
-                </form>
+                here. Lets start by creating a <em>site</em> with the button above.
+                This will be a namespace for all of your data.
             </panel-body>
-            <panel-footer class="text-right">
-                <button type="submit"
-                        ng-click="createSite(site)"
-                        class="btn btn-primary"
-                >Create</button>
-            </panel-footer>
         </panel>
-    </div>
-    <div ng-if="sites.length"
-         ng-repeat="site in sites"
-         class="col-sm-6 col-sm-offset-3">
-         <a ng-href="/sites/[[site.id]]">[[site.name]]</a>
-    </div>
+    </div></div>
+    <div class="row" ng-if="sites.length" class="row"><div class="col-sm-10 col-sm-offset-1">
+        <panel>
+            <panel-heading>Sites</panel-heading>
+            <panel-body>
+                <table class="table table-hover">
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Name</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr ng-repeat="site in sites" ng-href="/sites/[[site.id]]">
+                            <td class="col-sm-1">[[site.id]]</td>
+                            <td class="col-sm-3">
+                                <a ng-href="/sites/[[site.id]]">[[site.name]]</a>
+                            </td>
+                            <td class="col-sm-8">[[site.description]]</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </panel-body>
+        </panel>
+
+    </div></div>
 </div>