Squashed commit of the following:

commit 3b3dd6ea92799a95ecaa7c90ede830a62d53ee05
Author: Daniel Friesel <derf@finalrewind.org>
Date:   Sun Sep 6 14:21:27 2015 +0200

    margins

commit ae911d4fba68adce63a16bda82f9b06a51a4aa81
Merge: 0625d89 8fca7e3
Author: I <marudor@marudor.de>
Date:   Sat Sep 5 14:49:12 2015 +0200

    Merge branch 'master' of https://github.com/derf/iris-delay-stats

    # Conflicts:
    #	templates/intro.html.ep

commit 0625d894bb5294f3d47cca759010ee969db7a2d1
Author: marudor <marudor@marudor.de>
Date:   Sat Sep 5 13:51:49 2015 +0200

    fancy forms

10 files changed, 237 insertions, 228 deletions

diff --git a/public/css/default.css b/public/css/default.css
index 8d76d39..92d5f51 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -1,5 +1,6 @@
 body {
-	font-family: sans-serif;
+	padding-left: 0.4em;
+	padding-right: 0.4em;
 }
 
 div.intro,
@@ -22,63 +23,6 @@ div.about {
 	color: #666666;
 }
 
-input, select {
-	border: 1px solid black;
-}
-
-input.dimension {
-	width: 4em;
-}
-
-input.delay {
-	width: 3em;
-}
-
-input.train_no {
-	width: 4em;
-}
-
-div.field {
-	width: 100%;
-	clear: both;
-}
-
-div.field div.desc {
-	float: left;
-	width: 12em;
-	text-align: right;
-	padding-right: 0.5em;
-}
-
-div.individuallist table {
-	margin-top: 1em;
-	border-collapse: collapse;
-}
-
-div.individuallist th,
-div.individuallist td {
-	border: 1px solid #bbbbbb;
-	margin: 0;
-	padding: 0.2em;
-}
-
-div.individuallist .cancelled {
-	text-decoration: line-through;
-	text-decoration-color: red;
-}
-
-div.individuallist span.undelay {
-	color: #008800;
-}
-
-div.individuallist span.delay0 {
-	color: #888888;
-}
-
-div.individuallist span.delay {
-	color: #880000;
-}
-
 svg {
   font: 10px sans-serif;
 }
diff --git a/templates/barform.html.ep b/templates/barform.html.ep
deleted file mode 100644
index 50ae5fc..0000000
--- a/templates/barform.html.ep
+++ /dev/null
@@ -1,32 +0,0 @@
-<div>
-% if (not defined param('want_msg')) {
-%   param(want_msg => 0);
-% }
-%= form_for bar => begin
-%= radio_button 'want_msg' => 0
-Allgemeiner Bargraph:
-% my %yargs = %{$self->barplot_args->{y}};
-% my @yarg_keys = sort keys %yargs;
-%= select_field ysource => [map {[$yargs{$_}->{desc}, $_]} @yarg_keys]
-<br/>
-%= radio_button 'want_msg' => 1
-Meldungs-Bargraph:
-% %yargs = %{$self->barplot_args->{msg}};
-% @yarg_keys = sort keys %yargs;
-%= select_field msgnum => [map {[$yargs{$_}->{desc}, $_]} @yarg_keys]
-<br/>
-aufgeteilt nach
-% my %xargs = %{$self->barplot_args->{x}};
-% my @xarg_keys = sort keys %xargs;
-%= select_field xsource => [map {[$xargs{$_}->{desc}, $_]} @xarg_keys]
-mit
-Abmessungen
-%= text_field 'width' => 960, class => 'dimension'
-x
-%= text_field 'height' => 500, class => 'dimension'
-Pixel.
-%= submit_button 'Go'
-<br/>
-Optionale Einschränkungen:
-%= include 'filterform';
-% end
diff --git a/templates/filterform.html.ep b/templates/filterform.html.ep
index 614b36a..44d0ed0 100644
--- a/templates/filterform.html.ep
+++ b/templates/filterform.html.ep
@@ -1,72 +1,55 @@
 % my $filter_opts = $self->barplot_filters;
-<div class="field">
-  <div class="desc">
-    Linie:
-  </div>
-  <div>
+<div class="row">
+  <div class="input-field col s4">
+    <label class="active">Linie</label>
     %= select_field filter_line => $filter_opts->{lines}
   </div>
