histogram + crowdsourcing in the leftside bar (no more modal)

crowdsourcingTerms/crowdTerms.css

 
-
+/* -------- todo décaler dans custom.css ou un module charts -------- */
 /* left bar contains modules */
 .newleftbar {
     /* TODO choix fond noir ou fond clair via variables less*/
     background-color: inherit;
     position:fixed;
     left:0 ;
-    width:20% ;
+    width:18% ;
     height: 100%;
     overflow: auto;
-}
-
-
-#crowdsource_legend{
-  position:relative;
     text-align:center;
-  margin: 30 10 10 10;
+    z-index: 100 ;   /* over the graph ? */
+    padding-top: .3em;
+    padding-bottom: 0;
+    padding-right: 1em;
+    padding-left: 1em;
 }
 
-
+/* ------------- todo décaler dans un module charts ----------------- */
+#mainform{
+/*
+  max-width: 45em;
+*/
+  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 */
@@ -30,3 +38,39 @@
     border-radius: 0px;
     border: 1px solid #454545;
 }
+
+#search_histogram_wrapper{
+  margin: 0 ;
+  /* overwrite bootstrap's 
+   * grid element padding*/
+  padding-right: 1em;
+  padding-left: 0;
+}
+
+/* graph div */
+#search_histogram{
+  min-height: 15em ;
+  font-size: 85%;
+}
+
+/* dygraph internal canvas */
+#search_histogram canvas{
+  margin: 0 ;
+  padding: 0;
+}
+
+/* ------------- crowdsourcing proprement dit ----------------------- */
+
+
+#crowdsourcing_intro{
+}
+
+#savesuggestion.btn {
+}
+
+
+#savesuggestion.btn[disabled], #savesuggestion.btn.disabled {
+  background-color: #B0B0B0 ;
+  background-image: none ;
+  border: 1px solid #909090 ;
+}

crowdsourcingTerms/dygraph/gallery.css

+/*
 body {
   font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
   font-size: 90%;
 }
+*/
 
 aside {
   font-size: 90%;
@@ -68,9 +70,11 @@ aside {
   color: blue;
 }
 
+/*
 a {
   text-decoration: none;
 }
+*/
 
 /* CSS for drawing tool */
 #workarea #drawing #tool_zoom {
@@ -134,23 +138,24 @@ a {
 #workarea #styled-chart-labels #div_g .dygraph-label {
   /* This applies to the title, x-axis label and y-axis label */
   font-family: Georgia, Verdana, serif;
+  /* can't set font-size because of inline values?? */
 }
 
 #workarea #styled-chart-labels #div_g .dygraph-title {
   /* This rule only applies to the chart title */
-  font-size: 36px;
-  text-shadow: gray 2px 2px 2px;  /* color, delta-x, delta-y, blur radius */
+  font-size: 12px;
+  text-shadow: gray 1px 1px 1px;  /* color, delta-x, delta-y, blur radius */
 }
 
 #workarea #styled-chart-labels #div_g .dygraph-ylabel {
   /* This rule only applies to the y-axis label */
-  font-size: 18px;
-  text-shadow: gray -2px 2px 2px;  /* (offsets are in a rotated frame) */
+  font-size: 6px;
+  text-shadow: gray -1px 1px 1px;  /* (offsets are in a rotated frame) */
 }
 
 #workarea #styled-chart-labels .chart {
   border: 1px dashed black;
-  margin: 5px  5px 5px 50px;
+  margin: 2px  2px 2px 2px;
   padding: 2px;
 }
 

explorerjs.html

@@ -185,6 +185,68 @@
 
     <div id="wrapper">
 
+      <!-- Sidebar left, new css -->
+      <div id="leftcolumn" class="newleftbar">
+        
+          <div class="row">
+
+            <div id="crowdsourcing_intro" class="col-md-12 crowdsourcingTerms">
+              <!-- <button type="button" class="close">×</button> -->
+              <h5>Search or suggest topics</h5>
+              
+            </div>
+
+          </div><!-- /row -->
+
+          <div class="row">
+            <div id="mainform" class="form-horizontal col-md-12">
+
+              <div id="search_input_group" class="input-group input-group-sm">
+                
+                <span class="input-group-btn crowdsourcingTerms">
+                  <button id="savesuggestion"
+                          disabled
+                          title="Save this topic as a new suggestion"
+                          class="btn btn-default" 
+                          type="button"><i id="saveicon" class="glyphicon glyphicon-save"></i></button>
+                </span>
+                
+                
+                <span class="input-group-btn">
+                  <button id="search_proposed_terms" 
+                          title="Search the topic in the map"
+                          class="btn btn-info" 
+                          type="button"><i class="glyphicon glyphicon-search"></i></button>
+                </span>
+
+                <!-- ideally should be appended by jquery for autocomplete -->
+                <input id="proposed_terms" type="text" class="form-control" placeholder="Recherche" />
+
+              </div><!-- /search_input_group -->
+
+            </div><!-- /form -->
+          </div><!-- /row -->
+
+          <div class="row" class="crowdsourcingTerms">
+            <!-- say thanks for the suggestion -->
+            <div id="crowdsourcing_answer" class="col-md-12"></div>
+          </div><!-- /row -->
+
+          <div class="row" class="TODOhistogramModule">
+            <!-- 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">
 	        
 
@@ -249,19 +311,6 @@
 	        </ul>
 	    </div>
 
-      <!-- Sidebar left, new css -->
-      <div id="leftcolumn" class="newleftbar">
-          <div id="crowdsource_legend" style="text-align:center; margin:10px;" class="crowdsourcingTerms">
-            <br><h2>Contribute</h2>Add topics here
-            <center>
-              <button style="position: relative; bottom: 0;" id="openthemodal" class="btn btn-xl btn-danger ">Suggest new terms !</button>
-            </center>
-          </div>
-          
-          
-          <div id="legend_for_clusters"></div>
-      </div>
-
 	    <!-- Sidebar right, old css -->
 	    <div id="rightcolumn">      
           <div style="text-align: center;">
@@ -373,42 +422,6 @@
     </div>
 
 
-    <div id="crowdsourcing_modal" class="modal fade crowdsourcingTerms" style="color:black;">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-            <h3 class="modal-title">Contribute to the map by suggesting new topics!</h3>
-          </div>
-
-          <div class="modal-body form-horizontal">
-            <div class="row">
-              
-              <div id="custom-search-input">
-                <div class="input-group col-md-12">
-                  
-                  <!-- ideally should be appended by jquery for autocomplete -->
-                  <input id="proposed_terms" type="text" class="form-control input-lg" placeholder="Recherche" />
-                  
-                  <span class="input-group-btn">
-                    <button id="search_proposed_terms" class="btn btn-info btn-lg" type="button"><i class="glyphicon glyphicon-search"></i></button>
-                  </span>
-                </div>
-              </div>
-              
-              <br>
-              <center>
-                <div id="crowdsourcing_answer"></div>
-                <div id="crowdsourcing_histogram"></div>
-              </center>
-
-            </div>
-          </div>
-
-        </div><!-- /modal-content -->
-      </div><!-- /modal-dialog -->
-    </div><!-- /#crowdsourcing_modal -->
-
     <div id="geomapmodal" class="modal fade">
 
         <!-- <div class="modal-content"> -->

libs/css2/custom.css

@@ -44,7 +44,7 @@
 }
 
 .my-legend {
-    position:absolute;
+    position:fixed;
     bottom:5px;
     left:5px;