This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/master by this push:
new 8f9f526 ui: alignment fixes (#3395)
8f9f526 is described below
commit 8f9f526f83a66a7b5bf8bdf72bc0ef9536b57d55
Author: Nico Wohlfarth <[email protected]>
AuthorDate: Wed Jun 12 22:17:01 2019 +0200
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
---
ui/css/cloudstack3.css | 60 ++++++++++------------
ui/css/src/scss/cloudstack3.scss | 1 +
ui/css/src/scss/components/blocking-overlay.scss | 31 +++++++++++
ui/css/src/scss/components/dashboard.scss | 42 +++++++--------
ui/css/src/scss/components/list-view.scss | 2 +-
ui/css/src/scss/components/multi-wizzard.scss | 21 +++++---
ui/css/src/scss/components/quick-view-tooltip.scss | 3 +-
7 files changed, 96 insertions(+), 64 deletions(-)
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 5ef4a58..0d17cdc 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -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 {
diff --git a/ui/css/src/scss/cloudstack3.scss b/ui/css/src/scss/cloudstack3.scss
index 5a20e0d..0d523ca 100644
--- a/ui/css/src/scss/cloudstack3.scss
+++ b/ui/css/src/scss/cloudstack3.scss
@@ -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';
diff --git a/ui/css/src/scss/components/blocking-overlay.scss
b/ui/css/src/scss/components/blocking-overlay.scss
new file mode 100644
index 0000000..d4167e5
--- /dev/null
+++ b/ui/css/src/scss/components/blocking-overlay.scss
@@ -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;
+}
diff --git a/ui/css/src/scss/components/dashboard.scss
b/ui/css/src/scss/components/dashboard.scss
index 049a71e..1051dba 100644
--- a/ui/css/src/scss/components/dashboard.scss
+++ b/ui/css/src/scss/components/dashboard.scss
@@ -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;
}
diff --git a/ui/css/src/scss/components/list-view.scss
b/ui/css/src/scss/components/list-view.scss
index 51d6ac2..17d506b 100644
--- a/ui/css/src/scss/components/list-view.scss
+++ b/ui/css/src/scss/components/list-view.scss
@@ -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 {
diff --git a/ui/css/src/scss/components/multi-wizzard.scss
b/ui/css/src/scss/components/multi-wizzard.scss
index 3b74f73..7c4908a 100644
--- a/ui/css/src/scss/components/multi-wizzard.scss
+++ b/ui/css/src/scss/components/multi-wizzard.scss
@@ -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,
diff --git a/ui/css/src/scss/components/quick-view-tooltip.scss
b/ui/css/src/scss/components/quick-view-tooltip.scss
index 51bf032..68932e0 100644
--- a/ui/css/src/scss/components/quick-view-tooltip.scss
+++ b/ui/css/src/scss/components/quick-view-tooltip.scss
@@ -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;
}
