From 7e9f51cb6afff77b1a2d65ddcee15d0056f58753 Mon Sep 17 00:00:00 2001 From: Susanne Vestner-Ludwig Date: Thu, 10 Oct 2013 10:46:06 +0200 Subject: [PATCH] 1st box details refs #4824 --- doc/Icinga-Design/documentation.html | 229 +++++++++++++++++----- doc/Icinga-Design/icinga-design.css | 250 +++++++++++++++++++++++- doc/Icinga-Design/images/host.png | Bin 0 -> 512 bytes doc/Icinga-Design/images/reschedule.png | Bin 0 -> 400 bytes 4 files changed, 422 insertions(+), 57 deletions(-) create mode 100644 doc/Icinga-Design/images/host.png create mode 100644 doc/Icinga-Design/images/reschedule.png diff --git a/doc/Icinga-Design/documentation.html b/doc/Icinga-Design/documentation.html index 3e2ff269a..c91ff303f 100644 --- a/doc/Icinga-Design/documentation.html +++ b/doc/Icinga-Design/documentation.html @@ -298,10 +298,6 @@ - - - - @@ -314,54 +310,6 @@ code... - -

Form Elements

- -

Select

-
- 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. -
- -
-
-
- - -
-
- - -
-
-
-
-
-
- - -
-
- -
- -
-
- - -

Pagination

@@ -422,7 +370,184 @@ code... +

Details

+

Basic Example

+
+ 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. +
+ +
+
+
+ + +
+
+ Host Status host_000 ölaierjoe paeurüuaeraeüure - Unreachable since 15:59
+
+
+ +
+ +
+

host_000 (checked by localhost.localdomain) OK: random hostcheck ok sometimes with multiline and html tags\n

+
+ +
+ Recheck +
+ + +
+
+ Last Check +
+
+ 1381308168 +
+
+ +
+
+ Next Check +
+
+ 1381309978 +
+
+ +
+
+ + +
+
+ Host Address +
+
+ 127.0.0.1 +
+
+ +
+
+ Alias +
+
+ random_000 +
+
+ + +
+ View Services For This Host + Recheck All Services +
+
+ + + + + +
+
+ Lorem Ipsum
+
+
+ +
+ +
+
+ Lorem ipsum +
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr +
+
+ +
+
+ +
+
+ Lorem ipsum +
+
+ Lorem ipsum dolor sit amet bla blubb. +
+
+ + +
+
+ + + +
+ + + + + + +
+
+ +
+ +
+
+ + + + +

Form Elements

+ +

Select

+
+ 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. +
+ +
+
+
+ + +
+
+ + +
+
+
+
+
+
+ + +
+
+ +
+ +
+

Buttons

diff --git a/doc/Icinga-Design/icinga-design.css b/doc/Icinga-Design/icinga-design.css index 3fdd388b2..dc641dfd8 100644 --- a/doc/Icinga-Design/icinga-design.css +++ b/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; -} \ No newline at end of file +} +.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%; +} \ No newline at end of file diff --git a/doc/Icinga-Design/images/host.png b/doc/Icinga-Design/images/host.png new file mode 100644 index 0000000000000000000000000000000000000000..12eb9a6b965504a0cec6fdde58dd64e5c39c2dc0 GIT binary patch literal 512 zcmV+b0{{JqP)AAsReSLJ$ptIk{b^#kDP`Ap8Rw8WM!Y<_d{~ zmZpLR2Z`1Y1l^t!1mUKcXem+AZRk0-L4)6E#`M^0R+U>RwiUwA35nuhC zKF6n>p2PTrR*dETKsublXWYg&45sZCRFa3dj+IJq8gKCf&+sC~a!HQ~p?IGdmEb#C z>DDb=4xyOuCBO{U>w;ex#~!vZiiwQiQerxSGkA(exP`SC%Z*Hh`#4({{Kk1)!%dtD zq4N!z+|d3 z7D90~lVBX1b-^L#(*DHB3|!4J|9;v2+Kc~zJIo)+T2B@@qNU9M00004nJ za0`Jjua~oQSQ(x|3W%b_6I{SgI%j}R_t62oUM5OS`nQBhD#Xl`JZC_=1 zSwv{)%5WFU4vocoi`IPlDa?Ok4r9agKU0Ksf0|hw(!KVv z@w;S0sLtc7DS6?h2_`c4`qM;wL%lXG%{!dZ@Ojl;7M(Tq2h0=pIJ}*4(tXv2`9WuH kpVeE%WNs0?fO*G1CaZL>GafVFfkK+W)78&qol`;+0Me10+W-In literal 0 HcmV?d00001