1st box details

refs #4824

doc/Icinga-Design/documentation.html

@@ -298,10 +298,6 @@
 
 
 
-
-
-
-
         </div><!-- .docu-module -->
       </div><!-- .docu-example -->
 
@@ -315,54 +311,6 @@ code...
 
 
   
-    <h1 class="docu-main-headline">Form Elements</h1>
-
-    <h1 class="docu-sub-headline">Select</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">
-
-
-          <form data-icinga-component="app/form" action="" method="get" class="form-inline" name="hosts" id="icinga-component-0">
-            <div id="sort-element" class="form-group">
-              <label for="sort">Sort By</label>
-                <select data-icinga-form-autosubmit="1" class="form-control input-sm" id="sort" name="sort">
-                <option value="host_last_check">Last Host Check</option>
-                <option value="host_severity">Host Severity</option>
-                <option value="host_state">Hard State</option>
-                <option value="host_name">Host Name</option>
-                <option value="host_address">Address</option>
-                </select>
-            </div>
-            <div id="dir-element" class="form-group"><label for="dir">&nbsp;</label>
-            <select data-icinga-form-autosubmit="1" class="form-control input-sm" id="dir" name="dir">
-                <option value="desc">Desc</option>
-                <option value="asc">Asc</option>
-            </select></div>
-            <div id="submit_hosts-element" class="form-group"><label for="submit_hosts">&nbsp;</label><noscript>
-            &lt;input type="submit" name="submit_hosts" id="submit_hosts" value="Sort" class="btn btn-default form-control input-sm" condition="0" addLabelPlaceholder="1"&gt;</noscript>
-            </div>
-          </form>
-
-
-        </div><!-- .docu-module -->
-      </div><!-- .docu-example -->
-
-      <div class="docu-codeblock">
-        <textarea class="docu-code">
-  ...
-
-        </textarea> 
-      </div><!-- .docu-codeblock -->
-    </div><!-- .docu-section --> 
-
-
-
-  
     <h1 class="docu-main-headline">Pagination</h1>
 
     <div class="docu-description">
@@ -422,7 +370,184 @@ code...
 
 
 
+    <h1 class="docu-main-headline">Details</h1>
 
