Skip to content

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

tweakbar layout and css

parent c3d36fd1
Show 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) { ...@@ -149,11 +149,11 @@ function CRUD( list_id , ngram_ids , http_method , callback) {
var div_info = ""; var div_info = "";
if( $( ".colorgraph_div" ).length>0 ) 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 += ' <li class="dropdown">'
div_info += '<a href="#" class="dropdown-toggle" data-toggle="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 += '</a>'
div_info += ' <ul class="dropdown-menu">' div_info += ' <ul class="dropdown-menu">'
...@@ -186,11 +186,11 @@ function CRUD( list_id , ngram_ids , http_method , callback) { ...@@ -186,11 +186,11 @@ function CRUD( list_id , ngram_ids , http_method , callback) {
div_info = ""; div_info = "";
if( $( ".sizegraph_div" ).length>0 ) 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 += ' <li class="dropdown">'
div_info += '<a href="#" class="dropdown-toggle" data-toggle="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 += '</a>'
div_info += ' <ul class="dropdown-menu">' div_info += ' <ul class="dropdown-menu">'
......
static/lib/graphExplorer/libs/css2/custom.css
View file @ 473b60cc
...@@ -18,12 +18,54 @@ ...@@ -18,12 +18,54 @@
} }
.navbar { .navbar {
margin-bottom:1px; 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 { #sigma-example {
width: 100%; width: 100%;
...@@ -362,6 +404,12 @@ ...@@ -362,6 +404,12 @@
padding-left:5%; padding-left:5%;
}​ }​
/* small messages */
p.micromessage{
font-size: 85%;
color: #707070 ;
}
.btn-sm:hover { .btn-sm:hover {
font-weight: bold; font-weight: bold;
} }
......
static/lib/graphExplorer/libs/css2/freshslider.css
View file @ 473b60cc
.fsslider { .fsslider {
position: relative; position: relative;
min-width: 100px; min-width: 80px;
height: 8px; height: 8px;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
......
templates/graphExplorer/explorer.html
View file @ 473b60cc
...@@ -56,12 +56,12 @@ ...@@ -56,12 +56,12 @@
</div> </div>
<!-- this is the tweakbar --> <!-- this is the tweakbar -->
<div id="defaultop" class="navbar navbar-default"> <div class="container-fluid navbar-default">
<div class="navbar-collapse collapse navbar-responsive-collapse"> <div id="defaultop" class="row">
<div id="left" style="margin:0em 2em;"> <div id="left" class="col-sm-9 col-md-9 col-lg-7">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<!-- <!--
<li> <li>
<a> <a>
<select id="aselector" onchange="console.log('salut monde')" class="selectpicker" data-style="btn btn-success btn-sm" data-width="auto"> <select id="aselector" onchange="console.log('salut monde')" class="selectpicker" data-style="btn btn-success btn-sm" data-width="auto">
...@@ -69,36 +69,37 @@ ...@@ -69,36 +69,37 @@
<option value="NGram">Keywords</option> <option value="NGram">Keywords</option>
</select> </select>
</a> </a>
</li> -->
<li>
<a>
<button type="button" id="changetype" class="btn btn-success btn-sm">Change Type</button>
</a>
</li> </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>
<li>
<a>
<button type="button" id="changelevel" class="btn btn-info btn-sm" disabled>Change Level</button> <button type="button" id="changelevel" class="btn btn-info btn-sm" disabled>Change Level</button>
</a> </a></li>
</li>
<li class='basicitem'><a>
Selector size<br>
<div id="unranged-value" class="settingslider"></div>
</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> <li class='basicitem'><a>
<a> Colors<br>
<div id="graphid" style="visibility: hidden;">{{graphurl}}</div> <div class="colorgraph_div"></div>
<input type="hidden" id="maplist_id" value="{{ maplist_id }}"></input> </a></li>
<div id="jquerytemplatenb" style="visibility: hidden;">{{user.id}}</div>
</a> <li class='basicitem'><a>
</li> 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> <li>
...@@ -108,66 +109,60 @@ ...@@ -108,66 +109,60 @@
</li> </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> </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> </a></li>
</ul>
<ul class="nav navbar-nav navbar-right"> <li class='basicitem'><a>
<li><a> Compare<br>
<input id="searchinput" autocomplete="off" class="form-control input-sm col-lg-8" placeholder="Search" type="text"> <img width="30" title="Compare with other corpus!" onclick="GetUserPortfolio(); $('#corpuses').modal('show');" src="{% static "img/INTER.png" %}"></img>
</a></li> </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>
</ul> </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>
<div class="colorgraph_div"></div> <!-- ########## THE SEARCH BAR ########## -->
<div class="sizegraph_div"></div>
<!----> <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> </div>
<!-- <!--
...@@ -185,9 +180,14 @@ ...@@ -185,9 +180,14 @@
</li> </li>
</ul> </ul>
--> -->
</div>
</div><!-- /.nav-collapse --> </div><!-- /.row#defaultop -->
</div><!-- /.navbar --> </div><!-- /.container.fluid -->
<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"> <div id="wrapper">
...@@ -208,6 +208,11 @@ ...@@ -208,6 +208,11 @@
<!-- <div class="content-header"> <!-- <div class="content-header">
<button id="menu-toggle">X</button> <button id="menu-toggle">X</button>
</div> --> </div> -->
<li>
<div id="unfold">
<a href="#" id="aUnfold" class="rightarrow"></a>
</div>
</li>
<!-- <!--
<li> <li>
<a href="#" id="geomapicon" onclick="$('#geomapmodal').modal('show'); callGeomap();"> <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