From 8f9f526f83a66a7b5bf8bdf72bc0ef9536b57d55 Mon Sep 17 00:00:00 2001
From: Nico Wohlfarth <n.wohlfarth@ewerk.com>
Date: Wed, 12 Jun 2019 22:17:01 +0200
Subject: [PATCH] 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 +
 .../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 ++++---
 .../scss/components/quick-view-tooltip.scss   |  3 +-
 7 files changed, 96 insertions(+), 64 deletions(-)
 create mode 100644 ui/css/src/scss/components/blocking-overlay.scss

diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 5ef4a5844e1..0d17cdc6a98 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 5a20e0db7c7..0d523cad937 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 00000000000..d4167e55552
--- /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 049a71eb4e5..1051dba498a 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 51d6ac2d443..17d506bf9e3 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 3b74f739c27..7c4908a75ef 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 51bf0325ec9..68932e0c00a 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;
 }