[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,6 +35,7 @@
             </center>
         </div>
 
+        <div class="bs-callout">
             <div class="row">
                 <div id="monthly-volume-chart"></div>
             </div>
@@ -45,6 +48,7 @@
               <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>
@@ -26,6 +27,7 @@
             </center>
         </div>
 
+        <div class="bs-callout">
             <div class="row">
                 <div id="monthly-volume-chart"></div>
             </div>
@@ -38,6 +40,7 @@
                 <br>
             </div>
         </div>
+    </div>
 </div>
 
 <div class="container">

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,12 +29,11 @@
                 <div class="clearfix"></div>
             </center>
         </div>
-    </div>
-</div>
 
-<div class="container">
-    <div class="col-md-3 col-md-offset-2">
+        <div class="bs-callout">
+            <div class="row">
                 <div id="monthly-volume-chart"></div>
+            </div>
 
             <div id="content_loader">
                   <br>
@@ -43,6 +43,7 @@
                   <br>
             </div>
         </div>
+    </div>
 </div>