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 */