Merge pull request #4088 from Icinga/fix/wizard-scroll-issues
Fix scroll issues in the setup wizard
This commit is contained in:
Johannes Meyer
GitHub
commit
413e70338d
|
|
@ -15,18 +15,8 @@ $maxProgress = @max(array_keys(array_filter(
|
|||
)));
|
||||
|
||||
?>
|
||||
<ul 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 id="setup" data-base-target="layout">
|
||||
<div class="header">
|
||||
<div id="setup-content-wrapper" data-base-target="layout">
|
||||
<div class="setup-header">
|
||||
<?= $this->img('img/icinga-logo-big.png'); ?>
|
||||
<div class="progress-bar">
|
||||
<div class="step" style="width: 10%;">
|
||||
|
|
@ -151,3 +141,13 @@ if ($notifications->hasMessages()) {
|
|||
<?php endif ?>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,119 +1,130 @@
|
|||
/*! 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 {
|
||||
width: 7.5em;
|
||||
margin: 1.5em;
|
||||
> .setup-content {
|
||||
height: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
overflow: hidden;
|
||||
padding-top: 1em;
|
||||
table {
|
||||
margin-top: 0.3em;
|
||||
|
||||
.step {
|
||||
float: left;
|
||||
td {
|
||||
padding: 0;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
border-bottom: none;
|
||||
&.left, &.right {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
margin-top: 0.3em;
|
||||
div {
|
||||
background-color: lightgrey;
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
&.line {
|
||||
height: 0.4em;
|
||||
|
||||
&.left, &.right {
|
||||
width: 50%;
|
||||
}
|
||||
&.left {
|
||||
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 {
|
||||
background-color: lightgrey;
|
||||
&.bubble {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
border-radius: 1.2em;
|
||||
|
||||
&.line {
|
||||
height: 0.4em;
|
||||
// Make sure that such a bubble overlays lines
|
||||
position: relative;
|
||||
z-index: 1337;
|
||||
}
|
||||
|
||||
&.left {
|
||||
margin-left: 0.1em;
|
||||
margin-right: -0.1em;
|
||||
border-top-left-radius: 0.5em;
|
||||
border-bottom-left-radius: 0.5em;
|
||||
}
|
||||
&.active {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&.right {
|
||||
margin-left: -0.1em;
|
||||
margin-right: 0.1em;
|
||||
border-top-right-radius: 0.5em;
|
||||
border-bottom-right-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
&.complete {
|
||||
background-color: @color-ok;
|
||||
}
|
||||
|
||||
&.bubble {
|
||||
width: 1.2em;
|
||||
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;
|
||||
}
|
||||
&.visited {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setup-content {
|
||||
margin: 1.5em 10em 0 10em;
|
||||
.setup-content {
|
||||
padding: 1.5em 10em 0 10em;
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
}
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
form {
|
||||
h2 {
|
||||
font-size: 2.0em;
|
||||
}
|
||||
form {
|
||||
h2 {
|
||||
font-size: 2.0em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -123,7 +134,7 @@
|
|||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#setup div.buttons {
|
||||
.setup-content div.buttons {
|
||||
margin-top: 1.5em; // Yes, -top and -bottom, keep it like that...
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
|
|
@ -146,7 +157,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
#setup div.buttons + ul.hints {
|
||||
.setup-content div.buttons + ul.hints {
|
||||
margin-top: -1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
|
@ -167,7 +178,7 @@ form#setup_requirements {
|
|||
}
|
||||
}
|
||||
|
||||
#setup ul.requirements {
|
||||
.setup-content ul.requirements {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
|
@ -251,7 +262,7 @@ form#setup_requirements {
|
|||
}
|
||||
}
|
||||
|
||||
#setup {
|
||||
.setup-content {
|
||||
div.summary {
|
||||
font-size: 90%;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue