Fixes dashboard tiles to match mockup (#249)

Fixes https://github.com/contiv/ccn/issues/130
contiv · Jan 10, 2017 · f1d5401 · f1d5401
1 parent 8ca10df
commit f1d5401
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 72 deletions.
diff --git a/app/app.css b/app/app.css
@@ -158,15 +158,6 @@ menu { margin: 0; padding: 0; z-index: 2000; }
 .ui.very.basic.table th i.icon,
 .ui.very.basic.table td i.icon { font-size: 10px; color: #5d5d5d; }
 
-.kpi a.ui.fluid.card { background-color: #efefef; border: 1px solid #e8e8e8; box-shadow: none; }
-.kpi a.ui.fluid.card:hover { transform: none; box-shadow: 0 0 12px rgba(32,32,32,0.2); }
-
-.kpi a.ui.fluid.card:hover .kpiHeader,
-.kpi a.ui.fluid.card:hover .kpiValue { color: #036e97;  }
-
-.kpiHeader { font-family: CiscoSansRegular; font-size: .9rem; color: #999; text-align: center; white-space: nowrap}
-.kpiValue { font-family: CiscoSansThin; font-size: 3rem; color: #555;}
-
 .ui.form { font-size: 12px !important; }
 
 .ui.input input,

diff --git a/app/dashboard/dashboard.css b/app/dashboard/dashboard.css
@@ -22,4 +22,21 @@ tbody tr.notSelected:hover{
 
 .graphTable{
     width:80%;
+}
+
+.kpi a.ui.fluid.card { background-color: #e0e0e0; border: 1px solid #e8e8e8; box-shadow: none; }
+.kpi a.ui.fluid.card:hover { transform: none; box-shadow: 0 0 12px rgba(32,32,32,0.2); }
+
+.kpiHeader {
+    font-family: CiscoSansRegular;
+    font-size: 0.9rem;
+    color: #036e97;
+    text-align: center;
+    white-space: nowrap
+}
+.kpiValue {
+    font-family: CiscoSansThin;
+    font-size: 40px;
+    color: #036e97;
+    margin: 20px
 }
diff --git a/app/dashboard/dashboard.html b/app/dashboard/dashboard.html
@@ -1,12 +1,11 @@
-<!--<div class="content" style="font-size: 18px; margin-top: 30px">Resources</div> -->
 <div class="ui grid" style="margin-top: 15px">
     <div class="row">
         <div class="ui four wide column kpi">
             <a class="ui fluid card" [routerLink]="['../servicelbs/list']">
                 <div class="content">
                     <div class="kpiHeader">Service Load Balancers</div>
-                    <div class="description">
-                        <p class="center aligned kpiValue">{{servicelbs}}</p>
+                    <div class="kpiValue">
+                        <p class="center aligned">{{servicelbs}}</p>
                     </div>
 
                 </div>
@@ -16,8 +15,8 @@
             <a class="ui fluid card" [routerLink]="['../applicationgroups/list']">
                 <div class="content">
                     <div class="kpiHeader">Application Groups</div>
-                    <div class="description">
-                        <p class="center aligned kpiValue">{{groups}}</p>
+                    <div class="kpiValue">
+                        <p class="center aligned">{{groups}}</p>
                     </div>
                 </div>
             </a>
@@ -26,8 +25,8 @@
             <a class="ui fluid card" [routerLink]="['../networkpolicies/list']">
                 <div class="content">
                     <div class="kpiHeader">Network Policies</div>
-                    <div class="description">
-                        <p class="center aligned kpiValue">{{networkpolicies}}</p>
+                    <div class="kpiValue">
+                        <p class="center aligned">{{networkpolicies}}</p>
                     </div>
                 </div>
             </a>
@@ -36,8 +35,8 @@
             <a class="ui fluid card" [routerLink]="['../networks/list']">
                 <div class="content">
                     <div class="kpiHeader">Networks</div>
-                    <div class="description">
-                        <p class="center aligned kpiValue">{{networks}}</p>
+                    <div class="kpiValue">
+                        <p class="center aligned">{{networks}}</p>
                     </div>
                 </div>
             </a>