CSS: Optimize dashboard, column and controls styles

fixes #7350
fixes #10289
fixes #10871

library/Icinga/Web/StyleSheet.php

@@ -53,7 +53,8 @@ class StyleSheet
 //        'css/icinga/logo.less',
         'css/icinga/spinner.less',
         'css/icinga/compat.less',
-        'css/icinga/print.less'
+        'css/icinga/print.less',
+        'css/icinga/responsive.less'
     );
 
     /**

library/Icinga/Web/Widget/Tabs.php

@@ -21,7 +21,7 @@ class Tabs extends AbstractWidget implements Countable
      * @var string
      */
     private $baseTpl = <<< 'EOT'
-<ul class="tabs primary-nav">
+<ul class="tabs primary-nav nav">
   {TABS}
   {DROPDOWN}
   {REFRESH}

public/css/icinga/layout-structure.less

@@ -1,39 +1,39 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
-/** Default layout **/
 html {
   font-family: 'default-layout';
 }
 
 #layout {
-  position: fixed;
+  height: 100%;
   left: 0;
+  position: fixed;
   top: 0;
-  right: 0;
+  width: 100%;
-  bottom: 0;
 }
 
 #header {
+  height: 4em;
+  left: 0;
   position: fixed;
   top: 0;
-  left: 0;
+  width: 100%;
-  right: 0;
 }
 
 #sidebar {
-  width: 12em;
-  position: fixed;
-  left: 0;
-  top: 4.6em;
   bottom: 0;
+  left: 0;
+  position: fixed;
+  top: 4em;
+  width: 12em;
 }
 
 #main {
-  position: fixed;
-  left: 12em;
-  top: 3.6em;
-  right: 0;
   bottom: 0;
+  left: 12em;
+  position: fixed;
+  right: 0;
+  top: 4em;
 }
 
 .iframe {
@@ -72,9 +72,11 @@ html {
 #layout.minimal-layout #responsive-debug {
   font-size: 0.6em;
 }
+
 #layout.poor-layout #responsive-debug {
   font-size: 0.7em;
 }
+
 #layout.compact-layout #responsive-debug {
   font-size: 0.8em;
 }
@@ -110,211 +112,12 @@ html {
   }
 }
 
-/* tmp */
-#main > .container {
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  float: left;
-}
-
-#layout.twocols #main > .container {
-  width: 50%;
-}
-
-
-/* #layout.twocols #main > .container > .controls {*/
-/*#layout.twocols #main .container > .controls {
-  width: 100%;
-}
-
-.container > div {
-  padding: 0;
-}
-*/
-.container .controls {
-  top: 0;
-  padding: 1em 1em 0;
-  z-index: 100;
-
-  h1 {
-    margin: 0;
-    margin-top: @horizontal-padding;
-  }
-}
-
 .container .controls.separated {
     box-shadow: 0 3px 4px -4px rgba(0, 0, 0, 0.2);
 //  border-bottom: 1px solid @gray-lightest;
     padding-bottom: @horizontal-padding / 2
 }
 
-.container .fake-controls {
-  padding: 1em 1em 0;
-}
-
-#main .dashboard {
-  padding: 0;
-}
-
-.dashboard > div.container {
-  vertical-align: top;
-  width: 48.5%;
-  display: inline-block;
-  padding: 0;
-  margin-top: 0em;
-  margin-left: 1%;
-}
-
-.content {
-  padding: 0 1em 1em 1em;
-}
-
-.dashboard .content {
-  padding: 0;
-}
-
-.dashboard .controls {
-  padding: 0;
-}
-
-/* Not growing larger than 3840px at 1em=16px right now */
-@media screen and (min-width: 240em) {
-  #main {
-    width: 227em;
-  }
-  #header {
-    width: 240em;
-  }
-}
-
-/** More than 100em, that's usually 1600px **/
-@media screen and (min-width: 100em) {
-  html {
-    font-family: 'wide-layout';
-  }
-}
-
-/** Up to 72em, that's usually 1152px on desktops **/
-@media screen and (max-width:72em) {
-  html {
-    font-family: 'compact-layout';
-  }
-}
-
-/** Up to 752px, poor boy **/
-@media screen and (max-width: 47em) {
-  html {
-    font-family: 'poor-layout';
-  }
-}
-
-/* Up to 576px for 1em=16px, should fit 320px devices */
-@media screen and (max-width: 36em) {
-  html {
-    font-family: 'minimal-layout';
-  }
-}
-
-/* 100em */
-#layout.wide-layout {
-  .dashboard > div.container {
-    width: 32%;
-    margin-left: 1%;
-    margin-right: 0;
-  }
-}
-
-/* 72em */
-#layout.compact-layout {
-  font-size: 0.875em;
-}
-
-#layout.poor-layout {
-  font-size: 0.875em;
-
-  .dashboard > div.container {
-    width: 98%;
-    margin-left: 1%;
-    margin-right: 1%;
-  }
-
-  #layout.twocols {
-    #main > .container {
-      width: 99%;
-    }
-    #col1 {
-      display: none;
-    }
-  }
-}
-
-#layout.minimal-layout {
-  #sidebar {
-    top: 0;
-    height: 32px;
-    width: 100%;
-  }
-
-  .dashboard > div.container {
-    width: 98%;
-    margin-left: 1%;
-    margin-right: 1%;
-  }
-
-  #main {
-    left: 0;
-  }
-}
-
-
-#layout.twocols .dashboard > div.container {
-  width: 96%;
-  margin-left: 2%;
-  margin-right: 2%;
-}
-
-#layout.twocols.wide-layout #col1 {
-  width: 33.333%;
-}
-
-#layout.twocols.wide-layout #col2 {
-  width: 66.667%;
-}
-
-#layout.threecols.wide-layout #main > .container {
-  width: 33.333%;
-}
-
-#layout #col2, #layout #col3 {
-  display: none;
-}
-
-#layout.twocols #col2 {
-  border-left: 1px solid @gray-light;
-  display: block;
-}
-
-#layout.threecols #col3 {
-  border-left: 1px solid #d9d9d9;
-  display: block;
-}
-
-.audible {
-  left: -999em;
-  position: absolute;
-}
-
-.message-error {
-  padding: 0.5em;
-  background-color: @colorCritical;
-  font-weight: bold;
-  color: white;
-}
-
 .hbox {
   display: inline-block;
 }