+    <h1 class="docu-sub-headline">Basic Example</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">
+
+
+          <div class="panel-heading border-status-critical">
+          <div class="panel-hostname">
+            Host Status host_000 ölaierjoe  paeurüuaeraeüure <span class="panel-header-status">- Unreachable since 15:59</span></div>
+          </div> 
+          <hr class="separator" /> 
+
+          <div class="panel-body">
+
+            <div class="panel-row">
+              <p>host_000 (checked by localhost.localdomain) OK: random hostcheck ok sometimes with multiline and html tags\n </p>
+            </div>    
+
+            <div class="panel-row">
+              <a href="#" class="button btn-common btn-wide">Recheck</a>
+            </div>
+
+
+            <div class="panel-row">
+              <div class="panel-label">
+                Last Check
+              </div>
+              <div class="panel-content">
+                1381308168
+              </div>
+            </div>   
+
+            <div class="panel-row">
+              <div class="panel-label">
+                Next Check
+              </div>
+              <div class="panel-content">
+                1381309978
+              </div>
+              <div class="panel-button">
+                <a href="#" class="button btn-common btn-small"><span class="icon-reschedule icon-btn-small"></span></a>
+              </div>
+            </div>   
+
+
+            <div class="panel-row">
+              <div class="panel-label">
+                Host Address
+              </div>
+              <div class="panel-content">
+                127.0.0.1
+              </div>
+            </div>   
+
+            <div class="panel-row">
+              <div class="panel-label">
+                Alias
+              </div>
+              <div class="panel-content">
+                random_000
+              </div>
+            </div> 
+
+
+            <div class="panel-row">
+              <a href="#" class="button btn-common btn-half-left">View Services For This Host </a>
+              <a href="#" class="button btn-common btn-half-right">Recheck All Services</a>
+            </div> 
+          </div>
+
+
+
+
+
+          <div class="panel-heading">
+          <div class="panel-hostname">
+            Lorem Ipsum</div>
+          </div> 
+          <hr class="separator" /> 
+
+          <div class="panel-body">
+
+            <div class="panel-row">
+              <div class="panel-label">
+                Lorem ipsum
+              </div>
+              <div class="panel-content">
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+              </div>
+              <div class="panel-button">
+                <a href="#" class="button btn-common btn-small"><span class="icon-remove icon-btn-small"></span></a>
+              </div>
+            </div> 
+
+            <div class="panel-row">
+              <div class="panel-label">
+                Lorem ipsum
+              </div>
+              <div class="panel-content ">
+                Lorem ipsum dolor sit amet bla blubb.
+              </div>
+              <div class="panel-button">
+                <a href="#" class="button btn-common btn-small"><span class="icon-remove icon-btn-small"></span></a>
+                <a href="#" class="button btn-common btn-small"><span class="icon-comment icon-btn-small"></span></a>
+              </div>
+           </div>
+
+
+
+          </div>  
+
+
+
+
+
+
+        </div><!-- .docu-module -->
+      </div><!-- .docu-example -->
+
+      <div class="docu-codeblock">
+        <textarea class="docu-code">Code... Code...
+        </textarea> 
+      </div><!-- .docu-codeblock -->
+    </div><!-- .docu-section --> 
+
+
+
+
+    <h1 class="docu-main-headline">Form Elements</h1>
+
+    <h1 class="docu-sub-headline">Select</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">
+
+
+          <form data-icinga-component="app/form" action="" method="get" class="form-inline" name="hosts" id="icinga-component-0">
+            <div id="sort-element" class="form-group">
+              <label for="sort">Sort By</label>
+                <select data-icinga-form-autosubmit="1" class="form-control input-sm" id="sort" name="sort">
+                <option value="host_last_check">Last Host Check</option>
+                <option value="host_severity">Host Severity</option>
+                <option value="host_state">Hard State</option>
+                <option value="host_name">Host Name</option>
+                <option value="host_address">Address</option>
+                </select>
+            </div>
+            <div id="dir-element" class="form-group"><label for="dir">&nbsp;</label>
+            <select data-icinga-form-autosubmit="1" class="form-control input-sm" id="dir" name="dir">
+                <option value="desc">Desc</option>
+                <option value="asc">Asc</option>
+            </select></div>
+            <div id="submit_hosts-element" class="form-group"><label for="submit_hosts">&nbsp;</label><noscript>
+            &lt;input type="submit" name="submit_hosts" id="submit_hosts" value="Sort" class="btn btn-default form-control input-sm" condition="0" addLabelPlaceholder="1"&gt;</noscript>
+            </div>
+          </form>
+
+
+        </div><!-- .docu-module -->
+      </div><!-- .docu-example -->
+
+      <div class="docu-codeblock">
+        <textarea class="docu-code">
+  ...
+
+        </textarea> 
+      </div><!-- .docu-codeblock -->
+    </div><!-- .docu-section --> 
 
 
     <h1 class="docu-main-headline">Buttons</h1>

doc/Icinga-Design/icinga-design.css

@@ -20,6 +20,10 @@ p {
   line-height: 18px;
 }
 
