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,119 +1,130 @@
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
#setup {
> .header {
width: 100%;
height: 5.5em;
background-color: @icinga-blue;
border-bottom: 1px solid #d9d9d9;
text-align: center;
#setup-content-wrapper {
height: 0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
img { > .setup-content {
width: 7.5em; height: 0;
margin: 1.5em; overflow: auto;
flex: 1 1 auto;
}
}
.setup-header {
width: 100%;
height: 5.5em;
background-color: @icinga-blue;
border-bottom: 1px solid #d9d9d9;
text-align: center;
img {
width: 7.5em;
margin: 1.5em;
float: left;
}
form[name='setup_restart_form'] button {
background: none;
border: none;
color: #ffffff;
cursor: pointer;
outline: none;
font-size: 1.4em;
margin-right: 0.6em;
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
.progress-bar {
overflow: hidden;
padding-top: 1em;
.step {
float: left; float: left;
}
form[name='setup_restart_form'] button { h1 {
background: none; margin: 0;
border: none; color: white;
color: #ffffff; font-size: 0.9em;
cursor: pointer; text-align: center;
outline: none; border-bottom: none;
font-size: 1.4em; }
margin-right: 0.6em;
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
.progress-bar { table {
overflow: hidden; margin-top: 0.3em;
padding-top: 1em;
.step { td {
float: left; padding: 0;
h1 { &.left, &.right {
margin: 0; width: 50%;
color: white; }
font-size: 0.9em;
text-align: center;
border-bottom: none;
} }
}
table { div {
margin-top: 0.3em; background-color: lightgrey;
td { &.line {
padding: 0; height: 0.4em;
&.left, &.right { &.left {
width: 50%; margin-left: 0.1em;
} margin-right: -0.1em;
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
}
&.right {
margin-left: -0.1em;
margin-right: 0.1em;
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
} }
} }
div { &.bubble {
background-color: lightgrey; width: 1.2em;
height: 1.2em;
border-radius: 1.2em;
&.line { // Make sure that such a bubble overlays lines
height: 0.4em; position: relative;
z-index: 1337;
}
&.left { &.active {
margin-left: 0.1em; background-color: white;
margin-right: -0.1em; }
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
}
&.right { &.complete {
margin-left: -0.1em; background-color: @color-ok;
margin-right: 0.1em; }
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
}
&.bubble { &.visited {
width: 1.2em; background-color: #eee;
height: 1.2em;
border-radius: 1.2em;
// Make sure that such a bubble overlays lines
position: relative;
z-index: 1337;
}
&.active {
background-color: white;
}
&.complete {
background-color: @color-ok;
}
&.visited {
background-color: #eee;
}
} }
} }
} }
} }
}
.setup-content { .setup-content {
margin: 1.5em 10em 0 10em; padding: 1.5em 10em 0 10em;
h1 { h1 {
font-weight: bold; font-weight: bold;
} }
form { form {
h2 { h2 {
font-size: 2.0em; font-size: 2.0em;
}
} }
} }
} }
@ -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%;