diff options
author | Pim van den Berg | 2015-05-16 13:31:01 +0200 |
---|---|---|
committer | Pim van den Berg | 2015-06-21 18:06:01 +0200 |
commit | e133f9ef74673615bec35cacbd6630cb90ed124f (patch) | |
tree | 028be9907cc56f0e2a644e31398b855fdd9dbaf6 | |
parent | inc/html: remove continue statements to prevent from incomplete html (diff) | |
download | apt-panopticon_cgp-e133f9ef74673615bec35cacbd6630cb90ed124f.zip apt-panopticon_cgp-e133f9ef74673615bec35cacbd6630cb90ed124f.tar.gz apt-panopticon_cgp-e133f9ef74673615bec35cacbd6630cb90ed124f.tar.bz2 apt-panopticon_cgp-e133f9ef74673615bec35cacbd6630cb90ed124f.tar.xz |
replace table on overview page by divs
This works better in a responsive design.
-rw-r--r-- | inc/html.inc.php | 26 | ||||
-rw-r--r-- | layout/style.css | 27 |
2 files changed, 28 insertions, 25 deletions
diff --git a/inc/html.inc.php b/inc/html.inc.php index 58813ea..e52d90c 100644 --- a/inc/html.inc.php +++ b/inc/html.inc.php | |||
@@ -20,7 +20,7 @@ function html_start() { | |||
20 | <meta charset="utf-8"> | 20 | <meta charset="utf-8"> |
21 | <title>CGP{$path}</title> | 21 | <title>CGP{$path}</title> |
22 | <link rel="stylesheet" href="{$html_weburl}layout/style.css" type="text/css"> | 22 | <link rel="stylesheet" href="{$html_weburl}layout/style.css" type="text/css"> |
23 | <meta name="viewport" content="width=1050, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"> | 23 | <meta name="viewport" content="width=device-width"> |
24 | 24 | ||
25 | EOT; | 25 | EOT; |
26 | if (isset($CONFIG['page_refresh']) && is_numeric($CONFIG['page_refresh'])) { | 26 | if (isset($CONFIG['page_refresh']) && is_numeric($CONFIG['page_refresh'])) { |
@@ -221,7 +221,7 @@ function host_summary($cat, $hosts) { | |||
221 | 221 | ||
222 | printf('<fieldset id="%s">', htmlentities($cat)); | 222 | printf('<fieldset id="%s">', htmlentities($cat)); |
223 | printf('<legend>%s</legend>', htmlentities($cat)); | 223 | printf('<legend>%s</legend>', htmlentities($cat)); |
224 | echo "<table class=\"summary\">\n"; | 224 | echo "<div class=\"summary\">\n"; |
225 | 225 | ||
226 | $row_style = array(0 => "even", 1 => "odd"); | 226 | $row_style = array(0 => "even", 1 => "odd"); |
227 | $host_counter = 0; | 227 | $host_counter = 0; |
@@ -229,8 +229,8 @@ function host_summary($cat, $hosts) { | |||
229 | foreach($hosts as $host) { | 229 | foreach($hosts as $host) { |
230 | $host_counter++; | 230 | $host_counter++; |
231 | 231 | ||
232 | printf('<tr class="%s">', $row_style[$host_counter % 2]); | 232 | printf('<div class="row %s">', $row_style[$host_counter % 2]); |
233 | printf('<th><a href="%shost.php?h=%s">%s</a></th>', | 233 | printf('<label><a href="%shost.php?h=%s">%s</a></label>', |
234 | htmlentities($CONFIG['weburl']), | 234 | htmlentities($CONFIG['weburl']), |
235 | urlencode($host), | 235 | urlencode($host), |
236 | htmlentities($host)); | 236 | htmlentities($host)); |
@@ -253,11 +253,11 @@ function host_summary($cat, $hosts) { | |||
253 | foreach (array('ds[shortterm].last_ds', 'ds[midterm].last_ds', 'ds[longterm].last_ds') as $info) { | 253 | foreach (array('ds[shortterm].last_ds', 'ds[midterm].last_ds', 'ds[longterm].last_ds') as $info) { |
254 | $class = ''; | 254 | $class = ''; |
255 | if ($cores > 0 && $rrd_info[$info] > $cores * 2) | 255 | if ($cores > 0 && $rrd_info[$info] > $cores * 2) |
256 | $class = ' class="crit"'; | 256 | $class = ' crit'; |
257 | elseif ($cores > 0 && $rrd_info[$info] > $cores) | 257 | elseif ($cores > 0 && $rrd_info[$info] > $cores) |
258 | $class = ' class="warn"'; | 258 | $class = ' warn'; |
259 | 259 | ||
260 | printf('<td%s>%.2f</td>', $class, $rrd_info[$info]); | 260 | printf('<div class="field%s">%.2f</div>', $class, $rrd_info[$info]); |
261 | } | 261 | } |
262 | } | 262 | } |
263 | } | 263 | } |
@@ -276,11 +276,11 @@ function host_summary($cat, $hosts) { | |||
276 | 276 | ||
277 | $class = ''; | 277 | $class = ''; |
278 | if ($percent_mem > 90) | 278 | if ($percent_mem > 90) |
279 | $class = ' class="crit"'; | 279 | $class = ' crit'; |
280 | elseif ($percent_mem > 70) | 280 | elseif ($percent_mem > 70) |
281 | $class = ' class="warn"'; | 281 | $class = ' warn'; |
282 | 282 | ||
283 | printf('<td%s>%d%%</td>', $class, $percent_mem); | 283 | printf('<div class="field%s">%d%%</div>', $class, $percent_mem); |
284 | } | 284 | } |
285 | } | 285 | } |
286 | } | 286 | } |
@@ -296,15 +296,15 @@ function host_summary($cat, $hosts) { | |||
296 | elseif ($time > 60) | 296 | elseif ($time > 60) |
297 | $class .= ' warn'; | 297 | $class .= ' warn'; |
298 | 298 | ||
299 | printf('<td class="%s"><time class="timeago" datetime="%s">%d seconds ago</time></td>', | 299 | printf('<div class="field %s"><time class="timeago" datetime="%s">%d seconds ago</time></div>', |
300 | $class, date('c', $rrd_info['last_update']), $time); | 300 | $class, date('c', $rrd_info['last_update']), $time); |
301 | } | 301 | } |
302 | } | 302 | } |
303 | 303 | ||
304 | print "</tr>\n"; | 304 | print "</div>\n"; |
305 | } | 305 | } |
306 | 306 | ||
307 | echo "</table>\n"; | 307 | echo "</div>\n"; |
308 | echo "</fieldset>\n"; | 308 | echo "</fieldset>\n"; |
309 | } | 309 | } |
310 | 310 | ||
diff --git a/layout/style.css b/layout/style.css index 9bf4c7e..2df30cf 100644 --- a/layout/style.css +++ b/layout/style.css | |||
@@ -49,28 +49,31 @@ a:hover { | |||
49 | text-decoration: underline; | 49 | text-decoration: underline; |
50 | } | 50 | } |
51 | 51 | ||
52 | table.summary th { | 52 | .row { |
53 | width: 300px; | 53 | clear: left; |
54 | font-weight: normal; | 54 | padding: 4px; |
55 | text-align: left; | ||
56 | } | 55 | } |
57 | 56 | ||
58 | table.summary tr.even { | 57 | .row.even { |
59 | /* background: #eeeeee; */ | 58 | /* background: #eeeeee; */ |
60 | } | 59 | } |
61 | 60 | ||
62 | table.summary tr.odd { | 61 | .row.odd { |
63 | /* background: #cccccc; */ | 62 | /* background: #cccccc; */ |
64 | } | 63 | } |
65 | 64 | ||
66 | table.summary td { | 65 | .row label { |
67 | width: 50px; | 66 | float: left; |
68 | text-align: right; | 67 | width: 20em; |
68 | } | ||
69 | |||
70 | .row .field { | ||
71 | float: left; | ||
72 | width: 3.4em; | ||
69 | } | 73 | } |
70 | 74 | ||
71 | table.summary td.wide { | 75 | .row .field.wide { |
72 | width: 125px; | 76 | width: 8em; |
73 | text-align: right; | ||
74 | } | 77 | } |
75 | 78 | ||
76 | img { | 79 | img { |