added nav design
This commit is contained in:
		| @@ -1,5 +1,5 @@ | ||||
| <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> | ||||
|   <hr id="status_bar" style="margin:0; border-width:4px 0px;"> | ||||
|   <hr id="status_bar"> | ||||
|   <div class="container"> | ||||
|     <div class="navbar-header"> | ||||
|       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> | ||||
| @@ -12,30 +12,35 @@ | ||||
|     <div class="navbar-collapse collapse"> | ||||
|       <ul class="nav navbar-nav"> | ||||
|         <li><a href="/">Home</a></li> | ||||
|         <li class="divider-vertical"></li> | ||||
|         <li><a href="/blog.html">Logbuch</a></li> | ||||
|         <li class="divider-vertical"></li> | ||||
|         <li><a href="/#about">Über uns</a></li> | ||||
|         <li class="divider-vertical"></li> | ||||
|         <li><a href="#contact">Kontakt</a></li> | ||||
|         <li class="divider-vertical"></li> | ||||
|         <li><a href="http://wiki.chaospott.de">Wiki</a></li> | ||||
|       </ul> | ||||
|       <ul class="nav navbar-nav navbar-right"> | ||||
|         <script> | ||||
|           $.getJSON("http://status.chaospott.de/status.json").done(function(data) { | ||||
|             if(data.state.open) { | ||||
|               document.getElementById('status_open').style.display='block'; | ||||
|               document.getElementById('status_bar').style.borderColor='#00ff00'; | ||||
|               $( "#status_open" ).css( "display", "block" ); | ||||
|               $( "#status_bar" ).css( "borderColor", "#00ff00" ); | ||||
|             } else { | ||||
|               document.getElementById('status_closed').style.display='block'; | ||||
|               document.getElementById('status_bar').style.borderColor='#ff0000'; | ||||
|               $( "#status_closed" ).css( "display", "block" ); | ||||
|               $( "#status_bar" ).css( "borderColor", "#ff0000" ); | ||||
| 	          } | ||||
|           }); | ||||
|         </script> | ||||
|         <li id="status_open" style="display:none; border-right:0;"> | ||||
|         <li id="status_open"> | ||||
|           <a href="#" style="color:#00ff00 !important;"> | ||||
|             Raum: offen | ||||
|             Raum offen | ||||
|           </a> | ||||
|         </li> | ||||
|         <li id="status_closed" style="display:none;"> | ||||
|           <a href="#" style="color:#ff0000;"> | ||||
|             Raum: geschlossen | ||||
|         <li id="status_closed"> | ||||
|           <a href="#"> | ||||
|             Raum geschlossen | ||||
|           </a> | ||||
|         </li> | ||||
|       </ul> | ||||
|   | ||||
| @@ -26,14 +26,6 @@ background-color:#d2d4bc; | ||||
| border:none; | ||||
| } | ||||
|  | ||||
| ul.navbar-nav li { | ||||
|   border-right:1px red solid; | ||||
| } | ||||
|  | ||||
| ul.navbar-nav li:last-child { | ||||
|   border-right:0; | ||||
| } | ||||
|  | ||||
| ul.navbar-nav li a { | ||||
|   color:red !important; | ||||
| } | ||||
| @@ -101,3 +93,40 @@ ul.nav>li>a { | ||||
|   display: block; | ||||
|   margin:auto; | ||||
| } | ||||
|  | ||||
| #status_open, #status_closed { | ||||
|   display:none;  | ||||
|   border:0; | ||||
| } | ||||
|  | ||||
| #status_open a { | ||||
|   color:#00ff00 !important; | ||||
| } | ||||
|  | ||||
| #status_closed a { | ||||
|   color:#ff0000 !important; | ||||
| } | ||||
|  | ||||
| #status_bar { | ||||
|   margin:0;  | ||||
|   border-width:2px 0px; | ||||
|   border-color:transparent; | ||||
| } | ||||
|  | ||||
| .navbar .divider-vertical { | ||||
| height: 20px; | ||||
| margin: 14px 9px; | ||||
| border-right: 1px solid #ff0000; | ||||
| border-left: 1px solid #ff0000; | ||||
| } | ||||
|  | ||||
| .navbar-inverse .divider-vertical { | ||||
| border-right-color: #222222; | ||||
| border-left-color: #111111; | ||||
| } | ||||
|  | ||||
| @media (max-width: 767px) { | ||||
| .navbar-collapse .nav > .divider-vertical { | ||||
|     display: none; | ||||
|   } | ||||
| } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Timm Szigat
					Timm Szigat