Add action bar with link to raw data to all charts

This adds an action bar to every chart with a button to download the raw
data files in TSV format if existent. The action bar is designed to hold
more actions in the future, most notably, a switch for the level of
detail in the charts.

Along with the action bar, this commit introduces CSS for buttons.

Note that the action bar is to be considered as a “version 1” design to
bring the functionality first, and the layout will probably change in a
future release.

docs/assets/css/stylesheet.css

@@ -636,3 +636,50 @@ a
 {
 	display: none;
 }
+
+.action-bar
+{
+	margin-top: 4rem;
+	margin-bottom: 1rem;
+}
+
+.action-bar h3
+{
+	margin: 0;
+}
+
+button,
+a.button
+{
+	display: inline-block;
+	padding: 0.35rem 0.8rem;
+	color: #606c71;
+	background: linear-gradient(-180deg, #fafafa, #f5f5f5);
+	outline: 0;
+	border: 1px solid #c4c4c4;
+	border-radius: 0.25rem;
+}
+
+button:hover,
+a.button:hover
+{
+	color: #606c71;
+	background: linear-gradient(-180deg, #fcfcfc, #f8f8f8);
+	border-color: #cacaca;
+}
+
+button:focus,
+a.button:focus
+{
+	border-color: #00c4c8;
+	box-shadow: #7fdee1 0px 0px 0px 2.4px;
+}
+
+button:active,
+a.button:active
+{
+	color: #606c71;
+	background-color: #7fdee1;
+	border-color: #cacaca;
+	box-shadow: inset 0 0.15em 0.3em #d8d8d8;
+}

docs/assets/js/charts.js

@@ -809,8 +809,20 @@ $(window).bind('load', function()
             const tables = $(chartPlaceholder).find('table');
             const infoBoxes = $(chartPlaceholder).find('.info-box');
 
-            // Draw the title before the chart container
-            titles.insertBefore(chartPlaceholder);
+            // Put a bar with the title and additional actions before the chart container
+            if ($(canvases.first()).attr('data-url'))
+            {
+                titles.insertBefore(chartPlaceholder).wrapAll(
+                    '<div class="row action-bar"><div class="col-main"></div></div>');
+
+                // Add an action box as the first info box
+                const downloadLink = '<a class="button" href="' + $(canvases.first()).attr('data-url')
+                                   + '" target="_blank">Raw data</a>';
+                titles.parent().parent().append(
+                    '<div class="col-aside"><div class="info-box"><p>' + downloadLink + '</p></div></div>');
+            }
+            else
+                titles.insertBefore(chartPlaceholder).wrap('<div class="row"></div>');
 
             // Turn the placeholder into a proper layout row
             $(chartPlaceholder).removeClass('chart-placeholder');