This is an automated email from the ASF dual-hosted git repository.

asifdxtreme pushed a commit to branch master
in repository 
https://gitbox.apache.org/repos/asf/incubator-servicecomb-service-center.git


The following commit(s) were added to refs/heads/master by this push:
     new 4a6b11b  Dashboard page is designed to be responsive in smaller screen 
resolution (#384)
4a6b11b is described below

commit 4a6b11b10d5d3bbe38710ec1288b50130a316572
Author: vibakar <vibaka...@gmail.com>
AuthorDate: Mon Jul 2 19:04:30 2018 +0530

    Dashboard page is designed to be responsive in smaller screen resolution 
(#384)
    
    * fix for services count in pagination during search
    
    * code has been formatted
    
    * dashboard page designed to be responsive in smaller laptops
---
 .../scripts/modules/dashboard/views/dashboard.html | 12 +++----
 frontend/app/scripts/views/index.html              |  2 +-
 frontend/app/styles/main.css                       | 40 ++++++++++++++++++++--
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/frontend/app/scripts/modules/dashboard/views/dashboard.html 
b/frontend/app/scripts/modules/dashboard/views/dashboard.html
index b54245f..df42f84 100644
--- a/frontend/app/scripts/modules/dashboard/views/dashboard.html
+++ b/frontend/app/scripts/modules/dashboard/views/dashboard.html
@@ -24,14 +24,14 @@ limitations under the License..
     <div class="col-sm-12 col-md-12 col-lg-3" ng-repeat="info in 
dashboardInfo">
         <div class="mainCard">
             <div class="col-sm-3 col-md-3 col-lg-3 mainCardIcon {{ info.title 
}}">
-                <i class="fa {{ info.iconName }} fa-3x icon-color"></i>
+                <i class="fa {{ info.iconName }} fa-2x icon-color"></i>
             </div>
             <div class="col-sm-9 col-md-9">
                 <div class="row">
                     <div class="col-sm-8 col-md-8 no-padding 
mainCardTitleStyle">
                         <span class="mainCardTitle">{{ info.title | translate 
}}</span>
                     </div>
-                    <div class="col-sm-4 col-md-4 m5">
+                    <div class="col-sm-4 col-md-4 count">
                         <span class="mainCardCount">{{ info.count }}</span>
                     </div>
                 </div>
@@ -49,7 +49,7 @@ limitations under the License..
                 <div class="col-md-6 servicesChart">
                     <canvas class="chart chart-doughnut" 
chart-data="servicesChartData" chart-colors="colors" 
chart-labels="labels"></canvas> 
                     <div class="chart-legend">
-                        <i class="fa fa-circle legendStarting"></i>{{ 
"starting" | translate }}
+                        <i class="fa fa-circle legendStarting"></i><span 
class="pl-3">{{ "starting" | translate }}</span>
                         <i class="fa fa-circle legendUp"></i> {{ "up" | 
translate }}
                         <i class="fa fa-circle legendDown"></i> {{ "down" | 
translate }}
                         <i class="fa fa-circle legendUnavailable"></i> {{ 
"outofservice" | translate }}
@@ -60,12 +60,12 @@ limitations under the License..
                         <div class="col-sm-12 col-md-12 dashboardCount" 
ng-repeat="service in servicesStatusData">
                             <div class="row" 
ng-click="goToServices(service.title)">
                                 <div class="col-xs-4 col-sm-6 col-md-3 
statusIcon {{ service.title }}">
-                                    <i class="fa {{ service.iconName }} fa-3x 
icon-color"></i>
+                                    <i class="fa {{ service.iconName }} fa-2x 
icon-color"></i>
                                 </div>
-                                <div class="col-xs-4 col-sm-4 col-md-5 
statusTitle">
+                                <div class="col-xs-4 col-sm-4 col-md-6 
statusTitle">
                                     <span>{{ service.title | translate 
}}</span>
                                 </div>
-                                <div class="col-xs-4 col-sm-2 col-md-4 
statusCount">
+                                <div class="col-xs-4 col-sm-2 col-md-3 
statusCount">
                                     <span class="pull-right">{{ service.count 
}}</span>
                                 </div>
                             </div>
diff --git a/frontend/app/scripts/views/index.html 
b/frontend/app/scripts/views/index.html
index 049fc0e..6d83ca9 100644
--- a/frontend/app/scripts/views/index.html
+++ b/frontend/app/scripts/views/index.html
@@ -29,7 +29,7 @@ limitations under the License.
       <ul class="nav navbar-nav navbar-right">
         <li><span class="tenant">{{ "tenant" | translate }}</span></li>
         <li>
-        <div layout-gt-sm="row" class="navbar-right-header">
+        <div layout-gt-sm="row" class="navbar-right-header h-50">
           <md-input-container class="md-block" flex-gt-sm>
             <input  id="tenant"  ng-model="tenant" aria-label="tenant" 
autocomplete="off">
           </md-input-container>
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 774f3e3..74b72a3 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -278,7 +278,7 @@ body {
 }
 .dashboardCount .statusIcon {
   height: 65px;
-  padding: 12px;
+  padding: 15px;
 }
 .statusTitle, .statusCount {
   background-color: #fff;
@@ -358,7 +358,7 @@ md-table-pagination .md-select-icon {
 }
 .mainCard .mainCardIcon {
   height: 100%;
-  padding-top: 10px;
+  padding-top: 6%;
   text-align: center;
 }
 .mainCardTitle {
@@ -419,4 +419,40 @@ table, md-toolbar {
 .inline {
     display: inline;
 }
+.h-50 {
+    height: 50px;
+}
+.count {
+    margin: 5px 0px;
+}
+.pl-3 {
+    padding-left: 3px
+}
+
+@media only screen
+and (min-width: 1030px)
+and (max-width: 1366px) {
+    .mainCard .mainCardIcon{
+        padding-top: 10%;
+    }
+    .mainCardCount {
+        padding-left: 12px;
+        font-size: 20px;
+    }
+    .count {
+        margin: 16px 0px !important;
+     }
+     .fa-cog {
+        margin-left: -4px;
+     }
+     .fa-cogs, .fa-server, .fa-users {
+        margin-left: -7px;
+     }
+     .servicesChart {
+        margin-top: 8%;
+     }
+     .mainCardTitle {
+        font-weight: 500;
+     }
+}
 /*# sourceMappingURL=main.css.map */

Reply via email to