Commit caf68ba9 authored by Romain Loth's avatar Romain Loth

better toolbars on top

parent e5cfaf85
...@@ -29,44 +29,44 @@ ...@@ -29,44 +29,44 @@
<body> <body>
<div id="topbar" class="navbar navbar-default navbar-fixed-top"> <div id="topbar" class="navbar navbar-default">
<div class="container"> <div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img style="width:20px;" src="libs/img2/home.png"></a>
</div>
<div class="navbar-header">
<a href="#" class="navbar-brand">Mapping Risk Research</a>
</div>
<div class="navbar-collapse collapse" id="navbar-main"> <div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav navbar-left">
<li class="navbar-middle">
<img style="width:20px" src="libs/img2/home.png">
</li>
<li style="margin-left:10px;">
<a href="#" class="navbar-middle navbar-brand">
<span id="twbrand">Mapping Risk Research</span>
</a>
</li>
<li class="disabled"> <li class="disabled">
<a> <a class="navbar-middle">
<span class="label label-default label-lg">MAP: </span> <span class="label label-default label-lg">MAP: </span>
</a> </a>
</li> </li>
<li> <li>
<a class="navbar-higher"> <a class="navbar-middle">
<span id="network" ></span> <span id="network" ></span>
</a> </a>
</li> </li>
</ul>
<ul class="nav navbar-nav">
<li> <li>
<div id="log"></div> <div id="log"></div>
</li> </li>
<li><a>.</a></li>
<li> <li>
<a> <a>
<div id="gexfs"></div> <div id="gexfs"></div>
</a> </a>
</li> </li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
...@@ -78,6 +78,7 @@ ...@@ -78,6 +78,7 @@
class="navbar-higher" class="navbar-higher"
title="ISC-PIF"> title="ISC-PIF">
<img src="libs/img2/logo_ISCPIF_small.svg"height="23"></a></li> <img src="libs/img2/logo_ISCPIF_small.svg"height="23"></a></li>
</ul> </ul>
</div><!--navbar-main--> </div><!--navbar-main-->
...@@ -86,12 +87,21 @@ ...@@ -86,12 +87,21 @@
<!-- ex-defaultop --> <!-- ex-defaultop -->
<div id="toolbar" class="navbar navbar-default navbar-fixed-top"> <div id="toolbar" class="navbar navbar-default">
<div id="defaultop" class="container"> <div id="defaultop" class="container">
<div class="navbar-header">
<button id="toolbar-open" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#left" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="left" class="navbar-collapse collapse"> <div id="left" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left"> <ul class="nav navbar-nav">
<!-- <!--
<li> <li>
...@@ -182,18 +192,17 @@ ...@@ -182,18 +192,17 @@
</tr> </tr>
</table> </table>
</li> --> </li> -->
<!-- </ul>
<ul id="searchnav" class='nav navbar-nav'> --> </ul>
<li class="nav navbar-lower">
<li class="nav navbar-lower"> <ul id="searchnav" class='nav navbar-nav'>
<div id="search_input_group" class="input-group input-group-sm"> <li class="navbar-lower">
<div id="search_input_group" class="input-group input-group-sm my-nav-input-group">
<span class="input-group-btn crowdsourcingModule"> <span class="input-group-btn crowdsourcingModule">
<button id="savesuggestion" <button id="savesuggestion"
disabled disabled
...@@ -234,16 +243,17 @@ ...@@ -234,16 +243,17 @@
<!-- say thanks for the suggestion, etc. --> <!-- say thanks for the suggestion, etc. -->
<li id="crowdsourcing_answer" class="nav crowdsourcingModule navbar-lower"></li> <li id="crowdsourcing_answer" class="nav crowdsourcingModule navbar-lower"></li>
<li class="nav navbar-lower"> <li class="navbar-lower">
<input id="checkboxdiv" onclick="alertCheckBox(this);" <input id="checkboxdiv" onclick="alertCheckBox(this);"
title="Add next search results to current selection" title="Add next search results to current selection"
class="nav btn btn-info" class="nav btn btn-info"
type="checkbox"> type="checkbox">
<span style="position: relative; top: 4px; left: 5px;">Add to selection</span> <span style="position: relative; top: 4px;">Add to selection</span>
</li> <!-- /checkbox group --> </li> <!-- /checkbox group -->
</ul> <!-- /searchnav -->
</ul>
</div><!-- /div#left --> </div><!-- /div#left -->
......
/* fixed TWJS grid: graph + bars /* fixed TWJS grid: graph + bars
* ----------------------------- * -----------------------------
* html, body * html, body
...@@ -37,6 +38,7 @@ html, body { ...@@ -37,6 +38,7 @@ html, body {
position: fixed; position: fixed;
top: 35px; top: 35px;
left: 0; left: 0;
right: 0;
z-index: 2; z-index: 2;
height: 70px; height: 70px;
width: 100%; width: 100%;
...@@ -49,6 +51,7 @@ html, body { ...@@ -49,6 +51,7 @@ html, body {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0;
z-index: 2; z-index: 2;
height: 35px; height: 35px;
width: 100%; width: 100%;
...@@ -56,39 +59,45 @@ html, body { ...@@ -56,39 +59,45 @@ html, body {
} }
/* toolbar contents */ #twbrand {
width: 50px !important;
/* searchnav gets same padding as bootstrap's .navbar-nav > li > a */ }
/* toolbar contents */
#defaultop { #defaultop {
padding-top: 8px; padding-top: 8px;
} }
.navbar-higher { .navbar-higher {
padding-top: 12px !important; padding-top: 5px !important;
}
.navbar-middle {
padding-top: 8px !important;
} }
.navbar-lower { .navbar-lower {
padding-top: 15px !important; padding-top: 15px !important;
} }
#defaultop .nav { #defaultop #searchnav {
margin-left: 15px !important; padding-left: 40px;
} }
#defaultop .my-nav-input-group {
#defaultop div#searchnav { width: 2vw !important;
padding-top: 13px; }
padding-bottom: 9px; #searchinput {
min-width: 150px;
max-width: 300px;
} }
#defaultop .weight-selectors { #defaultop .weight-selectors {
width: 135px !important; width: 135px !important;
padding-top: 15px; padding-top: 15px;
margin: 0 25px !important; margin: 0 25px ;
} }
#defaultop .weight-selectors td { #defaultop .weight-selectors td {
width: 135px !important; width: 135px !important;
padding: 0 0 10px 0 !important; padding: 0 0 10px 0 ;
} }
#defaultop .slider-legend { #defaultop .slider-legend {
...@@ -103,6 +112,12 @@ html, body { ...@@ -103,6 +112,12 @@ html, body {
display: none; /*not shown at init*/ display: none; /*not shown at init*/
} }
/* override navbar toggle on right side when collapsed */
#toolbar-open {
float:left !important;
margin-left: 15px !important;
}
/* VARIAE */ /* VARIAE */
...@@ -144,7 +159,7 @@ html, body { ...@@ -144,7 +159,7 @@ html, body {
/*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); */ /*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); */
-moz-border-radius: 6px; -moz-border-radius: 6px;
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
-khtml-border-radius: 6px;'+ -khtml-border-radius: 6px;
border-color:#BDBDBD; border-color:#BDBDBD;
padding:0px 2px 0px 2px; padding:0px 2px 0px 2px;
margin:1px 0px 1px 0px; margin:1px 0px 1px 0px;
...@@ -188,6 +203,7 @@ html, body { ...@@ -188,6 +203,7 @@ html, body {
} }
.grey { .grey {
color: #cccccc; font-style: italic; color: #cccccc; font-style: italic;
} }
...@@ -214,6 +230,7 @@ p.micromessage{ ...@@ -214,6 +230,7 @@ p.micromessage{
/* SIDEBAR CONTENT */ /* SIDEBAR CONTENT */
#sidebar { #sidebar {
...@@ -223,8 +240,9 @@ p.micromessage{ ...@@ -223,8 +240,9 @@ p.micromessage{
#tips{ #tips{
padding-left: 5%; padding-left: 5%;
padding-right: 5%; padding-right: 5%;
font-size:80%; font-size: 80%;
} }
#tips ul{ #tips ul{
/*list-style:none;*/ /*list-style:none;*/
padding-left:10%; padding-left:10%;
...@@ -234,7 +252,35 @@ p.micromessage{ ...@@ -234,7 +252,35 @@ p.micromessage{
font-size:80%; font-size:80%;
} }
#information ul {
list-style:none; /* viewport-specific variants */
padding-left:5%;
} /* collapsed variants */
@media(max-width: 768px){
/* collapsed nav items don't need padding anymore */
#defaultop #searchnav {
padding-left: 15px !important;
}
#defaultop .weight-selectors {
padding-left: 15px !important;
margin-left: 0 !important;
}
/* collapsed menu styling */
#left {
max-width: 320px;
background-color: #ddd;
overflow-x: hidden;
overflow-y: scroll;
z-index: 3;
padding: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
-moz-box-shadow: 0px 2px 6px #000;
-webkit-box-shadow: 0px 2px 6px #000;
box-shadow: 0px 2px 6px #000;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment