CSS: Layout main container with flex-box

refs #3810
Icinga · May 29, 2019 · 69d1137 · 69d1137
1 parent 3bef086
commit 69d1137
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
@@ -109,25 +109,25 @@
 
 // x-column-layout
 #main {
-  .clearfix();
+  display: flex;
 
   & > .container {
-    float: left;
-    // Column width controlled by #layout
-    width: 100%;
-
-    // Container scrolling
     height: 100%;
-    overflow: auto;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    &:empty {
+      display: none;
+    }
 
     & > .content {
+      overflow: auto;
+      flex: 1;
       padding: @gutter;
-      z-index: 2;
     }
 
     & > .controls {
-      z-index: 3;
-
       padding-left: @gutter;
       padding-right: @gutter;
 

diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
@@ -172,6 +172,10 @@ ul:not(.nav-level-2) > .selected > a {
   }
 }
 
+#menu .nav-level-2 {
+  z-index: 10;
+}
+
 .no-js #menu .nav-level-2 > .nav-item {
   // Expand menu if JavaScript is disabled
   display: block;

diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less
@@ -179,13 +179,8 @@
 
 // Columns
 
-#layout #col2 {
-  display: none;
-}
-
 #layout.twocols #col2 {
   border-left: 1px solid @gray-lighter;
-  display: block;
 }
 
 #layout.twocols > #main > .container {