tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Navigation, Subnavigation 

refs #4824
This commit is contained in:
Susanne Vestner-Ludwig 2013-10-11 15:13:22 +02:00 committed by Eric Lippmann
parent 75a5cab0f9
commit dc632a40e7
3 changed files with 334 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc/Icinga-Design/documentation.css
View File

@ -17,7 +17,7 @@ html {
.docu-main {
width: 60%;
width: 100%;
padding: 20px;
margin: 0 auto;
}

229
doc/Icinga-Design/documentation.html
View File

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

143
doc/Icinga-Design/icinga-design.css
View File

@ -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;
}