[icinga-checkins] icinga.org: icingaweb2/feature/beautify-filter-styling: CSS: Add styles for responsive table

git at icinga.org git at icinga.org
Wed Jun 15 17:29:20 CEST 2016


Module: icingaweb2
Branch: feature/beautify-filter-styling
Commit: c029a426e3d6410d2b9850f24492149ce365fc1b
URL:    https://git.icinga.org/?p=icingaweb2.git;a=commit;h=c029a426e3d6410d2b9850f24492149ce365fc1b

Author: Florian Strohmaier <florian.strohmaier at netways.de>
Date:   Wed Jun 15 17:29:14 2016 +0200

CSS: Add styles for responsive table

---

 modules/eventdb/public/css/module.less |  141 +++++++++++++++++++++++++++++---
 1 file changed, 128 insertions(+), 13 deletions(-)

diff --git a/modules/eventdb/public/css/module.less b/modules/eventdb/public/css/module.less
index 34f00aa..949d9aa 100644
--- a/modules/eventdb/public/css/module.less
+++ b/modules/eventdb/public/css/module.less
@@ -214,29 +214,144 @@ ul.tree input {
 
   &.one {
     ul {
-        padding: 0 0 @vertical-padding 0;
+      padding: 0 0 @vertical-padding 0;
     }
 
     li {
-        .rounded-corners();
-        max-width: none;
-        line-height: 18px;
-        background: @icinga-blue;
-        color: white;
-        display: inline-block;
-        width: auto;
-        padding: @vertical-padding @horizontal-padding;
+      .rounded-corners();
+      max-width: none;
+      line-height: 18px;
+      background: @icinga-blue;
+      color: white;
+      display: inline-block;
+      width: auto;
+      padding: @vertical-padding @horizontal-padding;
     }
 
     li > i {
-        font-size: 18px;
-        display: inline-block;
+      font-size: 18px;
+      display: inline-block;
     }
 
     li > a {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+#layout.minimal-layout .responsive-table,
+#layout.poor-layout .responsive-table,
+#layout.twocols .responsive-table {
+    display: block;
+    overflow: auto;
+
+    thead {
+        display: none;
+    }
+
+    tbody {
         display: block;
-        height: 100%;
         width: 100%;
     }
-  }
+
+    tr,
+    td {
+      display: block;
+      padding: 0;
+      margin: 0;
+    }
+
+    tr {
+      width: 100%;
+      position: relative;
+      padding-top: 3.5em;
+      padding-bottom: @vertical-padding;
+      border-left: 0;
+    }
+
+    // ack
+    td:nth-child(1) {
+        position: absolute;
+        top: 0; left: 12px;
+        color: transparent;
+    }
+
+    // ack: @todo class needed for status
+    td:nth-child(1):before {
+        content: '\e87b';
+        font-family: "ifont";
+        color: @icinga-blue;
+    }
+
+    // type
+    td:nth-child(2) {
+        display: inline-block;
+        margin-left: @horizontal-padding;
+    }
+
+    // host-name
+    td:nth-child(3) {
+        display: inline-block;
+        margin-left: @horizontal-padding;
+    }
+
+    // priority
+    td:nth-child(4) {
+        position: absolute;
+        top: 0; bottom: 0; left: 0;
+        width: 4px;
+        color: transparent;
+    }
+
+    // message
+    td:nth-child(5) {
+        font-weight: bold;
+        position: absolute;
+        top: 1.75em;
+        left: 0px;
+        padding-left: @horizontal-padding;;
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    // program
+    td:nth-child(6) {
+        display: inline-block;
+        margin-left: @horizontal-padding;
+    }
+
+    // facility
+    td:nth-child(7) {
+        display: inline-block;
+        margin-left: @horizontal-padding;
+    }
+
+    // created
+    td:nth-child(8) {
+        position: absolute;
+        top: @vertical-padding; right: 0;
+        padding-right: @horizontal-padding;
+        max-width: 100%;
+        padding-left: 17px;
+    }
+
+    td.priority-CRITICAL {
+        background: @color-critical;
+    }
+
+    td.priority-ERROR {
+        background: @color-error;
+    }
+
+    td.priority-WARNING {
+        background: @color-warning;
+    }
+
+    td.priority-ALERT {
+        background: @color-pending ;
+    }
 }



More information about the icinga-checkins mailing list