From 727ed753a9c540c71f00bafa6e43ad4cb42321f2 Mon Sep 17 00:00:00 2001
From: Pim van den Berg
Date: Sat, 16 May 2015 16:37:53 +0200
Subject: responsive: introduce a hamburger navicon to toggle the menu on
 smaller devices

---
 detail.php         |  6 ++++++
 host.php           |  5 +++++
 inc/html.inc.php   | 33 +++++++++++++++++----------------
 index.php          |  2 +-
 layout/style-c.css | 27 +++++++++++++++++++++++++++
 layout/style.css   | 36 ++++++++++++++++++++++++++++++------
 6 files changed, 86 insertions(+), 23 deletions(-)

diff --git a/detail.php b/detail.php
index 8978350..3cd7155 100644
--- a/detail.php
+++ b/detail.php
@@ -30,6 +30,12 @@ html_start();
 printf('<fieldset id="%s">', htmlentities($host));
 printf('<legend>%s</legend>', htmlentities($host));
 
+		echo <<<EOT
+<input type="checkbox" id="navicon" class="navicon" />
+<label for="navicon"></label>
+
+EOT;
+
 if (!$plugins = collectd_plugins($host)) {
 	echo "Unknown host\n";
 	return false;
diff --git a/host.php b/host.php
index f411b78..91e37f0 100644
--- a/host.php
+++ b/host.php
@@ -14,6 +14,11 @@ html_start();
 printf("<fieldset id=\"%s\">", htmlentities($host));
 printf("<legend>%s</legend>", htmlentities($host));
 
+		echo <<<EOT
+<input type="checkbox" id="navicon" class="navicon" />
+<label for="navicon"></label>
+
+EOT;
 
 if (!strlen($host) || !$plugins = collectd_plugins($host)) {
 	echo "Unknown host\n";
diff --git a/inc/html.inc.php b/inc/html.inc.php
index 7fedeb6..7312601 100644
--- a/inc/html.inc.php
+++ b/inc/html.inc.php
@@ -94,32 +94,33 @@ echo <<<EOT
 EOT;
 }
 
-function html_end() {
+function html_end($footer = false) {
 	global $CONFIG;
 
-	$git = '/usr/bin/git';
-	$changelog = $CONFIG['webdir'].'/doc/CHANGELOG';
-
-	$version = 'v?';
-	if (file_exists($git) && is_dir($CONFIG['webdir'].'/.git')) {
-		chdir($CONFIG['webdir']);
-		$version = exec($git.' describe --tags');
-	} elseif (file_exists($changelog)) {
-		$changelog = file($changelog);
-		$version = explode(' ', $changelog[0]);
-		$version = 'v'.$version[0];
-	}
+	if ($footer) {
+		$git = '/usr/bin/git';
+		$changelog = $CONFIG['webdir'].'/doc/CHANGELOG';
 
-	$html_weburl = htmlentities($CONFIG['weburl']);
+		$version = 'v?';
+		if (file_exists($git) && is_dir($CONFIG['webdir'].'/.git')) {
+			chdir($CONFIG['webdir']);
+			$version = exec($git.' describe --tags');
+		} elseif (file_exists($changelog)) {
+			$changelog = file($changelog);
+			$version = explode(' ', $changelog[0]);
+			$version = 'v'.$version[0];
+		}
 
-	echo <<<EOT
+		$html_weburl = htmlentities($CONFIG['weburl']);
+
+		echo <<<EOT
 </div>
 <div id="footer">
 <hr><span class="small"><a href="http://pommi.nethuis.nl/category/cgp/" rel="external">Collectd Graph Panel</a> ({$version}) is distributed under the <a href="{$html_weburl}doc/LICENSE" rel="license">GNU General Public License (GPLv3)</a></span>
 </div>
 
 EOT;
-
+	}
 	if ($CONFIG['graph_type'] == 'canvas') {
 		if ($CONFIG['rrd_fetch_method'] == 'async') {
 			$js_async = 'true';
diff --git a/index.php b/index.php
index eb897ae..94ecf80 100644
--- a/index.php
+++ b/index.php
@@ -37,4 +37,4 @@ jQuery(document).ready(function() {
 EOT;
 }
 
-html_end();
+html_end(true);
diff --git a/layout/style-c.css b/layout/style-c.css
index 83c64bc..702cc04 100644
--- a/layout/style-c.css
+++ b/layout/style-c.css
@@ -1,3 +1,11 @@
+label[for="navicon"] {
+	display: block;
+}
+
+#header h1 {
+	padding-left: 30px;
+}
+
 #content {
 	padding-left: 5px;
 }
@@ -12,5 +20,24 @@
 }
 
 .plugins {
+	position: absolute;
+	z-index: 0;
 	display: none;
 }
+
+.navicon:checked ~ .plugins {
+	display: block;
+}
+
+.graphs {
+	position: relative;
+	z-index: 1;
+	background: #fff;
+	min-height: 100%;
+	min-width: 100%;
+	bottom: 100%;
+}
+
+.navicon:checked ~ .graphs {
+	left: 125px;
+}
diff --git a/layout/style.css b/layout/style.css
index 156e8c5..768c0c6 100644
--- a/layout/style.css
+++ b/layout/style.css
@@ -3,14 +3,41 @@ body {
 	margin: 0px;
 }
 
+label[for="navicon"] {
+	display: none;
+
+	position: absolute;
+	left: 5px; top: 5px;
+	z-index: 2;
+
+	height: 25px;
+	width: 25px;
+	cursor: pointer;
+	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='25px' height='25px' viewBox='0 0 25 25' enable-background='new 0 0 25 25' xml:space='preserve'><rect width='25' height='5' style='fill:white'/><rect y='20' width='25' height='5' style='fill:white'/><rect y='10' width='25' height='5' style='fill:white'/></svg>");
+	background-size: contain;
+}
+
+.navicon {
+	position: absolute;
+	clip: rect(0, 0, 0, 0);
+}
+
 #header {
 	background: #4d79b5;
 	padding-left: 10px;
+	color: #fff;
+}
+
+#header h1 {
+	position: relative;
+	display: inline-block;
+	padding: 8px;
+	margin: 0;
+	font-size: 1em;
 }
 
 #header a{
 	display: block;
-	padding: 8px;
 	color: #fff;
 	text-decoration: none;
 }
@@ -28,11 +55,7 @@ body {
 #footer {
 	clear: both;
 	padding: 0px 20px 16px;
-}
-
-h1 {
-	margin: 0;
-	font-size: 1em;
+	background: #fff;
 }
 
 h2 {
@@ -126,6 +149,7 @@ hr {
 .plugins {
 	float: left;
 	margin-right: 25px;
+	width: 100px;
 }
 
 .plugins ul > li:first-of-type {
-- 
cgit v1.1