summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorbeccabroek <beccabroek@gmail.com>2019-03-11 15:02:25 -0500
committerGunnar Mills <gmills@us.ibm.com>2019-03-26 13:38:17 +0000
commitd0dbe3b3fbe0d4d43d16d17bcfcf0d8aff196bbb (patch)
tree1e9c5dc91b6d24b36e11210b05d39c15f26ef90b
parenta2e36e0f479d1a9fa2b6d26448d5e070aea7259b (diff)
downloadphosphor-webui-d0dbe3b3fbe0d4d43d16d17bcfcf0d8aff196bbb.tar.gz
phosphor-webui-d0dbe3b3fbe0d4d43d16d17bcfcf0d8aff196bbb.zip
Center modals and fix sizing
Previously the modals were not centered on the screen and the size of the modal was set to 50% of the screen, leading to a lot of white space within modals with less content. This sizes the modal based on the amount of content within and centers the modal. Also adds the grey modal overlay to the 'confirm network settings' modal to be consistent with the other pages. Resolves openbmc/phosphor-webui#35 Tested: Viewed all modals currently in GUI (Firmware page, network page, and overview page) and modals were sized correctly and appeared with the modal overlay in the background. Change-Id: Ie35d179810d36b8bcbbf39dc1302e773387fa788 Signed-off-by: beccabroek <beccabroek@gmail.com>
-rw-r--r--app/common/styles/elements/modals.scss47
-rw-r--r--app/configuration/controllers/network-controller.html1
2 files changed, 25 insertions, 23 deletions
diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss
index 396b46e..1a8b71f 100644
--- a/app/common/styles/elements/modals.scss
+++ b/app/common/styles/elements/modals.scss
@@ -1,34 +1,36 @@
.modal-overlay {
- width:100%;
- height:100%;
- z-index:-1;
- background-color:#000;
- position:fixed;
- top:0;
- left:0;
- margin:0;
- padding:0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ background-color: #000;
+ position: fixed;
+ top: 0;
+ left: 0;
+ margin: 0;
+ padding: 0;
opacity: 0;
}
.modal-overlay.active{
- z-index:100;
+ z-index: 100;
opacity: .5;
display: block;
@include fastTransition-all;
}
.modal {
- width:50%;
+ width: auto;
+ height: auto;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%,-50%);
max-width: 850px;
- margin: .5em auto;
+ min-width: 450px;
padding: .8em 1.5em;
border: thin #000 solid;
- background-color:#fff;
- z-index:101;
- position:fixed;
- top:-100%;
- left:25%;
+ background-color :#fff;
+ z-index: 101;
+ position: fixed;
overflow: hidden;
@include fastTransition-all;
@include mediaQuery(medium) {
@@ -37,7 +39,6 @@
}
.modal.active{
- top: 25%;
@include fastTransition-all;
display: block;
}
@@ -47,11 +48,11 @@
}
.screen-reader-offscreen {
- position:absolute;
- left:-999px;
- width:1px;
- height:1px;
- top:auto;
+ position: absolute;
+ left: -999px;
+ width: 1px;
+ height: 1px;
+ top: auto;
}
.modal__content {
border-bottom: 1px solid $lightbg__grey;
diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html
index 6500c0b..0a8b7c7 100644
--- a/app/configuration/controllers/network-controller.html
+++ b/app/configuration/controllers/network-controller.html
@@ -102,6 +102,7 @@
</section>
</form>
</div>
+<div class="modal-overlay" tabindex="-1" ng-class="{'active': confirmSettings}"></div>
<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog" ng-class="{'active': confirmSettings}">
<div class="modal__tftp-unreachable" role="document">
<div class="screen-reader-offscreen modal-description">Change network settings</div><!-- accessibility only; used for screen readers -->
OpenPOWER on IntegriCloud