-</div>
-<div class="field">
-  <div class="desc">
-    Zugtyp:
-  </div>
-  <div>
+  <div class="input-field col s4">
+    <label class="active">Zugtyp</label>
     %= select_field filter_train_type => $filter_opts->{train_types}
   </div>
-</div>
-<div class="field">
-  <div class="desc">
-    Zugnummer:
-  </div>
-  <div>
+  <div class="input-field col s4">
+    <label>Zugnummer</label>
     %= text_field 'filter_train_no', class => 'train_no'
   </div>
 </div>
-<div class="field">
-  <div class="desc">
-    Bahnhof:
-  </div>
-  <div>
+<div class="row">
+  <div class="input-field col s6">
+    <label class="active">Bahnhof</label>
     %= select_field filter_station => $filter_opts->{stations}
   </div>
-</div>
-<div class="field">
-  <div class="desc">
-    Zielbahnhof:
-  </div>
-  <div>
+  <div class="input-field col s6">
+    <label class="active">Zielbahnhof</label>
     %= select_field filter_destination => $filter_opts->{destinations}
   </div>
 </div>
-<div class="field">
-  <div class="desc">
-    Fahrten:
-  </div>
-  <div>
+<div class="row">
+  <div class="input-field col s12">
+    <label class="active">Ausfälle</label>
     %= select_field filter_cancellation => [['Alle' => q{}], ['Ohne Zugausfälle' => 'no_cancelled'], ['Nur Zugausfälle' => 'only_cancelled']]
   </div>
 </div>
-<div class="field">
-  <div class="desc">
-    Verspätung zwischen
-  </div>
-  <div>
+<div class="row">
+  <div class="input-field col s3">
+    <label>Verspätung Min</label>
     %= text_field 'filter_delay_min', class => 'delay', placeholder => '-∞'
-    und
+  </div>
+  <div class="input-field col s3">
+    <label>Verspätung Max</label>
     %= text_field 'filter_delay_max', class => 'delay', placeholder => '+∞'
-    Minuten (inklusive).
   </div>
-</div>
-<div class="field">
-  <div class="desc">
-    Zeitraum von
+  <div class="input-field col s3">
+    <label>Start</label>
+    %= date_field 'filter_date_start', class => 'datepicker'
+  </div>
+  <div class="input-field col s3">
+    <label>Ende</label>
+    %= date_field 'filter_date_stop', class => 'datepicker'
   </div>
-  <div>
-    %= date_field 'filter_date_start', class => 'datetime'
-    (inklusive) bis
-    %= date_field 'filter_date_stop', class => 'datetime'
-    (exklusive)
-    %= submit_button 'Go'
+</div>
+<div class="row">
+  <div class="col offset-s5">
+    <button class="btn waves-effect waves-light" type="submit" name="action">Submit<i class="material-icons right">send</i>
+    </button>
   </div>
 </div>
diff --git a/templates/generalbar.html.ep b/templates/generalbar.html.ep
new file mode 100644
index 0000000..ed0cfb2
--- /dev/null
+++ b/templates/generalbar.html.ep
@@ -0,0 +1,31 @@
+% if (not defined param('want_msg')) {
+  %   param(want_msg => 0);
+  % }
+  %= form_for bar => begin
+  <input type="hidden" value="0" name="want_msg"/>
+  <div class="row">
+    <div class="input-field col s12">
+      <label class="active">Bartyp</label>
+      % my %yargs = %{$self->barplot_args->{y}};
+      % my @yarg_keys = sort keys %yargs;
+      %= select_field ysource => [map {[$yargs{$_}->{desc}, $_]} @yarg_keys]
+    </div>
+  </div>
+  <div class="row">
+    <div class="input-field col s4">
+      <label class="active">aufgeteilt nach</label>
+      % my %xargs = %{$self->barplot_args->{x}};
+      % my @xarg_keys = sort keys %xargs;
+      %= select_field xsource => [map {[$xargs{$_}->{desc}, $_]} @xarg_keys]
+    </div>
+    <div class="input-field col s4">
+      <label>Breite</label>
+      %= text_field 'width' => 960, class => 'dimension'
+    </div>
+    <div class="input-field col s4">
+      <label>Höhe</label>
+      %= text_field 'height' => 500, class => 'dimension'
+    </div>
+  </div>
+  %= include 'filterform';
+  % end
diff --git a/templates/individualform.html.ep b/templates/individualform.html.ep
index 1dba798..689527d 100644
--- a/templates/individualform.html.ep
+++ b/templates/individualform.html.ep
@@ -1,10 +1,11 @@
-<div>
 Details zu individuellen Zugfahrten. Es werden nur maximal 1000 Ergebnisse
 angezeigt.
 %= form_for individual => begin
