[CSS] Adding a graphic support for the charts in corpus view.

static/js/gargantext/charts.css

+/* styles for menu.html template (navbar etc) */
+
+
+/* Side notes for calling out things
+-------------------------------------------------- */
+
+/* Base styles (regardless of theme) */
+.bs-callout {
+  margin: 20px 0;
+  padding: 15px 30px 15px 15px;
+  border-left: 10px solid #A1C2D8;
+}
+.bs-callout h4 {
+  margin-top: 0;
+}
+.bs-callout p:last-child {
+  margin-bottom: 0;
+}
+.bs-callout code,
+.bs-callout .highlight {
+  background-color: #fff;
+}
+
+/* Themes for different contexts */
+.bs-callout-danger {
+  background-color: #fcf2f2;
+  border-color: #dFb5b4;
+}
+.bs-callout-warning {
+  background-color: #fefbed;
+  border-color: #f1e7bc;
+}
+.bs-callout-info {
+  background-color: #f0f7fd;
+  border-color: #d0e3f0;
+}

templates/pages/corpora/journals.html

@@ -7,6 +7,7 @@
 <link rel="stylesheet" type="text/css" href="{% static "js/d3/dc.css"%}"/>
 <link rel="stylesheet" type="text/css" href="{% static "js/jquery/dynatable/jquery.dynatable.css"%}"/>
 <link rel="stylesheet" type="text/css" href="{% static "js/gargantext/tables.css"%}"/>
+<link rel="stylesheet" type="text/css" href="{% static "js/gargantext/charts.css"%}"/>
 
 <script type="text/javascript" src="{% static "js/d3/d3.js"%}"></script>
 <script type="text/javascript" src="{% static "js/d3/crossfilter.js"%}"></script>
@@ -17,6 +18,7 @@
 
 {% block content %}
 
+
 <div class="container">
     <div class="col-md-3 col-md-offset-2">
         <div id="monthly-move-chart">
@@ -33,16 +35,18 @@
             </center>
         </div>
 
-        <div class="row">
-            <div id="monthly-volume-chart"></div>
-        </div>
+        <div class="bs-callout">
+            <div class="row">
+                <div id="monthly-volume-chart"></div>
+            </div>
 
-        <div id="content_loader">
-          <br>
-          <center>
-            <!-- <img width="10%" src="{% static "img/ajax-loader.gif"%}"></img> -->
-          </center>
-          <br>
+            <div id="content_loader">
+              <br>
+              <center>
+                <!-- <img width="10%" src="{% static "img/ajax-loader.gif"%}"></img> -->
+              </center>
+              <br>
+            </div>
         </div>
     </div>
 </div>

templates/pages/corpora/terms.html

@@ -5,6 +5,7 @@
 <link rel="stylesheet" type="text/css" href="{% static "js/d3/dc.css"%}"/>
 <link rel="stylesheet" type="text/css" href="{% static "js/jquery/dynatable/jquery.dynatable.css"%}"/>
 <link rel="stylesheet" type="text/css" href="{% static "js/gargantext/tables.css"%}"/>
+<link rel="stylesheet" type="text/css" href="{% static "js/gargantext/charts.css"%}"/>
 
 <script type="text/javascript" src="{% static "js/d3/d3.js"%}"></script>
 <script type="text/javascript" src="{% static "js/d3/crossfilter.js"%}"></script>
@@ -16,26 +17,28 @@
 
 <div class="container">
     <div class="col-md-3 col-md-offset-2">
-            <div id="monthly-move-chart">
-                <center>
-                        Select a score/frequency range in the chart with blue bars to zoom in
-                <p align="center">
-                <!--<a class="btn btn-xs btn-default" role="button" href="/chart/corpus/{{ corpus.id }}/data.csv">Save</a>-->
-                <a class="btn btn-xs btn-default" href="javascript:volumeChart.filterAll();dc.redrawAll();">Reset</a></p>
-                <div class="clearfix"></div>
-                </center>
-            </div>
-
-        <div class="row">
-            <div id="monthly-volume-chart"></div>
+        <div id="monthly-move-chart">
+            <center>
+                    Select a score/frequency range in the chart with blue bars to zoom in
+            <p align="center">
+            <!--<a class="btn btn-xs btn-default" role="button" href="/chart/corpus/{{ corpus.id }}/data.csv">Save</a>-->
+            <a class="btn btn-xs btn-default" href="javascript:volumeChart.filterAll();dc.redrawAll();">Reset</a></p>
+            <div class="clearfix"></div>
+            </center>
         </div>
 
-        <div id="content_loader">
-          <br>
-          <center>
-            <img width="10%" src="{% static "img/ajax-loader.gif"%}"></img>
-          </center>
-          <br>
+        <div class="bs-callout">
+            <div class="row">
+                <div id="monthly-volume-chart"></div>
+            </div>
+
+            <div id="content_loader">
+                <br>
+                    <center>
+                        <img width="10%" src="{% static "img/ajax-loader.gif"%}"></img>
+                    </center>
+                <br>
+            </div>
         </div>
     </div>
 </div>

templates/pages/corpora/titles.html

@@ -6,6 +6,7 @@
 <link rel="stylesheet" type="text/css" href="{% static "js/jquery/dynatable/jquery.dynatable.css"%}"/>
 
 <link rel="stylesheet" type="text/css" href="{% static "js/gargantext/tables.css"%}"/>
+<link rel="stylesheet" type="text/css" href="{% static "js/gargantext/charts.css"%}"/>
 
 <script type="text/javascript" src="{% static "js/d3/d3.js"%}"></script>
 <script type="text/javascript" src="{% static "js/d3/crossfilter.js"%}"></script>
@@ -28,19 +29,19 @@
                 <div class="clearfix"></div>
             </center>
         </div>
-    </div>
-</div>
 
-<div class="container">
-    <div class="col-md-3 col-md-offset-2">
-        <div id="monthly-volume-chart"></div>
-
-        <div id="content_loader">
-              <br>
-              <center>
-                <img width="10%" src="{% static "img/ajax-loader.gif"%}"></img>
-              </center>
-              <br>
+        <div class="bs-callout">
+            <div class="row">
+                <div id="monthly-volume-chart"></div>
+            </div>
+
+            <div id="content_loader">
+                  <br>
+                  <center>
+                    <img width="10%" src="{% static "img/ajax-loader.gif"%}"></img>
+                  </center>
+                  <br>
+            </div>
         </div>
     </div>
 </div>