public/css/icinga/layout.less

@@ -1,10 +1,10 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
 #footer {
-  position: fixed;
+  bottom: 0;
   left: 0;
   right: 0;
-  bottom: 0;
+  position: fixed;
   z-index: 999;
 }
 
@@ -24,7 +24,7 @@
   font-size: 2em;
 }
 
-#header,
+#header-logo-container,
 #login,
 #main > .container,
 #menu {
@@ -38,9 +38,9 @@
 
 #header-logo-container {
   height: 4em;
+  margin-bottom: 0.2em;
   margin-left: 1.5em;
   margin-top: 0.2em;
-  margin-bottom: 0.2em;
   width: 100px;
 }
 
@@ -73,6 +73,42 @@
   overflow: auto;
 }
 
+@gutter: 1em;
+
+// x-column-layout
+
+#main {
+  .clearfix();
+
+  & > .container {
+    float: left;
+    // Column width controlled by #layout
+    width: 100%;
+
+    // Container scrolling
+    height: 100%;
+    overflow: auto;
+
+    & > .content {
+      padding: @gutter;
+      z-index: 2;
+    }
+
+    & > .controls {
+      z-index: 3;
+
+      > * {
+       margin-left: @gutter !important;
+       margin-right: @gutter !important;
+      }
+    }
+
+    // 1em gutter of containers is maintained by padding of content and margin of every element in controls. We're not
+    // setting padding to .container because else horizontally scrolled .content may overflow .controls when scrolled
+    // vertically
+  }
+}
+
 #sidebar {
   background-color: @gray-lighter;
 }
@@ -93,6 +129,30 @@
   }
 }
 
+// Display tabs if JS is disabled
+html.no-js .controls > .tabs {
+  background-color: @icinga-blue;
+  margin-left: -1 * @gutter;
+  margin-right: -1 * @gutter;
+  margin-top: -1 * @gutter;
+}
+
+// Dashboard grid
+
+.dashboard {
+  letter-spacing: -0.417em;
+  margin: 0 -0.5 * @gutter;
+
+  > .container {
+    display: inline-block;
+    letter-spacing: normal;
+    padding: 0 0.5 * @gutter;
+    vertical-align: top;
+    // Column width controlled by #layout
+    width: 100%;
+  }
+}
+
 // Notification styles
 
 #notifications {

public/css/icinga/responsive.less

@@ -0,0 +1,116 @@
+/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
+
+// Not growing larger than 3840px at 1em=16px right now
+@media screen and (min-width: 240em) {
+  #header {
+    width: 240em;
+  }
+
+  #main {
+    width: 227em;
+  }
+}
+
+// More than 100em, usually 1600px at 1em=16px
+@media screen and (min-width: 100em) {
+  html {
+    font-family: 'wide-layout';
+  }
+}
+
+// Up to 1152px at 1em=16px
+@media screen and (max-width:72em) {
+  html {
+    font-family: 'compact-layout';
+  }
+}
+
+// Up to 752px at 1em=16px
+@media screen and (max-width: 47em) {
+  html {
+    font-family: 'poor-layout';
+  }
+}
+
+// Up to 576px at 1em=16px, should fit 320px devices
+@media screen and (max-width: 36em) {
+  html {
+    font-family: 'minimal-layout';
+  }
+}
+
+#layout.compact-layout {
+  font-size: 0.875em;
+}
+
+#layout.poor-layout {
+  font-size: 0.875em;
+
+  #layout.twocols {
+    #col1 {
+      display: none;
+    }
+
+    #main > .container {
+      width: 100%;
+    }
+  }
+
+  .dashboard > div.container {
+    width: 100%;
+  }
+}
+
+#layout.minimal-layout {
+  #main {
+    left: 0;
+  }
+
+  #sidebar {
+    top: 0;
+    height: 32px;
+    width: 100%;
+  }
+
+  .dashboard > div.container {
+    width: 100%;
+  }
+}
+
+
+// Dashboard
+
+#layout.default-layout .dashboard > .container {
+  width: 50%;
+}
+
+#layout.wide-layout .dashboard > .container {
+  width: 33.33%;
+}
+
+#layout.twocols .dashboard > .container {
+  width: 100%;
+}
+
+// Columns
+
+#layout #col2 {
+  display: none;
+}
+
+#layout.twocols #col2 {
+  border-left: 1px solid @gray-light;
+  display: block;
+}
+
+#layout.twocols > #main > .container {
+  width: 50%;
+}
+
+#layout.twocols.wide-layout #col1 {
+  width: 33.33%;
+}
+
+#layout.twocols.wide-layout #col2 {
+  width: 66.66%;
+}

public/css/icinga/tabs.less

@@ -1,10 +1,5 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
-ul.tabs {
-  padding: 0;
-  list-style-type: inside;
-}
-
 ul.tabs li {
   display: inline-block;
 }