summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/static/main.css67
-rw-r--r--templates/main.html.ep23
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>