Merge pull request #107 from vincent99/master

vincent99 · vincent99 · commit 4248dedebf97 · 2015-03-25T12:47:26.000-07:00
Style and color tweaking
diff --git a/app/pods/apikeys/template.hbs b/app/pods/apikeys/template.hbs
@@ -14,21 +14,31 @@
       </div>
     </div>
   </div>
+</section>
 
-  <div>
-    <div class="clearfix">
-      <label><i class="fa fa-code"></i> API Keys</label>
-      <div style="float: right">
-        <button {{action "newApikey"}} class="btn btn-primary"><i class="ss-plus"></i> Create an API key</button>
-      </div>
+<section class="grid-header">
+  <div class="row">
+    <div class="col-sm-6">
+      <h3>All API Keys ({{length}})</h3>
     </div>
-    <table class="table fixed" style="margin-bottom: 0">
+    <div class="col-sm-6 text-right">
+      <button {{action "newApikey"}} class="btn btn-primary"><i class="ss-plus"></i> Create an API key</button>
+    </div>
+  </div>
+</section>
+
+<section>
+  <table class="grid fixed" style="margin-bottom: 0">
+    <thead>
       <tr>
         <th width="120">State</th>
-        <th>Name<br/><span class="text-muted">Description</span></th>
-        <th>Created<br/><span class="text-muted">Username</span></th>
+        <th>Name</th>
+        <th>Username</th>
+        <th>Created</th>
         <th width="50">&nbsp;</th>
       </tr>
