Dashboard footer revision membase#1

Tightened layout Renamed some styles Made markup more semantic (like replacing <b> with <p>) Change-Id: I32752217be24868ee9cec55c84099574f1a2a23d Reviewed-on: http://review.couchbase.org/106587 Reviewed-by: Rob Ashcom <[email protected]> Tested-by: Rob Ashcom <[email protected]>
vzasade · Mar 21, 2019 · 13231aa · 13231aa
1 parent 2784673
commit 13231aa
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 66 deletions.
diff --git a/priv/public/ui/app/css/cbui-components.css b/priv/public/ui/app/css/cbui-components.css
@@ -1540,81 +1540,73 @@ input[type="checkbox"].fake-select + label:before {
 }
 
 /* dashboard widgets displaying node counts for each of four statuses ----- */
-.dashboard-nodes {
+.dashboard-servers {
+  font-size: .8125rem;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  margin-bottom: .5rem;
+}
+.dashboard-node {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin-right: 2rem;
 }
-.dashboard-nodes:last-child {
+.dashboard-node:last-child {
   margin-right: 0;
 }
-.dashboard-nodes .icon {
- margin-right: .5rem;
-}
-.dashboard-nodes h3 {
- margin-right: .25rem;
+.dashboard-node .icon {
+  margin-right: .5rem;
+  font-size: 1rem;
 }
-.dashboard-nodes .icon {
-  font-size: 1.25rem;
+.dashboard-node  p:nth-child(2) {
+  margin: 0 .25rem 0 0;
+  font-size: .875rem;
 }
-.dashboard-nodes p {
+.dashboard-node p:nth-child(3) {
   margin: 0;
-  font-size: .75rem;
-  color: #333;
-  line-height: .85rem;
 }
 
-/* dashboard service widgets displaying status & details for each service + XDCR */
+/* dashboard service widgets with status & details for each service + XDCR -- */
 .service-widget-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 800px;
   margin: .25rem auto .5rem auto;
+  font-size: .8125rem;
+  color: #333;
 }
 .service-widget {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 0 0 0 .25rem;
+  padding: 0 0 0 .5rem;
   margin-right: 1.5rem;
   cursor: pointer;
+  line-height: 1.1;
 }
-.service-widget > a,
-.service-widget > .error {
+.service-widget a,
+.service-widget .error {
   font-size: .75rem;
 }
-.service-widget > a {
+.service-widget a {
   display:block;
   color: #333;
   white-space: nowrap;
 }
-.service-widget > a:hover {
+.service-widget a:hover {
   color: #000;
   text-decoration: underline;
 }
-.service-widget b {
-  margin-right: .5rem;
-}
-
-/* DYNAMIC STATUSES - SERVERS/BUCKETS/SERVICES -------------------------- */
-/* old-style background colors ------------------------------------------
-.dynamic_inactive {
-  background-color: #a1a1a1;
-}
-.dynamic_healthy {
-  background-color: #80c677;
-}
-.dynamic_inactiveFailed,
-.dynamic_warmup {
-  background-color: #f6a623;
+.service-widget p {
+  margin: 0 .5rem 0 0;
 }
-.dynamic_unhealthy {
-  background-color: #e07f82;
-}  */
 
-/* new-style border colors ---------------------------------------------- */
+/* state-indicating border colors ------------------------------------------- */
 .service-widget.dynamic_inactive,
 .dynamic_inactive {
   border-left: 8px solid #a1a1a1;  /* gray-3 */
@@ -1710,15 +1702,6 @@ input[type="checkbox"].fake-select + label:before {
   padding: 1rem;
   margin-bottom: 1.5rem;
 }
-/* dashboard version is a lighter-colored flex container ----------------- */
-.content-box-dashboard {
-  font-size: .75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  margin-bottom: .5rem;
-}
 .content-box p {
   margin-bottom: .5rem;
 }

diff --git a/priv/public/ui/app/css/cbui-layout.css b/priv/public/ui/app/css/cbui-layout.css
@@ -68,15 +68,15 @@ section {
 }
 footer {
   text-align: center;
-  padding: .25rem 0;
+  padding: .5rem 0;
   width: 100%;
   color: #555;
   background-color: #fff;
   font-size: .688rem;
   position: fixed;
   bottom: 0;
   left: 0;
-  box-shadow: 0px -1px 2px 1px rgba(0,0,0,0.15);
+  box-shadow: 0px -2px 3px 0 rgba(0,0,0,0.15);
 }
 /* basic flex component for horizontal layout --------------------------- */
 .row {

diff --git a/priv/public/ui/app/mn_admin/mn_overview/mn_overview.html b/priv/public/ui/app/mn_admin/mn_overview/mn_overview.html
@@ -76,25 +76,25 @@
   -->
 </div>
 <footer>
-  <div class="content-box-dashboard resp-xsml">
-    <div class="dashboard-nodes" title="active nodes">
+  <div class="dashboard-servers resp-xsml">
+    <div class="dashboard-node" title="active nodes">
       <span class="icon fa-server green-2"></span>
-      <h3>{{overviewCtl.nodes.all.active.length || '0'}}</h3>
+      <p class="semi-bold">{{overviewCtl.nodes.all.active.length || '0'}}</p>
       <p class="resp-hide-xsml">active nodes</p>
     </div>
-    <div class="dashboard-nodes" title="failed-over nodes">
+    <div class="dashboard-node" title="failed-over nodes">
       <span class="icon fa-server orange-2"></span>
-      <h3>{{overviewCtl.nodes.all.failedOver.length || '0'}}</h3>
+      <p class="semi-bold">{{overviewCtl.nodes.all.failedOver.length || '0'}}</p>
       <p class="resp-hide-xsml">failed-over nodes</p>
     </div>
-    <div class="dashboard-nodes" title="nodes pending rebalance">
+    <div class="dashboard-node" title="nodes pending rebalance">
       <span class="icon fa-server orange-2"></span>
-      <h3>{{overviewCtl.nodes.all.pending.length || '0'}}</h3>
+      <p class="semi-bold">{{overviewCtl.nodes.all.pending.length || '0'}}</p>
       <p class="resp-hide-xsml">nodes pending rebalance</p>
     </div>
-    <div class="dashboard-nodes" title="inactive nodes">
+    <div class="dashboard-node" title="inactive nodes">
       <span class="icon fa-server red-3"></span>
-      <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
+      <p class="semi-bold">{{overviewCtl.nodes.all.down.length || '0'}}</p>
       <p class="resp-hide-xsml">inactive nodes</p>
     </div>
   </div>
@@ -104,22 +104,22 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
        class="service-widget"
        ui-sref="app.admin.buckets"
        ng-class="['dynamic_' + overviewCtl.nodes.kv.statusClass]">
-      <b class="text-small">Data</b>
+      <p>Data</p>
       <!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
         {{overviewCtl.nodes.kv.length || '0'}}
         node{{overviewCtl.getEndings(overviewCtl.nodes.kv.length)}}
       </a>-->
       <div
          class="error"
-         ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.kv.nodesByStatuses">
+         ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.kv.nodespyStatuses">
         {{count + ' node' + overviewCtl.getEndings(count) + ' ' + nodeStatuses}}
       </div>
     </div>
     <div
        class="service-widget"
        ui-sref="app.admin.gsi"
        ng-class="['dynamic_' + overviewCtl.nodes.index.statusClass]">
-      <b class="text-small">Index</b>
+      <p>Index</p>
       <!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
         {{overviewCtl.nodes.index.length || '0'}}
         node{{overviewCtl.getEndings(overviewCtl.nodes.index.length)}}
@@ -134,7 +134,7 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
        class="service-widget"
        ui-sref="app.admin.query.workbench"
        ng-class="['dynamic_' + overviewCtl.nodes.n1ql.statusClass]">
-      <b class="text-small">Query</b>
+      <p>Query</p>
       <!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
         {{overviewCtl.nodes.n1ql.length || '0'}}
         node{{overviewCtl.getEndings(overviewCtl.nodes.n1ql.length)}}
@@ -149,7 +149,7 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
        class="service-widget"
        ui-sref="app.admin.search.fts_list"
        ng-class="['dynamic_' + overviewCtl.nodes.fts.statusClass]">
-      <b class="text-small">Search</b>
+      <p>Search</p>
       <!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
         {{overviewCtl.nodes.fts.length || '0'}}
         node{{overviewCtl.getEndings(overviewCtl.nodes.fts.length)}}
@@ -165,7 +165,7 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
        class="service-widget"
        ui-sref="app.admin.cbas.workbench"
        ng-class="['dynamic_' + overviewCtl.nodes.cbas.statusClass]">
-      <b class="text-small">Analytics</b>
+      <p>Analytics</p>
       <!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
         {{overviewCtl.nodes.cbas.length || '0'}}
         node{{overviewCtl.getEndings(overviewCtl.nodes.cbas.length)}}
@@ -181,7 +181,7 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
        class="service-widget"
        ui-sref="app.admin.eventing.summary"
        ng-class="['dynamic_' + overviewCtl.nodes.eventing.statusClass]">
-      <b class="text-small">Eventing</b>
+      <p>Eventing</p>
       <!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
         {{overviewCtl.nodes.eventing.length || '0'}}
         node{{overviewCtl.getEndings(overviewCtl.nodes.eventing.length)}}
@@ -197,7 +197,7 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
        ui-sref="app.admin.replications"
        class="service-widget"
        ng-class="['dynamic_' + (adminCtl.tasks.tasksXDCR.length ? 'healthy' : 'inactive')]">
-      <b class="text-small">XDCR</b>
+      <p>XDCR</p>
       <a>
         {{overviewCtl.xdcrReferences.filtered.length}}
         remote{{overviewCtl.getEndings(overviewCtl.xdcrReferences.filtered.length)}}