-Sortieren nach:
-%= select_field order_by => [['Zeit ↓', 'scheduled_time.d'], ['Zeit ↑', 'scheduled_time.a'], ['Verspätung ↓', 'delay.d'], ['Verspätung ↑', 'delay.a']]
-%= submit_button 'Go';
-<br/>
+<div class="row">
+  <div class="input-field col s12">
+    <label class="active">Sortierung</label>
+    %= select_field order_by => [['Zeit ↓', 'scheduled_time.d'], ['Zeit ↑', 'scheduled_time.a'], ['Verspätung ↓', 'delay.d'], ['Verspätung ↑', 'delay.a']]
+  </div>
+</div>
 %= include 'filterform';
 % end
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
index 2292967..cecd010 100644
--- a/templates/intro.html.ep
+++ b/templates/intro.html.ep
@@ -3,20 +3,20 @@
 <b>dbdb</b>
 
 <div class="intro">
-Diese Seite sammelt Ankunfts- und Abfahrtsdaten einiger deutschen Bahnhöfe und
-berechnet daraus Statistiken zu Pünktlichkeit, Verspätungsmeldungen und
-ähnlichem. Das ist ein reines Freizeitprojekt (und aktuell ziemlich unfertig),
-für die Korrektheit und Vollständigkeit gibt es selbstverständlich keine
-Garantie. Vernünftiges Layout und Design kommt irgendwann™ mal.
+  Diese Seite sammelt Ankunfts- und Abfahrtsdaten einiger deutschen Bahnhöfe und
+  berechnet daraus Statistiken zu Pünktlichkeit, Verspätungsmeldungen und
+  ähnlichem. Das ist ein reines Freizeitprojekt (und aktuell ziemlich unfertig),
+  für die Korrektheit und Vollständigkeit gibt es selbstverständlich keine
+  Garantie. Vernünftiges Layout und Design kommt irgendwann™ mal.
 </div>
 
 <b>Bitte beachten</b>
 <div class="usage">
-Die Deutsche Bahn ist über eine solche Statistiksammlung möglicherweise
-nicht ganz glücklich, daher bleibt diese Seite nichtöffentlich.
-Einzelne Graphen / Statistiken dürfen gerne (<b>ohne</b> Quellenangabe)
-weitergegeben werden. Zugangsdaten (soweit vorhanden) bitte nur mit
-Verstand weitergeben, im Zweifelsfall werden sie irgendwann geändert.
+  Die Deutsche Bahn ist über eine solche Statistiksammlung möglicherweise
+  nicht ganz glücklich, daher bleibt diese Seite nichtöffentlich.
+  Einzelne Graphen / Statistiken dürfen gerne (<b>ohne</b> Quellenangabe)
+  weitergegeben werden. Zugangsdaten (soweit vorhanden) bitte nur mit
+  Verstand weitergeben, im Zweifelsfall werden sie irgendwann geändert.
 </div>
 
 <b>Datengrundlage</b>
@@ -36,32 +36,56 @@ Bedeutung der msg-Spalten siehe
 % }
 </div>
 
