Skip to content

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

WIP: rename container, simplify css, fix left side panels alignment & zindex

parent 4db68c2a
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 110 deletions
explorerjs.html
View file @ 0a09d245
......@@ -217,40 +217,11 @@
<!-- £TODO wtf </div> -->
<div id="wrapper">
<!-- Sidebar left, new css -->
<div id="leftcolumn" class="newleftbar">
<!-- selected nodes -->
<div class="row">
<button id="unselectbutton"
style="color: #900;font-weight: bold;font-size: 70%;text-transform: uppercase;float:right;margin-right:.5em"
onClick='cancelSelection(false);'
title="Unselect these terms">
<span class="glyphicon glyphicon-remove" alt="X"></span>
</button>
<div id="names"></div>
</div>
<!-- histogram of selected nodes -->
<div class="row histogramModule">
<!-- filled by query (user search value) to wos api -->
<div id="search_histogram_wrapper" class="col-md-12">
<div id="search_histogram"></div>
</div>
</div><!-- /row -->
<!-- class="my-legend" (absolute position bottom) -->
<div id="legend_for_clusters"></div>
</div>
<div id="zonecentre">
<!-- Page content -->
<div id="sigma-example"></div>
<div id="sigma-contnr"></div>
<div style="visibility: hidden;" id="sigma-othergraph"></div>
......@@ -310,6 +281,39 @@
</ul>
</div>
<!-- inline *after* zonecentre for better overlay positioning -->
<!-- Sidebar top left -->
<div id="lefttopbox">
<!-- selected nodes -->
<div id="tw-current-selection">
<button id="unselectbutton"
style="color: #900;font-weight: bold;font-size: 70%;text-transform: uppercase;float:right;margin-right:.5em"
onclick='cancelSelection(false);'
title="Unselect these terms">
<span class="glyphicon glyphicon-remove" alt="X"></span>
</button>
<div id="names"></div>
</div>
<!-- histogram of selected nodes -->
<div class="histogramModule">
<!-- filled by query (user search value) to wos api -->
<div id="search_histogram" class="over-panels"></div>
</div><!-- /row -->
</div>
<!-- class="my-legend" (absolute position bottom left) -->
<div id="legend_for_clusters" class="over-panels"></div>
<!-- Sidebar right, old css -->
<div id="rightcolumn">
......
histogramModule/histogram.css
View file @ 0a09d245
/* ------------- module dygraph charts pour histogramme WOS ----------------- */
/*
#mainform{
margin-top: .3em;
margin-bottom: .3em;
padding-right: 5px;
padding-left: 5px;
}
.ui-menu, .ui-menu-item {
hack for autocomplete menu to end up *over* modal:z1000
z-index: 1100;
}
.ui-menu-item a{
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
}
*/
#search_histogram_wrapper{
margin: 0 ;
/* overwrite bootstrap's
* grid element padding*/
padding-right: 2em ;
margin-left: -.5em ;
}
/* graph div */
#search_histogram{
min-height: 15em ;
font-size: 85%;
#search_histogram {
min-height: 12em ;
font-size: 75%;
background-color: #F9F9F9 ;
display: none;
position:relative;
padding: 0 15px;
max-width: 100%;
}
/* dygraph internal canvas */
#search_histogram canvas{
margin: 0 ;
padding: 0;
#search_histogram canvas {
padding-right: 1em;
margin-left: -1em;
}
libs/css2/custom.css
View file @ 0a09d245
......@@ -13,13 +13,13 @@
.loader{
text-align:center;
transform: translate(0, 50%) !important;
-ms-transform: translate(0, 50%) !important; /*IE 9*/
-ms-transform: translate(0, 50%) !important; /*IE 9*/
-webkit-transform: translate(0, 50%) !important; /*Safari and Chrome */
}
.navbar {
.navbar {
margin-bottom:1px;
}
......@@ -34,7 +34,7 @@
/* searchnav gets same padding as bootstrap's .navbar-nav > li > a */
#defaultop div#searchnav {
padding-top: 13px;
padding-top: 13px;
padding-bottom: 9px;
}
......@@ -49,41 +49,53 @@
}
#sigma-example {
#sigma-contnr {
width: 100%;
height: 300px;
position:relative;
position:absolute;
float:left;
z-index: 1;
}
.clusters_legend {
.legend_for_clusters {
position:absolute;
bottom:1px;
left:1px;
border:solid 1px red;
font-size:xx-small;
}
/* any block over the graph (legend, histogram...) */
.over-panels {
z-index: 5 ; /* over the graph */
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;
}
/*
.my-legend * {
position: relative;
z-index: 5;
}*/
.my-legend {
position:fixed;
/* width: we set it smaller than #leftcolumn container's width */
width:16%;
z-index: 5;
/* width: we set it equal or smaller than #lefttopbox width */
width:18%;
max-height: 40%;
overflow-y:scroll;
bottom:5px;
left:5px;
background-color:white;
opacity: 0.8;
color:#250587;
margin: 7px;
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;
}
.my-legend .legend-title {
......@@ -187,10 +199,10 @@
/*.selection-item{
display:inline-block;
border:solid 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;'+
border-color:#BDBDBD;
border-color:#BDBDBD;
padding:0px 2px 0px 2px;
margin:1px 0px 1px 0px;
cursor: pointer;
......@@ -217,10 +229,10 @@
display:inline-block;
border:solid 1px;
/*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;'+
border-color:#BDBDBD;
border-color:#BDBDBD;
padding:0px 2px 0px 2px;
margin:1px 0px 1px 0px;
cursor: pointer;
......@@ -266,7 +278,7 @@
}
.gradient {
background-color: #f0f0f8;
background-color: #f0f0f8;
background-image: -webkit-radial-gradient(#ffffff, #d8d8e0); background-image: -moz-radial-gradient(#ffffff, #d8d8e0);
/*background-color: #434343;*/
/*background-image: linear-gradient(#434343, #282828);*/
......@@ -376,23 +388,24 @@
float: right; width: 100%; height: 100%; background-image: url("../img2/chat.png");
}
/* GESTION DE LA BARRE DE GAUCHE */
.newleftbar {
/* TODO choix fond noir ou fond clair via variables less*/
background-color: inherit;
/* GESTION DES PAVES DE GAUCHE (conteneur encore vide)*/
#lefttopbox {
position:fixed;
z-index: 5 ; /* over the graph */
left:0 ;
width:18% ;
height: 100%;
overflow: auto;
width:20% ;
/* hauteur ~ 200px (juste assez pour emballer la selection sans couvrir le graphe en dessous) */
height: auto;
overflow: hidden;
text-align:center;
z-index: 100 ; /* over the graph ? */
padding-top: .3em;
padding-bottom: 0;
padding-right: 1em;
padding-left: 1em;
padding: .3em 1em 1em 1em;
}
#current-selection {
width: 100%; /* 100% within lefttopbox */
}
.leftarrow {
background-position: -12px 0;
......@@ -418,7 +431,7 @@
}
#tips ul{
/*list-style:none;*/
padding-left:10%;
padding-left:10%;
}
......
tinawebJS/Tinaweb.js
View file @ 0a09d245
......@@ -660,8 +660,8 @@ TinaWebJS = function ( sigmacanvas ) {
"right": (sidebar.width()+10)+"px"
}, { duration: 400, queue: false });
// $('#sigma-example').width(fullwidth-sidebar.width());
$('#sigma-example').animate({
// $('#sigma-contnr').width(fullwidth-sidebar.width());
$('#sigma-contnr').animate({
"width": fullwidth-sidebar.width()+"px"
}, { duration: 400, queue: false });
setTimeout(function() {
......@@ -680,8 +680,8 @@ TinaWebJS = function ( sigmacanvas ) {
"right": "0px"
}, { duration: 400, queue: false });
// $('#sigma-example').width(fullwidth);
$('#sigma-example').animate({
// $('#sigma-contnr').width(fullwidth);
$('#sigma-contnr').animate({
"width": fullwidth+"px"
},{ duration: 400, queue: false });
setTimeout(function() {
......@@ -779,7 +779,7 @@ TinaWebJS = function ( sigmacanvas ) {
})
// $('#sigma-example').dblclick(function(event) {// using SelectionEngine
// $('#sigma-contnr').dblclick(function(event) {// using SelectionEngine
// var area = {}
//
// // TODO replace
......@@ -810,7 +810,7 @@ TinaWebJS = function ( sigmacanvas ) {
// Simple Click
// external usage: SelectorEngine()
$("#sigma-example")
$("#sigma-contnr")
.mousemove(function(event){
if(!isUndef(partialGraph)) {
......
tinawebJS/main.js
View file @ 0a09d245
......@@ -196,7 +196,7 @@ if(RES["OK"]) {
}
// [ Initiating Sigma-Canvas ]
var twjs_ = new TinaWebJS('#sigma-example');
var twjs_ = new TinaWebJS('#sigma-contnr');
console.log( twjs_.AdjustSigmaCanvas() );
......@@ -253,9 +253,9 @@ if(RES["OK"]) {
// ==================================================================
TW.partialGraph = new sigma({
graph: TW.graphData,
container: 'sigma-example',
container: 'sigma-contnr',
renderer: {
container: document.getElementById('sigma-example'),
container: document.getElementById('sigma-contnr'),
type: sigma.renderers.canvas
},
settings: customSettings
......
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