Merge pull request #4088 from Icinga/fix/wizard-scroll-issues

Fix scroll issues in the setup wizard
This commit is contained in:
Johannes Meyer 2020-02-28 14:51:25 +01:00 committed by GitHub
commit 413e70338d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 117 additions and 106 deletions

View File

@ -15,18 +15,8 @@ $maxProgress = @max(array_keys(array_filter(
))); )));
?> ?>
<ul id="notifications"><?php <div id="setup-content-wrapper" data-base-target="layout">
<div class="setup-header">
$notifications = Notification::getInstance();
if ($notifications->hasMessages()) {
foreach ($notifications->popMessages() as $m) {
echo '<li class="' . $m->type . '">' . $this->escape($m->message) . '</li>';
}
}
?></ul>
<div id="setup" data-base-target="layout">
<div class="header">
<?= $this->img('img/icinga-logo-big.png'); ?> <?= $this->img('img/icinga-logo-big.png'); ?>
<div class="progress-bar"> <div class="progress-bar">
<div class="step" style="width: 10%;"> <div class="step" style="width: 10%;">
@ -151,3 +141,13 @@ if ($notifications->hasMessages()) {
<?php endif ?> <?php endif ?>
</div> </div>
</div> </div>
<div id="footer">
<ul role="alert" id="notifications"><?php
$notifications = Notification::getInstance();
if ($notifications->hasMessages()) {
foreach ($notifications->popMessages() as $m) {
echo '<li class="' . $m->type . '">' . $this->escape($m->message) . '</li>';
}
}
?></ul>
</div>

View File

@ -1,13 +1,25 @@
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
#setup {
> .header { #setup-content-wrapper {
height: 0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
> .setup-content {
height: 0;
overflow: auto;
flex: 1 1 auto;
}
}
.setup-header {
width: 100%; width: 100%;
height: 5.5em; height: 5.5em;
background-color: @icinga-blue; background-color: @icinga-blue;
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;
text-align: center; text-align: center;
img { img {
width: 7.5em; width: 7.5em;
margin: 1.5em; margin: 1.5em;
@ -101,10 +113,10 @@
} }
} }
} }
} }
.setup-content { .setup-content {
margin: 1.5em 10em 0 10em; padding: 1.5em 10em 0 10em;
h1 { h1 {
font-weight: bold; font-weight: bold;
@ -115,7 +127,6 @@
font-size: 2.0em; font-size: 2.0em;
} }
} }
}
} }
.setup-content .control-group > * { .setup-content .control-group > * {
@ -123,7 +134,7 @@
margin-right: 1em; margin-right: 1em;
} }
#setup div.buttons { .setup-content div.buttons {
margin-top: 1.5em; // Yes, -top and -bottom, keep it like that... margin-top: 1.5em; // Yes, -top and -bottom, keep it like that...
margin-bottom: 1.5em; margin-bottom: 1.5em;
@ -146,7 +157,7 @@
} }
} }
#setup div.buttons + ul.hints { .setup-content div.buttons + ul.hints {
margin-top: -1.5em; margin-top: -1.5em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
@ -167,7 +178,7 @@ form#setup_requirements {
} }
} }
#setup ul.requirements { .setup-content ul.requirements {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
@ -251,7 +262,7 @@ form#setup_requirements {
} }
} }
#setup { .setup-content {
div.summary { div.summary {
font-size: 90%; font-size: 90%;