-<div class="globalstats">
-In der Datenbank sind <b><%= $stats->{departures} %></b> Fahrten
-an <b><%= $stats->{days} %></b> Tagen,
-davon
-<b><%= $stats->{realtime} %></b>
-(<b><%= sprintf('%.1f%%', $stats->{realtime_rate} * 100) %></b>) mit Echtzeitdaten.
-Es gab
-<b><%= $stats->{delayed} %></b> (<%= sprintf('%.1f%%', $stats->{delayed_rate} * 100) %>)
-Züge mit mehr als 5 Minuten Verspätung und
-<b><%= $stats->{canceled} %></b> (<%= sprintf('%.1f%%', $stats->{canceled_rate} * 100) %>)
-Zugausfälle. Pünktlich auf die Minute waren
-<b><%= $stats->{ontime} %></b> (<%= sprintf('%.1f%%', $stats->{ontime_rate} * 100) %>)
-Abfahrten.
-<br/>
-Insgesamt wurden
-<b><%= sprintf('%d', $stats->{delay_sum} / 60) %> Stunden</b> an Verspätungen eingefahren,
-dabei ist ein Zug durchschnittlich
-<b><%= sprintf('%.2f', $stats->{delay_avg}) %> Minuten</b> zu spät.
-</div>
+  <div class="globalstats">
+    In der Datenbank sind <b><%= $stats->{departures} %></b> Fahrten
+    an <b><%= $stats->{days} %></b> Tagen,
+    davon
+    <b><%= $stats->{realtime} %></b>
+    (<b><%= sprintf('%.1f%%', $stats->{realtime_rate} * 100) %></b>) mit Echtzeitdaten.
+    Es gab
+    <b><%= $stats->{delayed} %></b> (<%= sprintf('%.1f%%', $stats->{delayed_rate} * 100) %>)
+    Züge mit mehr als 5 Minuten Verspätung und
+    <b><%= $stats->{canceled} %></b> (<%= sprintf('%.1f%%', $stats->{canceled_rate} * 100) %>)
+    Zugausfälle. Pünktlich auf die Minute waren
+    <b><%= $stats->{ontime} %></b> (<%= sprintf('%.1f%%', $stats->{ontime_rate} * 100) %>)
+    Abfahrten.
+    <br/>
+    Insgesamt wurden
+    <b><%= sprintf('%d', $stats->{delay_sum} / 60) %> Stunden</b> an Verspätungen eingefahren,
+    dabei ist ein Zug durchschnittlich
+    <b><%= sprintf('%.2f', $stats->{delay_avg}) %> Minuten</b> zu spät.
+  </div>
 
-<div class="forms">
-<b>Bargraph</b>:
-%= include 'barform';
-<br/>
-<b>Top-Liste</b>:
-%= include 'topform';
-<b>Einzelne Züge</b>:
-%= include 'individualform';
+  <div class="container">
+    <div class="row z-depth-2">
+      <div class="col s12">
+        <ul class="tabs">
+          <li class="tab col s3">
+            <a href="#general">Allgemein</a>
+          </li>
+          <li class="tab col s3">
+            <a href="#meldung">Meldungen</a>
+          </li>
+          <li class="tab col s3">
+            <a href="#top">Top</a>
+          </li>
+          <li class="tab col s3">
+            <a href="#single">Einzeln</a>
+          </li>
+        </ul>
+      </div>
+      <div id="general" class="col s12">
+        %= include 'generalbar';
+      </div>
+      <div id="meldung" class="col s12">
+        %= include 'meldungbar';
+      </div>
+      <div id="top" class="col s12">
+        %= include 'topform';
+      </div>
+      <div id="single" class="col s12">
+        %= include 'individualform';
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 1c58277..59d9f5a 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -2,33 +2,51 @@
 <html>
 <head>
 	<title><%= stash('title') ? "dbdb - " . stash('title') : 'dbdb' %></title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="msapplication-tap-highlight" content="no">
 	<meta charset="utf-8">
-% if ($self->stash('refresh_interval')) {
-	<meta http-equiv="refresh" content="<%= $self->stash('refresh_interval') %>"/>
-% }
+	% if ($self->stash('refresh_interval')) {
+		<meta http-equiv="refresh" content="<%= $self->stash('refresh_interval') %>"/>
+		% }
 
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.css">
 
-	%= stylesheet '/css/default.css'
-	%= javascript '/js/d3.min.js'
-	%= javascript '/js/d3.tip.v0.6.3.js'
-	%= javascript '/js/d3funcs.js'
-</head>
-<body style="<%= (stash('hide_opts') ? 'margin: 0; padding: 0;' : q{}) %>">
+		%= stylesheet '/css/default.css'
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
+		%= javascript '/js/d3.min.js'
+		%= javascript '/js/d3.tip.v0.6.3.js'
+		%= javascript '/js/d3funcs.js'
 
-% if (my $error = stash 'error') {
-<div class="error">Backend-Fehler:</div>
-<div>
-<pre>
-%= $error
-</pre>
-</div>
-% }
+		<script>
+		$(document).ready(function() {
+			$('select').material_select();
+			$('.datepicker').pickadate({
+				selectMonths: true, // Creates a dropdown to control month
+				selectYears: 15 // Creates a dropdown of 15 years to control year
+			});
+			$('ul.tabs').tabs();
+		});
+		</script>
+	</head>
+	<body>
 
-%= content
+		% if (my $error = stash 'error') {
+			<div class="error">Backend-Fehler:</div>
+			<div>
+				<pre>
+					%= $error
+				</pre>
+			</div>
+			% }
 
