diff --git a/assets/css/main.css b/assets/css/main.css
index 9f0606b..6bd2f3c 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -192,7 +192,36 @@ h3 {
width: 100%;
}
+#big-graph-controls {
+ margin: 10px auto;
+}
+
+#big-graph-controls a {
+ text-decoration: none;
+ color: inherit;
+ text-transform: uppercase;
+ border-bottom: 1px dashed #FFF;
+ font-size: 16px;
+}
+
+#big-graph-controls a:hover {
+ border-bottom: 1px dashed transparent;
+ cursor: pointer;
+}
+
/* Basic elements */
.button {
-
+ background: #3498db;
+ border-radius: 2px;
+ text-shadow: 0 0 0 #000;
+ width: 85px;
+ font-size: 16px;
+ padding: 5px 10px;
+ margin: 0 auto;
+}
+
+.button:hover {
+ background: #ecf0f1;
+ color: #3498db;
+ cursor: pointer;
}
\ No newline at end of file
diff --git a/assets/html/index.html b/assets/html/index.html
index 7247bae..423b280 100644
--- a/assets/html/index.html
+++ b/assets/html/index.html
@@ -35,12 +35,29 @@
-
-
-
-
-
+
diff --git a/assets/js/site.js b/assets/js/site.js
index a18317a..7a923f5 100644
--- a/assets/js/site.js
+++ b/assets/js/site.js
@@ -215,6 +215,12 @@ function setAllGraphVisibility(visible) {
historyPlot.draw();
}
+function toggleControlsDrawer() {
+ var div = $('#big-graph-controls-drawer');
+
+ div.css('display', div.css('display') !== 'none' ? 'none' : 'block');
+}
+
$(document).ready(function() {
var socket = io.connect({
reconnect: true,
@@ -246,8 +252,10 @@ $(document).ready(function() {
$('#server-container').html('');
$('#quick-jump-container').html('');
+
$('#big-graph').html('');
$('#big-graph-checkboxes').html('');
+ $('#big-graph-controls').css('display', 'none');
});
socket.on('historyGraph', function(rawData) {
@@ -277,6 +285,7 @@ $(document).ready(function() {
}
$('#big-graph-checkboxes').append(html + '');
+ $('#big-graph-controls').css('display', 'block');
});
socket.on('updateHistoryGraph', function(rawData) {