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

Fix scroll issues in the setup wizard

modules/setup/application/views/scripts/index/index.phtml

@@ -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'); ?>
     <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>

public/css/icinga/setup.less

@@ -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 {
+  > .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;
-    }
 
-    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;
 }
 
-#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%;