[Pkg-nagios-changes] [SCM] UNNAMED PROJECT branch, debian/master, updated. 810edbdd3feedbfe37f4a65bee50b57b2f60fa2a
Frescha
frescha at unitedseed.de
Tue Feb 28 22:07:56 UTC 2012
The following commit has been merged in the debian/master branch:
commit 6f4d4c228eb77bb728322f5388ef0f310b820d64
Author: Frescha <frescha at unitedseed.de>
Date: Mon Dec 5 19:11:33 2011 +0100
dropdown menu without javascript
diff --git a/shinken/webui/htdocs/css/navigation.css b/shinken/webui/htdocs/css/navigation.css
index 73a35c0..873154f 100644
--- a/shinken/webui/htdocs/css/navigation.css
+++ b/shinken/webui/htdocs/css/navigation.css
@@ -1,25 +1,256 @@
-#mainmenu{
- margin: 0;
- padding: 0;
- float: left;
- width: 100%;
- overflow: hidden;
+.tac_impacts {
+ background: #FFFFFF;
+ color: #777777;
+ border-radius: 8px 8px 8px 8px;
+ border-top: 1px solid #CCCCCC;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-bottom: 1px
+}
+
+#menu {
+ list-style:none;
+ margin:0px auto 0px auto;
+ height:43px;
+ padding:0px 20px 0px 20px;
background: #222222;
}
-#mainmenu li{
- display: inline;
+#menu li {
+ float:left;
+ text-align:center;
+ position:relative;
+ padding: 4px 10px 4px 10px;
+ margin-right:30px;
+ margin-top:7px;
+ border:none;
}
-#mainmenu li a{
+#menu li:hover {
+ border: 1px solid #777777;
+ padding: 4px 9px 4px 9px;
+
+ /* Background color and gradients */
+
+ background: #F4F4F4;
+ background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
+
+ /* Rounded corners */
+
+ -moz-border-radius: 5px 5px 0px 0px;
+ -webkit-border-radius: 5px 5px 0px 0px;
+ border-radius: 5px 5px 0px 0px;
+}
+
+#menu li a {
+ font-family:Arial, Helvetica, sans-serif;
+ font-size:14px;
+ color: #EEEEEE;
+ display:block;
+ outline:0;
+ text-decoration:none;
+}
+
+#menu li:hover a {
+ color:#161616;
+ text-shadow: 1px 1px 1px #FFFFFF;
+}
+#menu li .drop {
+ padding-right:21px;
+ background:url("/static/images/icons/drop2.png") no-repeat right 8px;
+}
+#menu li:hover .drop {
+ background:url("/static/images/icons/drop.png") no-repeat right 7px;
+}
+
+/* Drop Down */
+
+.dropdown_1column,
+.dropdown_2columns,
+.dropdown_3columns,
+.dropdown_4columns,
+.dropdown_5columns {
+ margin:4px auto;
+ float:left;
+ position:absolute;
+ left:-999em; /* Hides the drop down */
+ text-align:left;
+ padding:10px 5px 10px 5px;
+ border:1px solid #777777;
+ border-top:none;
+
+ /* Gradient background */
+ background:#F4F4F4;
+ background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
+
+ /* Rounded Corners */
+ -moz-border-radius: 0px 5px 5px 5px;
+ -webkit-border-radius: 0px 5px 5px 5px;
+ border-radius: 0px 5px 5px 5px;
+}
+
+.dropdown_1column {width: 140px;}
+.dropdown_2columns {width: 280px;}
+.dropdown_3columns {width: 420px;}
+.dropdown_4columns {width: 560px;}
+.dropdown_5columns {width: 700px;}
+
+#menu li:hover .dropdown_1column,
+#menu li:hover .dropdown_2columns,
+#menu li:hover .dropdown_3columns,
+#menu li:hover .dropdown_4columns,
+#menu li:hover .dropdown_5columns {
+ left:-1px;
+ top:auto;
+}
+
+/* Columns */
+
+.col_1,
+.col_2,
+.col_3,
+.col_4,
+.col_5 {
+ display:inline;
float: left;
- color: #636363;
- padding: 9px 11px;
- text-decoration: none;
- font-size: 14px;
+ position: relative;
+ margin-left: 5px;
+ margin-right: 5px;
}
+.col_1 {width:130px;}
+.col_2 {width:270px;}
+.col_3 {width:410px;}
+.col_4 {width:550px;}
+.col_5 {width:690px;}
+
+/* Right alignment */
-#mainmenu li a:hover, #mainmenu li .current{
- color: white;
- background: transparent url(/static/images/pointer.gif) bottom center no-repeat;
-}
\ No newline at end of file
+#menu .menu_right {
+ float:right;
+ margin-right:0px;
+}
+#menu li .align_right {
+ /* Rounded Corners */
+ -moz-border-radius: 5px 0px 5px 5px;
+ -webkit-border-radius: 5px 0px 5px 5px;
+ border-radius: 5px 0px 5px 5px;
+}
+#menu li:hover .align_right {
+ left:auto;
+ right:-1px;
+ top:auto;
+}
+
+/* Drop Down Content Stylings */
+
+#menu p, #menu h2, #menu h3, #menu ul li {
+ font-family:Arial, Helvetica, sans-serif;
+ line-height:21px;
+ font-size:12px;
+ text-align:left;
+ text-shadow: 1px 1px 1px #FFFFFF;
+}
+#menu h2 {
+ font-size:21px;
+ font-weight:400;
+ letter-spacing:-1px;
+ margin:7px 0 14px 0;
+ padding-bottom:14px;
+ border-bottom:1px solid #666666;
+}
+#menu h3 {
+ font-size:14px;
+ margin:7px 0 14px 0;
+ padding-bottom:7px;
+ border-bottom:1px solid #888888;
+}
+#menu p {
+ line-height:18px;
+ margin:0 0 10px 0;
+}
+
+#menu li:hover div a {
+ font-size:12px;
+ color:#015b86;
+}
+#menu li:hover div a:hover {
+ color:#029feb;
+}
+.strong {
+ font-weight:bold;
+}
+.italic {
+ font-style:italic;
+}
+.imgshadow {
+ background:#FFFFFF;
+ padding:4px;
+ border:1px solid #777777;
+ margin-top:5px;
+ -moz-box-shadow:0px 0px 5px #666666;
+ -webkit-box-shadow:0px 0px 5px #666666;
+ box-shadow:0px 0px 5px #666666;
+}
+.img_left { /* Image sticks to the left */
+ width:auto;
+ float:left;
+ margin:5px 15px 5px 5px;
+}
+#menu li .black_box {
+ background-color:#333333;
+ color: #eeeeee;
+ text-shadow: 1px 1px 1px #000;
+ padding:4px 6px 4px 6px;
+
+ /* Rounded Corners */
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+
+ /* Shadow */
+ -webkit-box-shadow:inset 0 0 3px #000000;
+ -moz-box-shadow:inset 0 0 3px #000000;
+ box-shadow:inset 0 0 3px #000000;
+}
+#menu li ul {
+ list-style:none;
+ padding:0;
+ margin:0 0 12px 0;
+}
+#menu li ul li {
+ font-size:12px;
+ line-height:24px;
+ position:relative;
+ text-shadow: 1px 1px 1px #ffffff;
+ padding:0;
+ margin:0;
+ float:none;
+ text-align:left;
+ width:130px;
+}
+#menu li ul li:hover {
+ background:none;
+ border:none;
+ padding:0;
+ margin:0;
+}
+#menu li .greybox li {
+ background:#F4F4F4;
+ border:1px solid #bbbbbb;
+ margin:0px 0px 4px 0px;
+ padding:4px 6px 4px 6px;
+ width:116px;
+
+ /* Rounded Corners */
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+}
+#menu li .greybox li:hover {
+ background:#ffffff;
+ border:1px solid #aaaaaa;
+ padding:4px 6px 4px 6px;
+ margin:0px 0px 4px 0px;
+}
diff --git a/shinken/webui/views/navigation_element.tpl b/shinken/webui/views/navigation_element.tpl
index 7d4f2bd..437fb37 100644
--- a/shinken/webui/views/navigation_element.tpl
+++ b/shinken/webui/views/navigation_element.tpl
@@ -1,7 +1,7 @@
%if not 'app' in locals() : app = None
-<div id="navigation" class="grid_16">
- <ul id="mainmenu">
+<ul id="menu">
+
%menu = [ ('/', 'Dashboard'), ('/impacts','Impacts'), ('/problems','IT problems'), ('/all', 'All'), ('/system', 'System') ]
%for (key, value) in menu:
@@ -9,9 +9,71 @@
%if menu_part == key:
<li><a href="{{key}}" id="selected">{{value}}</a></li>
%else:
- <li><a href="{{key}}">{{value}}</a></li>
+ <li class="normal"><a href="{{key}}">{{value}}</a></li>
%end
%end
- </ul>
-</div>
+
+
+
+ <li class="menu_right"><a href="#" class="drop">Impacts <span class="tac_impacts">1 / 2 /3</span></a><!-- Begin 3 columns Item -->
+
+ <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
+
+ <div class="col_3">
+ <h2>Lists in Boxes</h2>
+ </div>
+
+ <div class="col_1">
+
+ <ul class="greybox">
+ <li><a href="#">FreelanceSwitch</a></li>
+ <li><a href="#">Creattica</a></li>
+ <li><a href="#">WorkAwesome</a></li>
+ <li><a href="#">Mac Apps</a></li>
+ <li><a href="#">Web Apps</a></li>
+ </ul>
+
+ </div>
+
+ <div class="col_1">
+
+ <ul class="greybox">
+ <li><a href="#">ThemeForest</a></li>
+ <li><a href="#">GraphicRiver</a></li>
+ <li><a href="#">ActiveDen</a></li>
+ <li><a href="#">VideoHive</a></li>
+ <li><a href="#">3DOcean</a></li>
+ </ul>
+
+ </div>
+
+ <div class="col_1">
+
+ <ul class="greybox">
+ <li><a href="#">Design</a></li>
+ <li><a href="#">Logo</a></li>
+ <li><a href="#">Flash</a></li>
+ <li><a href="#">Illustration</a></li>
+ <li><a href="#">More...</a></li>
+ </ul>
+
+ </div>
+
+ <div class="col_3">
+ <h2>Here are some image examples</h2>
+ </div>
+
+ <div class="col_3">
+ <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
+ <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>
+
+ <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
+ <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
+ </div>
+
+ </div><!-- End 3 columns container -->
+
+ </li><!-- End 3 columns Item -->
+
+</ul>
<div class="clear"></div>
\ No newline at end of file
--
UNNAMED PROJECT
More information about the Pkg-nagios-changes
mailing list