aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorPim van den Berg2015-05-16 16:37:53 +0200
committerPim van den Berg2015-06-21 18:06:05 +0200
commit727ed753a9c540c71f00bafa6e43ad4cb42321f2 (patch)
tree2c0b44a62ec658de5ec4b891d72492024189fcf8
parentresponsive: make the host page look nice on all media (diff)
downloadapt-panopticon_cgp-727ed753a9c540c71f00bafa6e43ad4cb42321f2.zip
apt-panopticon_cgp-727ed753a9c540c71f00bafa6e43ad4cb42321f2.tar.gz
apt-panopticon_cgp-727ed753a9c540c71f00bafa6e43ad4cb42321f2.tar.bz2
apt-panopticon_cgp-727ed753a9c540c71f00bafa6e43ad4cb42321f2.tar.xz
responsive: introduce a hamburger navicon to toggle the menu on smaller devices
-rw-r--r--detail.php6
-rw-r--r--host.php5
-rw-r--r--inc/html.inc.php33
-rw-r--r--index.php2
-rw-r--r--layout/style-c.css27
-rw-r--r--layout/style.css36
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();
30printf('<fieldset id="%s">', htmlentities($host)); 30printf('<fieldset id="%s">', htmlentities($host));
31printf('<legend>%s</legend>', htmlentities($host)); 31printf('<legend>%s</legend>', htmlentities($host));
32 32
33 echo <<<EOT
34<input type="checkbox" id="navicon" class="navicon" />
35<label for="navicon"></label>
36
37EOT;
38
33if (!$plugins = collectd_plugins($host)) { 39if (!$plugins = collectd_plugins($host)) {
34 echo "Unknown host\n"; 40 echo "Unknown host\n";
35 return false; 41 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();
14printf("<fieldset id=\"%s\">", htmlentities($host)); 14printf("<fieldset id=\"%s\">", htmlentities($host));
15printf("<legend>%s</legend>", htmlentities($host)); 15printf("<legend>%s</legend>", htmlentities($host));
16 16
17 echo <<<EOT
18<input type="checkbox" id="navicon" class="navicon" />
19<label for="navicon"></label>
20
21EOT;
17 22
18if (!strlen($host) || !$plugins = collectd_plugins($host)) { 23if (!strlen($host) || !$plugins = collectd_plugins($host)) {
19 echo "Unknown host\n"; 24 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
94EOT; 94EOT;
95} 95}
96 96
97function html_end() { 97function html_end($footer = false) {
98 global $CONFIG; 98 global $CONFIG;
99 99
100 $git = '/usr/bin/git'; 100 if ($footer) {
101 $changelog = $CONFIG['webdir'].'/doc/CHANGELOG'; 101 $git = '/usr/bin/git';
102 102 $changelog = $CONFIG['webdir'].'/doc/CHANGELOG';
103 $version = 'v?';
104 if (file_exists($git) && is_dir($CONFIG['webdir'].'/.git')) {
105 chdir($CONFIG['webdir']);
106 $version = exec($git.' describe --tags');
107 } elseif (file_exists($changelog)) {
108 $changelog = file($changelog);
109 $version = explode(' ', $changelog[0]);
110 $version = 'v'.$version[0];
111 }
112 103
113 $html_weburl = htmlentities($CONFIG['weburl']); 104 $version = 'v?';
105 if (file_exists($git) && is_dir($CONFIG['webdir'].'/.git')) {
106 chdir($CONFIG['webdir']);
107 $version = exec($git.' describe --tags');
108 } elseif (file_exists($changelog)) {
109 $changelog = file($changelog);
110 $version = explode(' ', $changelog[0]);
111 $version = 'v'.$version[0];
112 }
114 113
115 echo <<<EOT 114 $html_weburl = htmlentities($CONFIG['weburl']);
115
116 echo <<<EOT
116</div> 117</div>
117<div id="footer"> 118<div id="footer">
118<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> 119<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>
119</div> 120</div>
120 121
121EOT; 122EOT;
122 123 }
123 if ($CONFIG['graph_type'] == 'canvas') { 124 if ($CONFIG['graph_type'] == 'canvas') {
124 if ($CONFIG['rrd_fetch_method'] == 'async') { 125 if ($CONFIG['rrd_fetch_method'] == 'async') {
125 $js_async = 'true'; 126 $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() {
37EOT; 37EOT;
38} 38}
39 39
40html_end(); 40html_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 @@
1label[for="navicon"] {
2 display: block;
3}
4
5#header h1 {
6 padding-left: 30px;
7}
8
1#content { 9#content {
2 padding-left: 5px; 10 padding-left: 5px;
3} 11}
@@ -12,5 +20,24 @@
12} 20}
13 21
14.plugins { 22.plugins {
23 position: absolute;
24 z-index: 0;
15 display: none; 25 display: none;
16} 26}
27
28.navicon:checked ~ .plugins {
29 display: block;
30}
31
32.graphs {
33 position: relative;
34 z-index: 1;
35 background: #fff;
36 min-height: 100%;
37 min-width: 100%;
38 bottom: 100%;
39}
40
41.navicon:checked ~ .graphs {
42 left: 125px;
43}
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 {
3 margin: 0px; 3 margin: 0px;
4} 4}
5 5
6label[for="navicon"] {
7 display: none;
8
9 position: absolute;
10 left: 5px; top: 5px;
11 z-index: 2;
12
13 height: 25px;
14 width: 25px;
15 cursor: pointer;
16 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>");
17 background-size: contain;
18}
19
20.navicon {
21 position: absolute;
22 clip: rect(0, 0, 0, 0);
23}
24
6#header { 25#header {
7 background: #4d79b5; 26 background: #4d79b5;
8 padding-left: 10px; 27 padding-left: 10px;
28 color: #fff;
29}
30
31#header h1 {
32 position: relative;
33 display: inline-block;
34 padding: 8px;
35 margin: 0;
36 font-size: 1em;
9} 37}
10 38
11#header a{ 39#header a{
12 display: block; 40 display: block;
13 padding: 8px;
14 color: #fff; 41 color: #fff;
15 text-decoration: none; 42 text-decoration: none;
16} 43}
@@ -28,11 +55,7 @@ body {
28#footer { 55#footer {
29 clear: both; 56 clear: both;
30 padding: 0px 20px 16px; 57 padding: 0px 20px 16px;
31} 58 background: #fff;
32
33h1 {
34 margin: 0;
35 font-size: 1em;
36} 59}
37 60
38h2 { 61h2 {
@@ -126,6 +149,7 @@ hr {
126.plugins { 149.plugins {
127 float: left; 150 float: left;
128 margin-right: 25px; 151 margin-right: 25px;
152 width: 100px;
129} 153}
130 154
131.plugins ul > li:first-of-type { 155.plugins ul > li:first-of-type {