etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ui: alignment fixes (#3395) 

- Moved some recently made CSS changes (46a3279 / 2020bfb) to their newly introduced respective SCSS files
- Aligned the dashboard containers properly (see screenshots 1 and 2)
- Restored the original quick view tooltip background color (see screenshots 3 and 4)
- Fixed the height of the toolbar in dialog views and also stretched it in width (see screenshots 5 and 6
This commit is contained in:
Nico Wohlfarth 2019-06-12 22:17:01 +02:00 committed by Rohit Yadav
parent d6edfdc24c
commit 8f9f526f83
7 changed files with 96 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
ui/css/cloudstack3.css
View File

@ -565,18 +565,18 @@ body.login {
}
.blocking-overlay {
opacity: 0.7;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: #F2F2F2;
z-index: 500;
top: 0;
left: 0;
width: 100%;
/*+opacity:70%;*/
height: 100%;
background: #f2f2f2;
filter: alpha(opacity=70);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
.loading-overlay {
@ -1555,11 +1555,12 @@ div.list-view td.state.notsuitable-storage-migration-required span {
display: none !important;
}
.quick-view-tooltip .detail-view .ui-tabs-panel {
.quick-view-tooltip .detail-view.ui-tabs div.ui-tabs-panel {
display: inline-block;
float: left;
width: 100% !important;
height: auto;
background-color: inherit;
overflow: hidden;
}
@ -4206,8 +4207,6 @@ textarea {
}
.dashboard.admin .dashboard-container {
margin: 0 0 11px;
padding: 0 8px 18px 0;
/*+border-radius:3px;*/
border: 1px solid #c8c2c2;
border-radius: 3px;
@ -4218,7 +4217,7 @@ textarea {
}
.dashboard.admin .dashboard-container.sub {
width: 468px;
width: 49.5%;
}
.dashboard.admin .dashboard-container.sub .button.view-all,
@ -4274,13 +4273,15 @@ textarea {
/**** Head*/
.dashboard.admin .dashboard-container.head {
float: left;
width: 966px;
height: 431px;
box-sizing: border-box;
width: 100%;
margin: 9px 0 0;
padding: 0 0;
}
.dashboard.admin .dashboard-container .top {
float: left;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 4px 4px 8px;
@ -4334,29 +4335,22 @@ textarea {
/**** Charts / stats*/
.dashboard.admin .zone-stats {
position: relative;
top: 0;
left: 0;
width: 974px;
/*+placement:shift 0px 0px;*/
height: 416px;
width: 100%;
padding: 11px 0;
overflow: auto;
overflow-x: hidden;
}
.dashboard.admin .zone-stats ul {
position: relative;
/*+placement:shift -2px 11px;*/
top: 11px;
left: -2px;
width: 996px;
width: 100%;
}
.dashboard.admin .zone-stats ul li {
position: absolute;
position: relative;
z-index: 1;
float: left;
width: 488px;
width: 50%;
height: 79px;
font-size: 14px;
cursor: pointer;
@ -4533,20 +4527,23 @@ textarea {
.dashboard.admin .dashboard-container.sub.alerts {
position: relative;
float: left;
height: 170px;
margin: 0 12px 0 0;
box-sizing: border-box;
height: 190px;
overflow: hidden;
}
.dashboard.admin .dashboard-container.sub.alerts.last {
margin-right: 0;
.dashboard.admin .dashboard-container.sub.alerts.first {
margin-right: 1%;
}
.dashboard.admin .dashboard-container.sub.alerts .top {
height: 18%;
}
.dashboard.admin .dashboard-container.sub.alerts ul {
position: relative;
width: 468px;
height: 100%;
margin: 0 0 0 8px;
width: 100%;
height: 82%;
overflow-y: scroll;
}
@ -7597,7 +7594,6 @@ textarea {
div.toolbar,
.multi-wizard.zone-wizard .select-container .field .select-array-item {
display: block;
height: 1px;
}
div.toolbar:after,
@ -7818,7 +7814,7 @@ div.toolbar:after,
.ui-dialog .list-view .toolbar {
top: 50px;
width: 854px;
width: 100%;
}
div.panel.ui-dialog div.list-view div.fixed-header {

1
ui/css/src/scss/cloudstack3.scss
View File

@ -29,6 +29,7 @@
@import 'components/login';
@import 'components/dialog-about';
@import 'components/blocking-overlay';
@import 'components/loading-overlay';
@import 'components/install-wizzard';
@import 'components/notifications';

31
ui/css/src/scss/components/blocking-overlay.scss Normal file
View File

@ -0,0 +1,31 @@
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.
.blocking-overlay {
opacity: 0.7;
position: absolute;
z-index: $z-index-loading-overlay;
top: 0;
left: 0;
width: 100%;
/*+opacity:70%;*/
height: 100%;
background: #f2f2f2;
filter: alpha(opacity=70);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-moz-opacity: 0.7;
}

42
ui/css/src/scss/components/dashboard.scss
View File

@ -24,8 +24,6 @@
}
.dashboard.admin .dashboard-container {
margin: 0 0 11px;
padding: 0 8px 18px 0;
/*+border-radius:3px;*/
border: 1px solid #c8c2c2;
border-radius: 3px;
@ -36,7 +34,7 @@
}
.dashboard.admin .dashboard-container.sub {
width: 468px;
width: 49.5%;
}
.dashboard.admin .dashboard-container.sub .button.view-all,
@ -95,13 +93,15 @@
/**** Head*/
.dashboard.admin .dashboard-container.head {
float: left;
width: 966px;
height: 431px;
box-sizing: border-box;
width: 100%;
margin: 9px 0 0;
padding: 0 0;
}
.dashboard.admin .dashboard-container .top {
float: left;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 4px 4px 8px;
@ -155,29 +155,22 @@
/**** Charts / stats*/
.dashboard.admin .zone-stats {
position: relative;
top: 0;
left: 0;
width: 974px;
/*+placement:shift 0px 0px;*/
height: 416px;
width: 100%;
padding: 11px 0;
overflow: auto;
overflow-x: hidden;
}
.dashboard.admin .zone-stats ul {
position: relative;
/*+placement:shift -2px 11px;*/
top: 11px;
left: -2px;
width: 996px;
width: 100%;
}
.dashboard.admin .zone-stats ul li {
position: absolute;
position: relative;
z-index: $z-index-standard;
float: left;
width: 488px;
width: 50%;
height: 79px;
font-size: 14px;
cursor: pointer;
@ -354,20 +347,23 @@
.dashboard.admin .dashboard-container.sub.alerts {
position: relative;
float: left;
height: 170px;
margin: 0 12px 0 0;
box-sizing: border-box;
height: 190px;
overflow: hidden;
}
.dashboard.admin .dashboard-container.sub.alerts.last {
margin-right: 0;
.dashboard.admin .dashboard-container.sub.alerts.first {
margin-right: 1%;
}
.dashboard.admin .dashboard-container.sub.alerts .top {
height: 18%;
};
.dashboard.admin .dashboard-container.sub.alerts ul {
position: relative;
width: 468px;
height: 100%;
margin: 0 0 0 8px;
width: 100%;
height: 82%;
overflow-y: scroll;
}

2
ui/css/src/scss/components/list-view.scss
View File

@ -24,7 +24,7 @@
.ui-dialog .list-view .toolbar {
top: 50px;
width: 854px;
width: 100%;
}
div.panel.ui-dialog div.list-view div.fixed-header {

21
ui/css/src/scss/components/multi-wizzard.scss
View File

@ -670,11 +670,11 @@
margin-top: 9px !important;
}
.multi-wizard.instance-wizard .custom-disk-size .select-container {
.multi-wizard.instance-wizard .custom-slider-container .select-container {
height: 279px;
}
.multi-wizard.instance-wizard .custom-disk-size .select-container {
.multi-wizard.instance-wizard .custom-slider-container .select-container {
height: 213px;
margin: -7px 6px 0 8px;
/*+border-radius:6px;*/
@ -773,7 +773,11 @@
font-size: 10px;
}
.instance-wizard .step.data-disk-offering.custom-disk-size .select-container {
.instance-wizard .step.data-disk-offering.custom-slider-container .select-container {
height: 272px;
}
.instance-wizard .step.service-offering.custom-slider-container .select-container {
height: 272px;
}
@ -781,11 +785,15 @@
height: 240px;
}
.instance-wizard .step.data-disk-offering.custom-disk-size.custom-iops-do .select-container {
.instance-wizard .step.data-disk-offering.custom-slider-container.custom-iops-do .select-container {
height: 176px;
}
.instance-wizard .step.data-disk-offering.required.custom-disk-size .select-container {
.instance-wizard .step.service-offering.required.custom-slider-container .select-container {
height: 315px;
}
.instance-wizard .step.data-disk-offering.required.custom-slider-container .select-container {
height: 315px;
}
@ -793,7 +801,7 @@
height: 295px;
}
.instance-wizard .step.data-disk-offering.required.custom-disk-size.custom-iops-do .select-container {
.instance-wizard .step.data-disk-offering.required.custom-slider-container.custom-iops-do .select-container {
height: 223px;
}
@ -2209,7 +2217,6 @@
div.toolbar,
.multi-wizard.zone-wizard .select-container .field .select-array-item {
display: block;
height: 1px;
}
div.toolbar:after,

3
ui/css/src/scss/components/quick-view-tooltip.scss
View File

@ -92,11 +92,12 @@
display: none !important;
}
.quick-view-tooltip .detail-view .ui-tabs-panel {
.quick-view-tooltip .detail-view.ui-tabs div.ui-tabs-panel {
display: inline-block;
float: left;
width: 100% !important;
height: auto;
background-color: inherit;
overflow: hidden;
}