Skip to content

gargantext
gargantext
Commit 473b60cc authored by Romain Loth's avatar Romain Loth
Browse files
Options

tweakbar layout and css

parent c3d36fd1
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 136 deletions
static/lib/graphExplorer/extras_explorerjs.js
View file @ 473b60cc
......@@ -149,11 +149,11 @@ function CRUD( list_id , ngram_ids , http_method , callback) {
var div_info = "";
if( $( ".colorgraph_div" ).length>0 )
div_info += '<ul id="colorGraph" class="nav navbar-nav navbar-right">'
div_info += '<ul id="colorGraph" class="nav navbar-nav">'
div_info += ' <li class="dropdown">'
div_info += '<a href="#" class="dropdown-toggle" data-toggle="dropdown">'
div_info += ' <img title="Set Colors" src="/static/img/colors.png" width="20px"><b class="caret"></b></img>'
div_info += ' <img title="Set Colors" src="/static/img/colors.png" width="22px"><b class="caret"></b></img>'
div_info += '</a>'
div_info += ' <ul class="dropdown-menu">'
......@@ -186,11 +186,11 @@ function CRUD( list_id , ngram_ids , http_method , callback) {
div_info = "";
if( $( ".sizegraph_div" ).length>0 )
div_info += '<ul id="sizeGraph" class="nav navbar-nav navbar-right">'
div_info += '<ul id="sizeGraph" class="nav navbar-nav">'
div_info += ' <li class="dropdown">'
div_info += '<a href="#" class="dropdown-toggle" data-toggle="dropdown">'
div_info += ' <img title="Set Sizes" src="/static/img/NodeSize.png" width="20px"><b class="caret"></b></img>'
div_info += ' <img title="Set Sizes" src="/static/img/NodeSize.png" width="18px"><b class="caret"></b></img>'
div_info += '</a>'
div_info += ' <ul class="dropdown-menu">'
......
static/lib/graphExplorer/libs/css2/custom.css
View file @ 473b60cc
......@@ -18,12 +18,54 @@
}
.navbar {
margin-bottom:1px;
}
#defaultop{ }
#defaultop{
min-height: 5%;
/*max-height: 10%;*/
text-align: center;
}
#defaultop li.basicitem{
/*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ;*/
padding-left: .4em;
padding-right: .4em;
padding-bottom: 0;
font-size: 90% ;
}
#defaultop > div {
float: none;
display: inline-block;
text-align: left;
}
#defaultop > div {
float: none;
display: inline-block;
text-align: left;
}
#defaultop .nav > li > a {
text-align: center;
padding-top: .4em;
padding-bottom: .2em;
margin-left: auto ;
margin-right: auto ;
}
/*searchnav should get same padding as our .navbar-nav > li > a or bootstrap's*/
#defaultop div#searchnav {
padding-top: 13px;
padding-bottom: 9px;
}
#defaultop .settingslider {
max-width: 80px;
display: inline-block ;
}
#sigma-example {
width: 100%;
......@@ -362,6 +404,12 @@
padding-left:5%;
}​
/* small messages */
p.micromessage{
font-size: 85%;
color: #707070 ;
}
.btn-sm:hover {
font-weight: bold;
}
......
static/lib/graphExplorer/libs/css2/freshslider.css
View file @ 473b60cc
.fsslider {
position: relative;
min-width: 100px;
min-width: 80px;
height: 8px;
display: inline-block;
width: 100%;
......
templates/graphExplorer/explorer.html
View file @ 473b60cc
......@@ -54,140 +54,140 @@
<!-- this is a vertical spacer used to start everything below dafixedtop -->
<div id="topspace">
</div>
<!-- this is the tweakbar -->
<div id="defaultop" class="navbar navbar-default">
<div class="navbar-collapse collapse navbar-responsive-collapse">
<div id="left" style="margin:0em 2em;">
<ul class="nav navbar-nav">
<!--
<li>
<a>
<select id="aselector" onchange="console.log('salut monde')" class="selectpicker" data-style="btn btn-success btn-sm" data-width="auto">
<option value="Document" selected>Scholars</option>
<option value="NGram">Keywords</option>
</select>
</a>
</li> -->
<li>
<a>
<button type="button" id="changetype" class="btn btn-success btn-sm">Change Type</button>
</a>
</li>
<li>
<a>
<button type="button" id="changelevel" class="btn btn-info btn-sm" disabled>Change Level</button>
</a>
</li>
<li>
<a>
<div style="margin:0em 2em;" id="unranged-value"></div>
<label style="margin:0em 2em;" for="unranged-value">selector size</label>
</a>
</li>
<li>
<a>
<div id="graphid" style="visibility: hidden;">{{graphurl}}</div>
<input type="hidden" id="maplist_id" value="{{ maplist_id }}"></input>
<div id="jquerytemplatenb" style="visibility: hidden;">{{user.id}}</div>
</a>
</li>
<!--
<li>
<a>
<button type="button" onclick="partialGraph.stopForceAtlas2();" class="btn btn-sm">wu</button>
</a>
</li>
-->
</ul>
<ul id="category0" class="nav navbar-nav navbar-right">
<li>
<ul style="list-style-type: none; margin:.5em 0em 1em 1em;">
<li><div id="slidercat0nodesweight"></div></li>
<li><div id="slidercat0edgesweight"></div></li>
<li><div id="slidercat0nodessize"></div></li>
</ul>
</li>
</ul>
<ul id="filterslegend" class="nav navbar-nav navbar-right">
<li>
<ul style="list-style-type: none;">
<li>Nodes</li>
<li>Edges</li>
<li>Size</li>
</ul>
</li>
</ul>
<ul id="category1" class="nav navbar-nav navbar-right">
<li>
<ul style="list-style-type: none; margin:0em 1em;">
<li><div id="slidercat1nodesweight"></div></li>
<li><div id="slidercat1edgesweight"></div></li>
<li><div id="slidercat1nodessize"></div></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a>
<input type="checkbox" id="checkboxdiv" onclick="alertCheckBox(this);">Add</input>
</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a>
<input id="searchinput" autocomplete="off" class="form-control input-sm col-lg-8" placeholder="Search" type="text">
</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a>
<img width="17%" title="Compare with other corpus!" onclick="GetUserPortfolio(); $('#corpuses').modal('show');" src="{% static "img/INTER.png" %}"></img>
</a>
</li>
<!-- this is the tweakbar -->
<div class="container-fluid navbar-default">
<div id="defaultop" class="row">
<div id="left" class="col-sm-9 col-md-9 col-lg-7">
<ul class="nav navbar-nav">
<!--
<li>
<a>
<select id="aselector" onchange="console.log('salut monde')" class="selectpicker" data-style="btn btn-success btn-sm" data-width="auto">
<option value="Document" selected>Scholars</option>
<option value="NGram">Keywords</option>
</select>
</a>
</li>
-->
<li class='basicitem'><a>
<button type="button" id="changetype" class="btn btn-success btn-sm">Change Type</button>
</a></li>
<li class='basicitem'><a>
<button type="button" id="changelevel" class="btn btn-info btn-sm" disabled>Change Level</button>
</a></li>
<li class='basicitem'><a>
Selector size<br>
<div id="unranged-value" class="settingslider"></div>
</a></li>
<li class='basicitem'><a>
Colors<br>
<div class="colorgraph_div"></div>
</a></li>
<li class='basicitem'><a>
Sizes<br>
<div class="sizegraph_div"></div>
</a></li>
<li class='basicitem'><a>
<!-- TODO fix: category0 -> category1 switching -->
Label size<br>
<div id="slidercat0nodessize" class="settingslider"></div>
</a></li>
<!--
<li>
<a>
<button type="button" onclick="partialGraph.stopForceAtlas2();" class="btn btn-sm">wu</button>
</a>
</li>
-->
<!-- TODO fix: category0 -> category1 switching -->
<li class='basicitem'><a>
<!-- Create a subgraph -->
<ul id="category0" class="nav">
<li><small>Nodes</small> <div id="slidercat0nodesweight" class="settingslider"></div></li>
<li><small>Edges</small> <div id="slidercat0edgesweight" class="settingslider"></div></li>
</ul>
<div class="colorgraph_div"></div>
<div class="sizegraph_div"></div>
<!---->
</a></li>
<li class='basicitem'><a>
Compare<br>
<img width="30" title="Compare with other corpus!" onclick="GetUserPortfolio(); $('#corpuses').modal('show');" src="{% static "img/INTER.png" %}"></img>
</a></li>
</ul>
</div><!-- /div#left -->
<div id="right" class="col-sm-2 col-md-2 col-lg-4">
<div class='row' id="searchnav">
<!-- the smaller the viewport, the larger the relative search box size -->
<div class="col-sm-11 col-md-10 col-lg-10" >
<div id="search_input_group" class="input-group input-group-sm">
<span class="input-group-btn">
<button id="searchbutton"
title="Search the topic in the map"
class="btn btn-info"
type="button">
<span class="glyphicon glyphicon-search">
</span>
</button>
</span>
<!-- ########## THE SEARCH BAR ########## -->
<input id="searchinput"
type="text"
class="form-control"
placeholder="Search" />
<!-- #################################### -->
</div>
<!-- messages below the search bar -->
<div id="unused_msg"></div>
</div>
<div class="col-sm-1 col-md-2 col-lg-2">
<input id="checkboxdiv" onclick="alertCheckBox(this);"
title="Add next search results to current selection"
class="btn btn-info"
type="checkbox"></input>
<p style="font-size:75%; line-height:90%">Add</p>
</div>
</div>
<!--
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
-->
<!--
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
-->
</div>
</div><!-- /.row#defaultop -->
</div><!-- /.container.fluid -->
</div><!-- /.nav-collapse -->
</div><!-- /.navbar -->
<div id="graphid" style="display:none">{{graphurl}}</div>
<input type="hidden" id="maplist_id" value="{{ maplist_id }}"></input>
<div id="jquerytemplatenb" style="display:none">{{user.id}}</div>
<div id="wrapper">
......@@ -208,6 +208,11 @@
<!-- <div class="content-header">
<button id="menu-toggle">X</button>
</div> -->
<li>
<div id="unfold">
<a href="#" id="aUnfold" class="rightarrow"></a>
</div>
</li>
<!--
<li>
<a href="#" id="geomapicon" onclick="$('#geomapmodal').modal('show'); callGeomap();">
......
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