Main navigation and detail table

refs #4824

doc/Icinga-Design/documentation.html

@@ -506,33 +506,33 @@ code...
               <tbody>
 
                 <tr>
-                  <td class="enabled">Passive Checks</td>
+                  <td>Passive Checks</td>
                   <td><div class="icon-table-hint icon-edit pull-left"></div></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" checked /></td>
                 </tr>
 
                 <tr>
-                  <td class="disabled">Active Checks</td>
+                  <td>Active Checks</td>
                   <td></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
                 </tr>
                 <tr>
-                  <td class="enabled">Obsessing</td>
+                  <td>Obsessing</td>
                   <td><div class="icon-table-hint icon-edit pull-left"></div></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" checked /></td>
                 </tr>
                 <tr>
-                  <td class="enabled">Notifications</td>
+                  <td>Notifications</td>
                   <td></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" checked /></td>
                 </tr>
                 <tr>
-                  <td class="disabled">Event Handler</td>
+                  <td>Event Handler</td>
                   <td><div class="icon-table-hint icon-edit pull-left"></div></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
                 </tr>
                 <tr>
-                  <td class="disabled">Flap Detection</td>
+                  <td>Flap Detection</td>
                   <td></td>
                   <td><input type="checkbox" id="#" name="#" class="pull-right" /></td>
                 </tr>
@@ -543,15 +543,6 @@ code...
 
 
 
-
-
-
-
-
-
-
-
-
         </div><!-- .docu-module -->
       </div><!-- .docu-example -->
 
@@ -610,26 +601,57 @@ code...
     </div><!-- .docu-section --> 
 
 
-    <h1 class="docu-main-headline">Buttons</h1>
+    <h1 class="docu-main-headline">Main Navigation</h1>
 
-    <h1 class="docu-sub-headline">Link Button</h1>
+<!--     <h1 class="docu-sub-headline">Sub Header</h1>
     <div class="docu-description">
-      Link buttons are used for the main menu links on the bottom of every page.
-    </div>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
+    </div> -->
 
     <div class="docu-section">
       <div class="docu-example">
         <div class="docu-module">
-          <a class="clickable-bg frame island--medium link-arrow" href="#">Lorem Ipsum</a>
+
+          <ul id="icinganavigation" role="navigation" class="nav nav-stacked">
+            <li class="icon-main-nav nav-icon-hosts">
+            <a href="/icinga2-web/monitoring/list/hosts">Hosts</a>
+            </li>
+            <li class="icon-main-nav nav-icon-services">
+            <a href="/icinga2-web/monitoring/list/services" class="nav-notification">Services</a>
+              <span class="badge-container-nav">
+                <a href="/icingawebinsfx/monitoring/list/services?host=host_000&amp;service_problems=1" class="badge-nav">
+                    12
+                </a>
+              </span>  
+            </li>
+            <li class="icon-main-nav nav-icon-downtimes">
+            <a href="/icinga2-web/monitoring/list/downtimes">Downtimes</a>
+            </li>
+            <li class="icon-main-nav nav-icon-notifications">
+            <a href="/icinga2-web/monitoring/list/notifications">Notifications</a>
+            </li>
+            <li class="icon-main-nav nav-icon-comments">
+            <a href="/icinga2-web/monitoring/list/comments">Comments</a>
+            </li>
+            <li class="icon-main-nav nav-icon-dashboard active">
+            <a href="/icinga2-web/dashboard/index">Dashboard</a>
+            </li>
+            <li class="icon-main-nav nav-icon-configuration">
+            <a href="/icinga2-web/config/index">Configuration</a>
+            </li>
+           </ul>
+
+
         </div><!-- .docu-module -->
       </div><!-- .docu-example -->
 
+
+
       <div class="docu-codeblock">
-        <textarea class="docu-code"><a class="clickable-bg frame island--medium link-arrow" href="#">Lorem Ipsum</a>
+        <textarea class="docu-code">Code... Code...
         </textarea> 
       </div><!-- .docu-codeblock -->
-
-    </div><!-- .docu-section -->   
+    </div><!-- .docu-section --> 
 
 
 

doc/Icinga-Design/icinga-design.css

@@ -167,7 +167,7 @@ td {
 .badge a:hover,
 .badge:hover {
   color: #ff3300 !important;
-  display: block !important;
+  display: inline-block !important;
 
 }
 
@@ -191,11 +191,11 @@ td {
 
 
 
-.disabled {
+.panel-disabled {
   border-left: 8px solid #FF3300;
 }
 
-.enabled {
+.panel-enabled {
   border-left: 8px solid #00CC33;
 }
 
@@ -625,4 +625,123 @@ input[type="checkbox"]:checked + label span {
 .btn-half-right {
   float: right;
   width: 48%;
-}
+}
+
+
+/* ==========================================================================
+   Main Navigation
+   ========================================================================== */
+
+
+.nav-stacked {
+  background-color: #f8f8f8;
+}
+
+.nav-stacked > li {
+  padding-top: 5px;
+  padding-bottom: 7px;
+  border-bottom: 1px dotted #049baf;
+  border-right: 1px dotted #049baf;
+}
+.nav-stacked > li:first-child {
+  border-top: 1px dotted #049baf;
+}
+
+.nav-stacked > li > a {
+  padding-left: 40px;
+  padding-right: 3px;
+  border-left: 6px solid #049baf;
+  display: inline-block;
+}
+
+.nav-stacked > li > a.nav-notification {
+  border-left: 6px solid red !important;
+}
+
+.nav-stacked > li > a:hover, 
+.nav-stacked > li > a:focus {
+/*  font-weight: bold;*/
+  background-color: transparent; !important;
+  display: inline-block;
+}
+
+.nav-stacked > li:hover, 
+.nav-stacked > li:focus {
+background-color: #fff;
+
+}
+
+.nav-stacked > li.active {
+  background-color: #fff;
+  border-right: 0;
+}
+
+
+
+
+.nav-icon-hosts {
+  background-image: url('images/host_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 18px 17px;
+} 
+
+.nav-icon-services {
+  background-image: url('images/service_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 18px;
+} 
+.nav-icon-downtimes {
+  background-image: url('images/in_downtime_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 17px;
+} 
+.nav-icon-notifications {
+  background-image: url('images/notification_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 18px;
+} 
+.nav-icon-comments {
+  background-image: url('images/comment_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 19px;
+} 
+.nav-icon-dashboard {
+  background-image: url('images/dashboard_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 19px;
+} 
+.nav-icon-configuration {
+  background-image: url('images/configuration_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 19px;
+} 
+
+
+
+.badge-container-nav {
+  display: inline-block;
+  overflow: hidden;
+  padding-top: 0;
+  margin-bottom: 5px;
+}
+.badge-nav {
+  background-color: #fff;
+  border-radius: 2px;
+  color: #ff3300;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1;
+  min-width: 10px;
+  padding-bottom: 3px;
+  padding-left: 7px;
+  padding-right: 7px;
+  padding-top: 3px;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+  border: 1px solid #ff3300;
+}
+
+
+