-<div class="about">
-version <%= stash('version') // '???' %>
-</div>
+			%= content
 
-</body>
-</html>
+			<div class="about">
+				version <%= stash('version') // '???' %>
+			</div>
+
+		</body>
+		</html>
diff --git a/templates/meldungbar.html.ep b/templates/meldungbar.html.ep
new file mode 100644
index 0000000..e94a3cc
--- /dev/null
+++ b/templates/meldungbar.html.ep
@@ -0,0 +1,31 @@
+% if (not defined param('want_msg')) {
+  %   param(want_msg => 1);
+  % }
+  %= form_for bar => begin
+  <input type="hidden" value="1" name="want_msg"/>
+  <div class="row">
+    <div class="input-field col s12">
+      <label class="active">Bartyp</label>
+      % my %yargs = %{$self->barplot_args->{msg}};
+      % my @yarg_keys = sort keys %yargs;
+      %= select_field msgnum => [map {[$yargs{$_}->{desc}, $_]} @yarg_keys]
+    </div>
+  </div>
+  <div class="row">
+    <div class="input-field col s4">
+      <label class="active">aufgeteilt nach</label>
+      % my %xargs = %{$self->barplot_args->{x}};
+      % my @xarg_keys = sort keys %xargs;
+      %= select_field xsource => [map {[$xargs{$_}->{desc}, $_]} @xarg_keys]
+    </div>
+    <div class="input-field col s4">
+      <label>Breite</label>
+      %= text_field 'width' => 960, class => 'dimension'
+    </div>
+    <div class="input-field col s4">
+      <label>Höhe</label>
+      %= text_field 'height' => 500, class => 'dimension'
+    </div>
+  </div>
+  %= include 'filterform';
+  % end
diff --git a/templates/topform.html.ep b/templates/topform.html.ep
index cb35c2f..26a4b78 100644
--- a/templates/topform.html.ep
+++ b/templates/topform.html.ep
@@ -1,6 +1,3 @@
-<div>
 %= form_for top => begin
-Nach Häufigkeit sortierte Verspätungs- und Qualitätsmeldungen.
-Die Einschränkungen sind alle optional.
 %= include 'filterform';
 % end
diff --git a/templates/toplist.html.ep b/templates/toplist.html.ep
index f639e36..d3bda6f 100644
--- a/templates/toplist.html.ep
+++ b/templates/toplist.html.ep
@@ -1,22 +1,34 @@
-%= include 'topform';
+<div class="container">
+  <ul class="collapsible" data-collapsible="accordion">
+    <li>
+      <div class="collapsible-header">Form</div>
+      <div class="collapsible-body">
+        <div style="padding: 0 0.75rem">
+          %= include 'topform';
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
 
 % if (@{$toplist} == 0) {
-<div class="error">
-Keine Daten mit diesen Parametern gefunden.
-</div>
-% }
-% else {
-<div class="toplist">
-<table>
-<tr><th>Meldung</th><th>Anteil</th><th>Anzahl</th></tr>
-% my $max = stash('toplist')->[0][2];
-% for my $entry (@{ stash('toplist') // [] }) {
-% my ($desc, $percent, $raw) = @{$entry};
-<tr>
-<td style="position: relative;"><div style="z-index: -1; position: absolute; width:<%= int($raw * 100 / $max) %>%; background-color: #e2e2e2;">&nbsp;</div><%= $desc %></td>
-<td><%= $percent %></td>
-<td><%= $raw %></td></tr>
-% }
-</table>
-</div>
-% }
+  <div class="error">
+    Keine Daten mit diesen Parametern gefunden.
+  </div>
+  % }
+  % else {
+    <div class="toplist">
+      <table>
+        <tr><th>Meldung</th><th>Anteil</th><th>Anzahl</th></tr>
+        % my $max = stash('toplist')->[0][2];
+        % for my $entry (@{ stash('toplist') // [] }) {
+          % my ($desc, $percent, $raw) = @{$entry};
+          <tr>
+            <td style="position: relative;"><div style="z-index: -1; position: absolute; width:<%= int($raw * 100 / $max) %>%; background-color: #e2e2e2;">&nbsp;</div><%= $desc %></td>
+            <td><%= $percent %></td>
+            <td><%= $raw %></td>
+          </tr>
+          % }
+        </table>
+      </div>
+      % }