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