+    </thead>
+    <tbody>
       {{#each key in this}}
         <tr>
           <td>
@@ -38,12 +48,12 @@
           </td>
           <td>
             {{#if key.name}}{{key.displayName}}{{else}}<span class="text-muted text-italic">No name</span>{{/if}}
-            <p class="text-muted">{{#if key.description}}{{key.description}}{{else}}<span class="text-italic">No description</span>{{/if}}</p>
-
+          </td>
+          <td>
+            {{#if key.publicValue}}{{key.publicValue}}{{else}}<span class="text-muted text-italic">No public value</span>{{/if}}
           </td>
           <td>
             <div class="text-muted">{{date-calendar key.created}}</div>
-            <div>{{#if key.publicValue}}{{key.publicValue}}{{else}}<span class="text-muted text-italic">No public value</span>{{/if}}</div>
           </td>
           <td align="right">
             {{resource-actions-menu model=key choices=key.availableActions}}
@@ -52,6 +62,6 @@
       {{else}}
         <tr><td colspan="4" class="text-center text-muted">You don't have any API keys yet.</td></tr>
       {{/each}}
-    </table>
-  </div>
+    </tbody>
+  </table>
 </section>
diff --git a/app/pods/apikeys/view.js b/app/pods/apikeys/view.js
@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.View.extend({
+  didInsertElement: function() {
+    $('BODY').addClass('white');
+  },
+
+  willDestroyElement: function() {
+    $('BODY').removeClass('white');
+  },
+});
diff --git a/app/pods/containers/index/template.hbs b/app/pods/containers/index/template.hbs
@@ -1,6 +1,11 @@
 <section class="grid-header">
-  <div class="text-right">
-    <button {{action "newContainer"}} class="btn btn-sm btn-primary">Add Container</button>
+  <div class="row">
+    <div class="col-sm-6">
+      <h3>All Containers ({{model.length}})</h3>
+    </div>
+    <div class="col-sm-6 text-right">
+      <button {{action "newContainer"}} class="btn btn-sm btn-primary">Add Container</button>
+    </div>
   </div>
 </section>
 <section class="instances">
diff --git a/app/pods/host/template.hbs b/app/pods/host/template.hbs
@@ -1,4 +1,4 @@
-<aside>
+<aside style="top: -33px;">
   <label>Host</label>
   {{resource-actions-menu model=this choices=availableActions classNames="pull-right"}}
   <h3>{{displayName}}</h3>
diff --git a/app/pods/registries/index/template.hbs b/app/pods/registries/index/template.hbs
@@ -1,16 +1,22 @@
-<section>
-  <div class="clearfix">
-    <div style="float: right">
+<section class="grid-header">
+  <div class="row">
+    <div class="col-sm-6">
+      <h3>All Registries ({{length}})</h3>
+    </div>
+    <div class="col-sm-6 text-right">
       <button {{action "newRegistry"}} class="btn btn-sm btn-primary"><i class="ss-plus"></i> Add Registry</button>
     </div>
   </div>
+</section>
+<section>
   <table class="grid fixed" style="margin-bottom: 0">
     <thead>
       <tr>
         <th width="120">State</th>
-        <th>Name<br/><span class="text-muted">Description</span></th>
-        <th>Address<br/><span class="text-muted">Created</span></th>
-        <th width="80">Credentials</th>
+        <th>Name</th>
+        <th>Address</th>
+        <th width="100">Credentials</th>
+        <th>Created</th>
         <th width="50">&nbsp;</th>
       </tr>
     </thead>
@@ -24,13 +30,16 @@
           </td>
           <td>
             {{#link-to "registry" registry.id}}{{registry.displayName}}{{/link-to}}
-            <p class="text-muted">{{#if registry.description}}{{registry.description}}{{else}}<span class="text-italic">No description</span>{{/if}}</p>
           </td>
           <td>
             {{registry.serverAddress}}
-            <p class="text-muted">{{date-calendar registry.created}}</p>
           </td>
-          <td>{{#if registry.credentials}}{{registry.credentials.length}}{{else}}<i class="text-muted">None</i>{{/if}}</td>
+          <td>
+            {{#if registry.credentials}}{{registry.credentials.length}}{{else}}<i class="text-muted">None</i>{{/if}}
+          </td>
+          <td>
+            {{date-calendar registry.created}}
+          </td>
           <td align="right">
             {{resource-actions-menu model=registry choices=registry.availableActions}}
           </td>
diff --git a/app/pods/volumes/template.hbs b/app/pods/volumes/template.hbs
@@ -1,5 +1,12 @@
+<section class="grid-header">
+  <div class="row">
+    <div class="col-sm-6">
+      <h3>All Volumes ({{nonRootVolumes.length}})</h3>
+    </div>
+  </div>
+</section>
 <section>
-  <table class="grid fixed">
+  <table class="grid fixed" style="margin-bottom: 0;">
     <thead>
       <tr>
         <th width="120">State<br><span class="text-muted">Host Path</span></th>
diff --git a/app/styles/bootstrap-tweak.scss b/app/styles/bootstrap-tweak.scss
@@ -186,6 +186,10 @@ H1, H2, H3, H4, H5, H6 {
   }
 }
 
+table a:not(.btn), .table a:not(.btn), .grid a:not(.btn) {
+  text-decoration: none;
+}
+
 .well > .table {
   margin-bottom: 0;
 }
@@ -203,31 +207,43 @@ HR {
   padding: 10px;
 }
 
-.dropdown-menu > li > a {
-  cursor: pointer;
-  cursor: hand;
-}
+.dropdown-menu {
+  @include box-shadow(0 2px 2px rgba(0,0,0,0.1));
 
-.dropdown-menu > li.selected > a,
-.dropdown-menu > li.selected > a:hover,
-.dropdown-menu > li.selected > a:focus {
-  color: $brand-success;
-  font-weight: bold;
+  .divider {
+    margin: 6px 5px;
+  }
 
-  .text-muted {
-    color: 
+  & > li > a {
+    cursor: pointer;
+    cursor: hand;
+  }
+
+  & > li.selected > a,
+  & > li.selected > a:hover,
+  & > li.selected > a:focus {
+    color: $brand-success;
+    font-weight: bold;
+
+    .text-muted {
+      color: 
+    }
+  }
+
+  & .active .text-muted,
+  & A:hover .text-muted {
+    color: inherit;
   }
 }
 
-.dropdown-menu .active .text-muted,
-.dropdown-menu A:hover .text-muted,
 .list-group-item.active .text-muted {
   color: inherit;
 }
 
 .badge.state {
   border-radius: 3px;
-  font-weight: 600;
+  font-size: 11px;
+  font-weight: 400;
   text-transform: uppercase;
   color: white;
 }
diff --git a/app/styles/host.scss b/app/styles/host.scss
@@ -158,7 +158,7 @@ $instance-ip: #9a9a9a;
 .add-host {
   color: #d2d7de;
   background-color: transparent;
-  border: 1px dashed;
+  border: 1px dashed #d2d7de;
   min-height: 168px;
   text-align: center;
   cursor: pointer;
diff --git a/app/styles/layout.scss b/app/styles/layout.scss
@@ -5,7 +5,7 @@ $header-link-text: #afb9c8;
 $nav-width: 90px;
 $main-padding: 20px;
 $nav-bg: #393d47;
-$nav-text: #d0d0d0;
+$nav-text: #788188;
 $nav-bg-hover: #283036;
 $nav-text-hover: white;
 $aside-width: 200px;
@@ -290,7 +290,7 @@ ASIDE {
   }
 
   LABEL {
-    color: #b4e1da
+    color: rgba(255,255,255,0.5);
   }
 
 }
@@ -355,9 +355,9 @@ UL.list-circles {
 **********/
 $nav-1: #44b4a2;
 $nav-2: #f58485;
-$nav-3: #fbc57e;
-$nav-4: #cd95e9;
-$nav-5: #8be5ff;
+$nav-3: #b49ac3;
+$nav-4: #fabc6f;
+$nav-5: #66b0cb;
 
 .nav-hosts {
   border-left-color: $nav-1;
@@ -603,7 +603,7 @@ ASIDE .btn-circle-menu {
       padding: 2px;
 
       &:first-child {
-        border-top: 1px solid #ddd;
+        border-top: 1px solid #f0f3f5;
       }
     }
 
diff --git a/vendor/bootswatch-cosmo/_variables.scss b/vendor/bootswatch-cosmo/_variables.scss
@@ -135,7 +135,7 @@ $table-bg-hover:                #f5f5f5;
 $table-bg-active:               $table-bg-hover;
 
 //** Border color for table and cell borders.
-$table-border-color:            #ddd;
+$table-border-color:            #f0f3f5;
 
 
 //== Buttons
@@ -225,11 +225,11 @@ $cursor-disabled:                not-allowed;
 //** Background for the dropdown menu.
 $dropdown-bg:                    #fff;
 //** Dropdown menu `border-color`.
-$dropdown-border:                rgba(0,0,0,.15);
+$dropdown-border:                #e2e5e5;
 //** Dropdown menu `border-color` **for IE8**.
 $dropdown-fallback-border:       #ccc;
 //** Divider color for between dropdown items.
-$dropdown-divider-bg:            #e5e5e5;
+$dropdown-divider-bg:            #e2e5e5;
 
 //** Dropdown link text color.
 $dropdown-link-color:            $gray-dark;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<aside>`
	`1`	`+<aside style="top: -33px;">`
`2`	`2`	`<label>Host</label>`
`3`	`3`	`{{resource-actions-menu model=this choices=availableActions classNames="pull-right"}}`
`4`	`4`	`<h3>{{displayName}}</h3>`