From dc632a40e77d291534ff3c03a6834ff922910084 Mon Sep 17 00:00:00 2001
From: Susanne Vestner-Ludwig <susanne.vestner-ludwig@inserteffect.com>
Date: Fri, 11 Oct 2013 15:13:22 +0200
Subject: [PATCH] Navigation, Subnavigation

refs #4824
---
 doc/Icinga-Design/documentation.css  |   2 +-
 doc/Icinga-Design/documentation.html | 229 ++++++++++++++++++++++++++-
 doc/Icinga-Design/icinga-design.css  | 143 +++++++++++++----
 3 files changed, 334 insertions(+), 40 deletions(-)

diff --git a/doc/Icinga-Design/documentation.css b/doc/Icinga-Design/documentation.css
index 0eefce38d..bedb95960 100644
--- a/doc/Icinga-Design/documentation.css
+++ b/doc/Icinga-Design/documentation.css
@@ -17,7 +17,7 @@ html {
 
 
 .docu-main {
-  width: 60%;
+  width: 100%;
   padding: 20px;
   margin: 0 auto;
 }
diff --git a/doc/Icinga-Design/documentation.html b/doc/Icinga-Design/documentation.html
index 90d7ee4b6..73054703d 100644
--- a/doc/Icinga-Design/documentation.html
+++ b/doc/Icinga-Design/documentation.html
@@ -603,10 +603,10 @@ code...
 
     <h1 class="docu-main-headline">Main Navigation</h1>
 
-<!--     <h1 class="docu-sub-headline">Sub Header</h1>
+    <h1 class="docu-sub-headline">Without Subnavigation</h1>
     <div class="docu-description">
       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>
 
     <div class="docu-section">
       <div class="docu-example">
@@ -646,11 +646,228 @@ code...
       </div><!-- .docu-example -->
 
 
+    </div><!-- .docu-section --> 
+
+
+
+
+    <h1 class="docu-sub-headline">With Subnavigation</h1>
+    <div class="docu-description">
+      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">
+
+          <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>
+
+            <!-- ##### Sub Nav ########  -->
+            <ul class="icinga-subnavigation">
+              <li class="icon-main-nav subnav-icon-configuration">
+                <a href="#">Lorem Ipsum lorem</a>
+              </li>
+              <li class="icon-main-nav subnav-icon-configuration">
+                <a href="#" class="nav-notification">Submenüpunkt 2</a>
+                <span class="badge-container-subnav">
+                  <a href="#" class="badge-subnav">
+                      12
+                  </a>
+                </span>
+              </li>
+              <li class="icon-main-nav subnav-icon-configuration active">
+                <a href="#">Dritter toller Punkt</a>
+              </li>
+            </ul>
+
+            <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">
+            <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><!-- .docu-section --> 
+
+
+
+
+
+
+
+
+
+
+
+    <h1 class="docu-main-headline">Dashboard</h1>
+
+
+    <div class="docu-section">
+      <div class="docu-example">
+        <div class="docu-module">
+
+          <div class="dashboard-container">
+            <table class="table table-condensed table-detail table-dashboard">
+
+                <thead class="sep">
+                <tr>
+                  <th colspan="3" class="test">
+                    <a href="#">Dies ist eine tolle Headline</a>
+                  </th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                  <td class="border-status-critical">09.10. 17:40</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                    <i class="dashboard-icons icon-flapping"></i>
+                    <i class="dashboard-icons icon-comment"></i>
+                    <i class="dashboard-icons icon-comment"></i>
+                  </td>
+                  <td><a href="#"><strong>Langerlangerlanger Servicename</strong></a> on <a href="#">Host_0815ganzganzganzganzganzlang blabla</a></td>
+                </tr>
+
+                <tr>
+                  <td class="border-status-unknown">unknown</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                  </td>
+                  <td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
+                </tr>
+
+                 <tr>
+                  <td class="border-status-warning">11.10.</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                    <i class="dashboard-icons icon-flapping"></i>
+                    <i class="dashboard-icons icon-comment"></i>
+                  </td>
+                  <td><a href="#"><strong>random_06</strong></a> on <a href="#">Host_insertEFFECT</a></td>
+                </tr>
+                <tr>
+                  <td class="border-status-unknown">unknown</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                  </td>
+                  <td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
+                </tr>
+                <tr>
+                  <td class="border-status-unknown">unknown</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                  </td>
+                  <td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
+                </tr>
+
+              </tbody>
+            </table>  
+          </div>
+
+
+
+          <div class="dashboard-container">
+            <table class="table table-condensed table-detail">
+              <tbody>
+                <tr>
+                  <th colspan="3" class="test">
+                    <a href="#">Dies ist eine tolle Headline</a>
+                  </th>
+                </tr>
+
+                <tr>
+                  <td class="border-status-critical">09.10.</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                    <i class="dashboard-icons icon-flapping"></i>
+                    <i class="dashboard-icons icon-comment"></i>
+                  </td>
+                  <td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_0815</a></td>
+                </tr>
+
+                <tr>
+                  <td class="border-status-unknown">unknown</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                  </td>
+                  <td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
+                </tr>
+
+                 <tr>
+                  <td class="border-status-warning">11.10.</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                    <i class="dashboard-icons icon-flapping"></i>
+                    <i class="dashboard-icons icon-comment"></i>
+                  </td>
+                  <td><a href="#"><strong>random_06</strong></a> on <a href="#">Host_insertEFFECT</a></td>
+                </tr>
+                <tr>
+                  <td class="border-status-unknown">unknown</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                  </td>
+                  <td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
+                </tr>
+                <tr>
+                  <td class="border-status-unknown">unknown</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                  </td>
+                  <td><a href="#"><strong>Ping</strong></a> on <a href="#">Host_123456</a></td>
+                </tr>
+                 <tr>
+                  <td class="border-status-warning">11.10.</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                    <i class="dashboard-icons icon-flapping"></i>
+                    <i class="dashboard-icons icon-comment"></i>
+                  </td>
+                  <td><a href="#"><strong>random_06</strong></a> on <a href="#">Host_insertEFFECT</a></td>
+                </tr>
+                 <tr>
+                  <td class="border-status-warning">11.10.</td>
+                  <td>
+                    <i class="dashboard-icons icon-unhandled"></i>
+                    <i class="dashboard-icons icon-flapping"></i>
+                    <i class="dashboard-icons icon-comment"></i>
+                  </td>
+                  <td><a href="#"><strong>random_06</strong></a> on <a href="#">Host_insertEFFECT</a></td>
+                </tr>
+              </tbody>
+            </table>  
+          </div>
+
+        </div><!-- .docu-module -->
+      </div><!-- .docu-example -->
+
 
-      <div class="docu-codeblock">
-        <textarea class="docu-code">Code... Code...
-        </textarea> 
-      </div><!-- .docu-codeblock -->
     </div><!-- .docu-section --> 
 
 
diff --git a/doc/Icinga-Design/icinga-design.css b/doc/Icinga-Design/icinga-design.css
index d648f9bec..53fff79ae 100644
--- a/doc/Icinga-Design/icinga-design.css
+++ b/doc/Icinga-Design/icinga-design.css
@@ -250,25 +250,6 @@ select.input-sm {
 }
 
 
-/*input[type="checkbox"] {
-    display:none;
-}
-input[type="checkbox"] + label span {
-    display:inline-block;
-    width:19px;
-    height:19px;
-    margin:-1px 4px 0 0;
-    vertical-align:middle;
-    background:url(images/flapping.png) left top no-repeat;
-    cursor:pointer;
-}
-input[type="checkbox"]:checked + label span {
-    background:url(check_radio_sheet.png) -19px top no-repeat;
-}*/
-
-            
-
-
 
 /* ==========================================================================
    Pagination
@@ -355,7 +336,7 @@ input[type="checkbox"]:checked + label span {
 /* Borders for Detail Headers  */
 
 .border-status-critical {
-  border-left: 8px solid #FF3300;
+  border-left: 10px solid #FF3300;
 }
 
 .border-status-ok {
@@ -633,12 +614,24 @@ input[type="checkbox"]:checked + label span {
    ========================================================================== */
 
 
+.nav-stacked > li + li {
+    margin-left: 0;
+    margin-top: 0;
+}
+
+
 .nav-stacked {
   background-color: #f8f8f8;
 }
 
+.icinga-subnavigation {
+  list-style: none;
+}
+
+
+
 .nav-stacked > li {
-  padding-top: 5px;
+  padding-top: 7px;
   padding-bottom: 7px;
   border-bottom: 1px dotted #049baf;
   border-right: 1px dotted #049baf;
@@ -647,31 +640,58 @@ input[type="checkbox"]:checked + label span {
   border-top: 1px dotted #049baf;
 }
 
-.nav-stacked > li > a {
+
+.icinga-subnavigation > li {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px dotted #049baf;
+  border-right: 1px dotted #049baf;
+}
+
+ul.icinga-subnavigation {
+
+  border-bottom: 1px dotted #049baf;
+  margin-left: 0;
+  padding-left: 15px;
+}
+
+.icinga-subnavigation > li:last-child {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 0;
+
+}
+
+.nav-stacked > li > a,
+.icinga-subnavigation > li > a {
   padding-left: 40px;
   padding-right: 3px;
   border-left: 6px solid #049baf;
   display: inline-block;
 }
 
-.nav-stacked > li > a.nav-notification {
+.nav-stacked > li > a.nav-notification,
+.icinga-subnavigation > li > a.nav-notification  {
   border-left: 6px solid red !important;
 }
 
 .nav-stacked > li > a:hover, 
-.nav-stacked > li > a:focus {
+.icinga-subnavigation > li > a:focus {
 /*  font-weight: bold;*/
   background-color: transparent; !important;
   display: inline-block;
 }
 
 .nav-stacked > li:hover, 
-.nav-stacked > li:focus {
+.nav-stacked > li:focus,
+.icinga-subnavigation > li:hover, 
+.icinga-subnavigation > li:focus {
 background-color: #fff;
 
 }
 
-.nav-stacked > li.active {
+.nav-stacked > li.active,
+.icinga-subnavigation > li.active {
   background-color: #fff;
   border-right: 0;
 }
@@ -682,47 +702,57 @@ background-color: #fff;
 .nav-icon-hosts {
   background-image: url('images/host_petrol.png');
   background-repeat: no-repeat;
-  background-position: 18px 17px;
+  background-position: 19px 50%;
 } 
 
 .nav-icon-services {
   background-image: url('images/service_petrol.png');
   background-repeat: no-repeat;
-  background-position: 19px 18px;
+  background-position: 19px 50%;
 } 
 .nav-icon-downtimes {
   background-image: url('images/in_downtime_petrol.png');
   background-repeat: no-repeat;
-  background-position: 19px 17px;
+  background-position: 19px 50%;
 } 
 .nav-icon-notifications {
   background-image: url('images/notification_petrol.png');
   background-repeat: no-repeat;
-  background-position: 19px 18px;
+  background-position: 19px 20px;
 } 
 .nav-icon-comments {
   background-image: url('images/comment_petrol.png');
   background-repeat: no-repeat;
-  background-position: 19px 19px;
+  background-position: 19px 50%;
 } 
 .nav-icon-dashboard {
   background-image: url('images/dashboard_petrol.png');
   background-repeat: no-repeat;
-  background-position: 19px 19px;
+  background-position: 19px 50%;
 } 
 .nav-icon-configuration {
   background-image: url('images/configuration_petrol.png');
   background-repeat: no-repeat;
-  background-position: 19px 19px;
+  background-position: 19px 50%;
 } 
 
 
+.subnav-icon-configuration {
+  background-image: url('images/configuration_petrol.png');
+  background-repeat: no-repeat;
+  background-position: 19px 50%;
+} 
+
+
+
+
 
 .badge-container-nav {
   display: inline-block;
   overflow: hidden;
   padding-top: 0;
   margin-bottom: 5px;
+
 }
 .badge-nav {
   background-color: #fff;
@@ -743,5 +773,52 @@ background-color: #fff;
   border: 1px solid #ff3300;
 }
 
+.badge-container-subnav {
+  position: absolute;
+  overflow: hidden;
+  padding-top: 0;
+  padding-bottom;
+  margin-left: 2px;
+  margin-top: -8px;
+}
+.badge-subnav {
+  background-color: #fff;
+  border-radius: 2px;
+  color: #ff3300;
+  display: inline-block;
+  font-size: 10px;
+  font-weight: bold;
+  line-height: 1;
+  min-width: 10px;
+  padding-bottom: 2px;
+  padding-left: 5px;
+  padding-right: 5px;
+  padding-top: 2px;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+  border: 1px solid #ff3300;
+}
 
 
+
+/* ==========================================================================
+   Dashboard
+   ========================================================================== */
+
+.dashboard-container {
+
+  margin-right: 40px;
+  margin-bottom: 20px;
+
+  display: inline-block;
+  vertical-align: top;
+
+}
+
+.dashboard-icons {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+}
+