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

explorerjs.html

@@ -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

 /* ------------- 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

@@ -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

@@ -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

@@ -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