Skip to content

C
clinicaltrials
Commit caf68ba9 authored by Romain Loth's avatar Romain Loth
Browse files
Options

better toolbars on top

parent e5cfaf85
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 79 deletions
explorerjs.html
View file @ caf68ba9
......@@ -29,44 +29,44 @@
<body>
<div id="topbar" class="navbar navbar-default navbar-fixed-top">
<div id="topbar" class="navbar navbar-default">
<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">
<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">
<a>
<a class="navbar-middle">
<span class="label label-default label-lg">MAP: </span>
</a>
</li>
<li>
<a class="navbar-higher">
<a class="navbar-middle">
<span id="network" ></span>
</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<div id="log"></div>
</li>
<li><a>.</a></li>
<li>
<a>
<div id="gexfs"></div>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
......@@ -78,6 +78,7 @@
class="navbar-higher"
title="ISC-PIF">
<img src="libs/img2/logo_ISCPIF_small.svg"height="23"></a></li>
</ul>
</div><!--navbar-main-->
......@@ -86,12 +87,21 @@
<!-- 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 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">
<ul class="nav navbar-nav navbar-left">
<ul class="nav navbar-nav">
<!--
<li>
......@@ -182,68 +192,68 @@
</tr>
</table>
</li> -->
<!-- </ul>
<ul id="searchnav" class='nav navbar-nav'> -->
</ul>
<li class="nav navbar-lower">
<li class="nav navbar-lower">
<div id="search_input_group" class="input-group input-group-sm">
<span class="input-group-btn crowdsourcingModule">
<button id="savesuggestion"
disabled
title="Save this topic as a new suggestion"
class="btn btn-default"
type="button">
<span class="glyphicon glyphicon-save"
id="saveicon">
</span>
</button>
</span>
<ul id="searchnav" class='nav navbar-nav'>
<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">
<button id="savesuggestion"
disabled
title="Save this topic as a new suggestion"
class="btn btn-default"
type="button">
<span class="glyphicon glyphicon-save"
id="saveicon">
</span>
</button>
</span>
<span class="input-group-btn">
<button id="searchbutton"
title="Search the topic in the map"
class="btn btn-primary"
type="button">
<span class="glyphicon glyphicon-search">
</span>
</button>
</span>
<span class="input-group-btn">
<button id="searchbutton"
title="Search the topic in the map"
class="btn btn-primary"
type="button">
<span class="glyphicon glyphicon-search">
</span>
</button>
</span>
<!-- ########## THE SEARCH BAR ########## -->
<!-- ########## THE SEARCH BAR ########## -->
<input id="searchinput"
type="text"
class="form-control"
placeholder="Select node(s)" />
<input id="searchinput"
type="text"
class="form-control"
placeholder="Select node(s)" />
<!-- strSearchBar will replace placeholder value -->
<!-- strSearchBar will replace placeholder value -->
<!-- #################################### -->
<!-- #################################### -->
</div>
</li>
</div>
</li>
<!-- messages below the search bar -->
<!-- say thanks for the suggestion, etc. -->
<li id="crowdsourcing_answer" class="nav crowdsourcingModule navbar-lower"></li>
<!-- messages below the search bar -->
<!-- say thanks for the suggestion, etc. -->
<li id="crowdsourcing_answer" class="nav crowdsourcingModule navbar-lower"></li>
<li class="navbar-lower">
<li class="nav navbar-lower">
<input id="checkboxdiv" onclick="alertCheckBox(this);"
title="Add next search results to current selection"
class="nav btn btn-info"
type="checkbox">
<span style="position: relative; top: 4px;">Add to selection</span>
<input id="checkboxdiv" onclick="alertCheckBox(this);"
title="Add next search results to current selection"
class="nav btn btn-info"
type="checkbox">
<span style="position: relative; top: 4px; left: 5px;">Add to selection</span>
</li> <!-- /checkbox group -->
</li> <!-- /checkbox group -->
</ul> <!-- /searchnav -->
</ul>
</div><!-- /div#left -->
......
libs/css2/twjs.css
View file @ caf68ba9
/* fixed TWJS grid: graph + bars
* -----------------------------
* html, body
......@@ -37,6 +38,7 @@ html, body {
position: fixed;
top: 35px;
left: 0;
right: 0;
z-index: 2;
height: 70px;
width: 100%;
......@@ -49,6 +51,7 @@ html, body {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
height: 35px;
width: 100%;
......@@ -56,39 +59,45 @@ html, body {
}
/* toolbar contents */
/* searchnav gets same padding as bootstrap's .navbar-nav > li > a */
#twbrand {
width: 50px !important;
}
/* toolbar contents */
#defaultop {
padding-top: 8px;
}
.navbar-higher {
padding-top: 12px !important;
padding-top: 5px !important;
}
.navbar-middle {
padding-top: 8px !important;
}
.navbar-lower {
padding-top: 15px !important;
}
#defaultop .nav {
margin-left: 15px !important;
#defaultop #searchnav {
padding-left: 40px;
}
#defaultop div#searchnav {
padding-top: 13px;
padding-bottom: 9px;
#defaultop .my-nav-input-group {
width: 2vw !important;
}
#searchinput {
min-width: 150px;
max-width: 300px;
}
#defaultop .weight-selectors {
width: 135px !important;
padding-top: 15px;
margin: 0 25px !important;
margin: 0 25px ;
}
#defaultop .weight-selectors td {
width: 135px !important;
padding: 0 0 10px 0 !important;
padding: 0 0 10px 0 ;
}
#defaultop .slider-legend {
......@@ -103,6 +112,12 @@ html, body {
display: none; /*not shown at init*/
}
/* override navbar toggle on right side when collapsed */
#toolbar-open {
float:left !important;
margin-left: 15px !important;
}
/* VARIAE */
......@@ -144,7 +159,7 @@ html, body {
/*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;'+
-khtml-border-radius: 6px;
border-color:#BDBDBD;
padding:0px 2px 0px 2px;
margin:1px 0px 1px 0px;
......@@ -188,6 +203,7 @@ html, body {
}
.grey {
color: #cccccc; font-style: italic;
}
......@@ -214,6 +230,7 @@ p.micromessage{
/* SIDEBAR CONTENT */
#sidebar {
......@@ -223,8 +240,9 @@ p.micromessage{
#tips{
padding-left: 5%;
padding-right: 5%;
font-size:80%;
font-size: 80%;
}
#tips ul{
/*list-style:none;*/
padding-left:10%;
......@@ -234,7 +252,35 @@ p.micromessage{
font-size:80%;
}
#information ul {
list-style:none;
padding-left:5%;
}​
/* viewport-specific variants */
/* 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