Fancy controls

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;
 }

assets/html/index.html

@@ -35,12 +35,29 @@
 		</div>
 
 		<div id="big-graph"></div>
-		<div id="big-graph-controls">
+
+		<div id="big-graph-controls" style="display: none;">
+
+			<span style="text-align: center; display: block;">
+
+				<a onclick="toggleControlsDrawer();">Click to toggle graph controls</a>
+
+			</span>
+			
+			<div id="big-graph-controls-drawer" style="display: none;">
 
 				<div id="big-graph-checkboxes"></div>
 
-			<button onclick="setAllGraphVisibility(true);">Show All</button>
+				<br />
-			<button onclick="setAllGraphVisibility(false);">Hide All</button>
+
+				<span style="text-align: center; display: block; margin-bottom: 15px;">
+
+					<span onclick="setAllGraphVisibility(true);" class="button">Show All</span>
+					<span onclick="setAllGraphVisibility(false);" class="button">Hide All</span>
+
+				</span>
+
+			</div>
 
 		</div>
 

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 + '</tr></table>');
+        $('#big-graph-controls').css('display', 'block');
     });
 
     socket.on('updateHistoryGraph', function(rawData) {