+.gap {
+  margin-bottom: 15px;
+}
+
 
 /* ==========================================================================
    Links
@@ -299,6 +303,43 @@ select.input-sm {
 }
 
 
+/* Borders for Detail Headers  */
+
+.border-status-critical {
+  border-left: 8px solid #FF3300;
+}
+
+.border-status-ok {
+  border-left: 10px solid #00CC33;
+}
+
+.border-status-warning {
+  border-left: 10px solid #FFA500;
+}
+
+.border-status-unknown {
+  border-left: 10px solid #E066FF;
+}
+
+/** Host status **/
+
+.border-status-unreachable {
+  border-left: 10px solid #E066FF;
+}
+
+.border-status-down {
+  border-left: 10px solid #FF3300;
+}
+
+.border-status-up {
+  background-color: #00CC33;
+}
+
+
+
+
+
+
 
 /* ==========================================================================
    Icons
@@ -308,21 +349,220 @@ select.input-sm {
   width: 16px;
   height: 20px;
   display: block;
+  background-position: 50% 0;
 }
 
+.icon-header {
+  background-position: 0 50%;
+  padding-left: 25px;
+  height: 20px;
+}
+
+.icon-btn-small {
+  background-position: 0 0;
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+
 .icon-flapping {
   background-image: url('images/flapping.png');
   background-repeat: no-repeat;
-  background-position: 50% 0;
-
 }  
 .icon-comment {
   background-image: url('images/comment.png');
   background-repeat: no-repeat;
-  background-position: 0 0;
 }  
 .icon-unhandled {
   background-image: url('images/unhandled.png');
   background-repeat: no-repeat;
-  background-position: 0 0;
+} 
+.icon-host {
+  background-image: url('images/host.png');
+  background-repeat: no-repeat;
+} 
+.icon-acknowledgement {
+  background-image: url('images/acknowledgement.png');
+  background-repeat: no-repeat;
+} 
+.icon-remove {
+  background-image: url('images/remove.png');
+  background-repeat: no-repeat;
+} 
+.icon-submit {
+  background-image: url('images/submit.png');
+  background-repeat: no-repeat;
+}
+.icon-create {
+  background-image: url('images/create.png');
+  background-repeat: no-repeat;
+} 
+.icon-dashboard {
+  background-image: url('images/dashboard.png');
+  background-repeat: no-repeat;
+} 
+.icon-disable {
+  background-image: url('images/disable.png');
+  background-repeat: no-repeat;
+} 
+.icon-edit {
+  background-image: url('images/edit.png');
+  background-repeat: no-repeat;
+} 
+.icon-error {
+  background-image: url('images/error.png');
+  background-repeat: no-repeat;
+} 
+.icon-downtime {
+  background-image: url('images/in_downtime.png');
+  background-repeat: no-repeat;
+} 
+.icon-save {
+  background-image: url('images/save.png');
+  background-repeat: no-repeat;
+} 
+.icon-service {
+  background-image: url('images/service.png');
+  background-repeat: no-repeat;
+} 
+.icon-user {
+  background-image: url('images/user.png');
+  background-repeat: no-repeat;
+}
+.icon-reschedule {
+  background-image: url('images/reschedule.png');
+  background-repeat: no-repeat;
+}  
+
+
+/* ==========================================================================
+   Details Panel
+   ========================================================================== */
+
+
+.panel-heading {
+  border-bottom: 0;
+  margin-bottom: 0px !important;
+  padding-left: 5px;
+  padding-bottom: 3px;
+  padding-top: 5px;
+  overflow: hidden;
+  border-radius: 0;
+}
+
+.panel-hostname {
+  font-weight: bold;
+}
+
+.separator {
+  border-top: 2px solid #ddd;
+  border-bottom: 0;
+  margin: 0;
+  height: 2px;
+}
+
+.panel-header-status {
+  font-weight: normal;
+}
+
+.panel-row {
+  display: block;
+  margin-bottom: 10px;
+  overflow: hidden;
+  border-bottom: 1px dotted #ddd;
+  padding-bottom: 10px;
+}
+
+
+.panel-label {
+  float: left;
+  padding-right: 10px;
+  width: 30%;
+  clear: left;
+  
+}
+.panel-content {
+  float: left;
+  padding-right: 10px;
+  display: inline-block;
+  max-width: 40%;
+}
+
+.panel-button {
+  float: right;
+  display: inline-block;
+  overflow: hidden;
+}
+
+.panel-body {
+  margin-bottom: 45px;
+}
+
+
+
+/* ==========================================================================
+   Buttons
+   ========================================================================== */
+
+.button {
+  text-align: center;
+  padding: 3px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+}
+
+.btn-common {
+  border-color: #ddd;
+  color: #262625;
+  background: rgb(255,255,255); /* Old browsers */
+  background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
+  background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
+}
+
+.panel-row > a:hover,
+.btn-common:hover {
+  border-color: #262625 !important;
+  color: #262625 !important;
+  text-decoration: none;
+}
+
+
+.btn-cta {
+  border-color: #049BAF;
+  color: #049BAF;
+  background: rgb(255,255,255); /* Old browsers */
+  background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
+  background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
+}
+
+
+
+.btn-small {
+  width: 25px;
+  height: 25px;
+  display: inline-block;
+}
+
+.btn-wide {
+  width: 100%;
+  display: block;
+}
+
+.btn-half-left {
+  float: left;
+  width: 48%;
+}
+.btn-half-right {
+  float: right;
+  width: 48%;
 }