diff options
| -rw-r--r-- | public/static/main.css | 67 | ||||
| -rw-r--r-- | templates/main.html.ep | 23 |
2 files changed, 74 insertions, 16 deletions
diff --git a/public/static/main.css b/public/static/main.css index 8ecda96..3b1fe65 100644 --- a/public/static/main.css +++ b/public/static/main.css @@ -40,18 +40,71 @@ div.field { margin-bottom: 0.6em; } -input, select { - width: 20em; +.container { + max-width: 40em; + margin-left: auto; + margin-right: auto; +} + +#display { + display: block; + margin-left: auto; + margin-right: auto; +} + +input, select, .button { + display: inline-block; + width: 50em; max-width: 100%; min-height: 1.8em; + border-radius: 4px; + color: #000; + background-color: #fff; + border: 1px solid #ccc; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075); + font-size: 90%; + text-align: center; + vertical-align: middle; } -/* -input, select { - border: 1px solid black; - display: block; +input[type="text"], +input[type="number"] { + width: 49em; + padding-left: 0.5em; + padding-right: 0.5em; + text-align: left; + box-sizing: border-box; +} + +input[type="submit"], .button { + color: #fff; + background-color: #337ab7; + border-color: #2e6da4; + cursor: pointer; + box-shadow: none; + padding-top: 0.9ex; + padding-bottom: 0.9ex; +} + +.button { + padding-top: 1.1ex; + padding-bottom: 0; +} + +input[type="submit"]:active, +input[type="submit"]:focus, +input[type="submit"]:hover, +.button:active, +.button:focus, +.button:hover { + color: #fff; + background-color: #286090; + border-color: #204d74; +} + +input[type="submit"]:active { + box-shadow: inset 0 3px 5px rgba(0,0,0,.125); } -*/ div.notes { margin-top: 4em; diff --git a/templates/main.html.ep b/templates/main.html.ep index cb18d93..b6cccd2 100644 --- a/templates/main.html.ep +++ b/templates/main.html.ep @@ -12,12 +12,14 @@ % if ($stop) { % if ($errstr) { +<div class="container"> <div class="error">Received an error from the backend service:</div> <div> <pre> %= $errstr </pre> </div> +</div><!-- container --> % } % elsif ($frontend eq 'png') { <img src="/<%= $city ? "$city/" : q{} %><%= $stop %>.png?<%= $params %>" alt="" @@ -37,6 +39,7 @@ Preview:<br/> height="<%= $height * 5 %>" width="<%= $width * 5 %>"></iframe> % } % elsif ($frontend eq 'json') { +<div class="container"> <p> <a href="/<%= $city ? "$city/" : q{} %><%= $stop %>.json?<%= $params %>">JSON data for <%= $city %> <%= $stop %></a> @@ -76,10 +79,11 @@ documentation </ul> <p>NOTE: The JSON interface is not guaranteed to be stable. The data layout may change any time.</p> +</div> <!-- container --> % } -% } # ($city and $stop) +% } # ($stop) % else { - +<div class="container"> <p> VRR-Infoscreen shows the next departures at a public transit stop, just like the Lumino LED displays used in some places. It also supports an @@ -92,9 +96,9 @@ It works best for the VRR (Verkehrsverbund Rhein-Ruhr), but also supports many other german transit networks. All information is provided without any guarantee of correctness, completeness or anything else. </p> - +</div> <!-- container --> % } - +<div class="container"> <div class="input-field"> % if (my $error = stash 'error') { @@ -130,6 +134,11 @@ guarantee of correctness, completeness or anything else. </div> </div> <div class="field"> + %= submit_button 'Display' + </div> + <div class="break"></div> + <span class="optional">optional:</span> + <div class="field"> <div class="desc">Frontend</div> <div> %= select_field frontend => [['LED board (PNG)' => 'png'], ['LED board (HTML)' => 'html'], ['App / Infoscreen' => 'infoscreen'], ['JSON' => 'json']] @@ -148,11 +157,6 @@ guarantee of correctness, completeness or anything else. </div> </div> <div class="field"> - %= submit_button 'Display' - </div> - <div class="break"></div> - <span class="optional">optional:</span> - <div class="field"> <div class="desc" title="number of lines"> display height [lines]</div> <div> @@ -208,6 +212,7 @@ v<%= $Travel::Status::DE::HAFAS::VERSION %><br/> <a href="http://finalrewind.org/projects/Travel-Status-DE-VRR/">Travel::Status::DE::EFA</a> v<%= $Travel::Status::DE::EFA::VERSION %><br/> </div> +</div> <!-- container --> </body> </html> |