Mercurial > personal > weather-server

changeset 8:d54155a199d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Improve template; add stylesheet.
author Paul Fisher <paul@pfish.zone>
date Sun, 29 Sep 2019 20:32:48 -0400
parents 4c25d5bb3534
children f1ea183d28ba
files weather_server/server.py weather_server/static/style.css weather_server/templates/location.html
diffstat 3 files changed, 124 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/weather_server/server.py	Sun Sep 29 15:23:26 2019 -0400
+++ b/weather_server/server.py	Sun Sep 29 20:32:48 2019 -0400
@@ -12,6 +12,7 @@
 def build_app(root_directory: str) -> flask.Flask:
     locs = locations.Locations(root_directory)
     app = flask.Flask(__name__)
+    app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
 
     @app.route('/favicon.ico')
     def favicon():
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/weather_server/static/style.css	Sun Sep 29 20:32:48 2019 -0400
@@ -0,0 +1,90 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-flow: column nowrap;
+    width: 100%;
+    height: 100%;
+
+    font-family: Roboto, sans-serif;
+}
+
+h1 {
+    /* Reset. */
+    margin: 0;
+    padding: 0;
+    font: inherit;
+
+    flex: none;
+    background: #263238;
+    color: white;
+    height: 48px;
+    padding: 0 24px;
+    font-size: 24px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+h1 span {
+    display: block;
+}
+
+p {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    flex: auto;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    padding: 24px;
+}
+
+p.important .key {
+    display: block;
+    opacity: 75%;
+    font-size: 18px;
+}
+
+p.important .value {
+    margin-top: 0;
+    font-size: 150px;
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+p.important .value .unit {
+    font-size: 33%;
+    font-weight: bold;
+    opacity: 66%;
+    padding-top: 0.4em;
+}
+
+#temp {
+    background: #0d47a1;
+    color: white;
+}
+
+#dewpoint {
+    background: #5472d3;
+    color: white;
+}
+
+#timestamp {
+    flex: none;
+    background: #263238;
+    color: white;
+    height: 48px;
+    padding: 0 24px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+#timestamp > span {
+    display: block;
+}
--- a/weather_server/templates/location.html	Sun Sep 29 15:23:26 2019 -0400
+++ b/weather_server/templates/location.html	Sun Sep 29 20:32:48 2019 -0400
@@ -1,15 +1,43 @@
 <!doctype html>
 <html>
     <head>
-        <title>Weather for {{ location.name }}</title>
+        <title>{{ location.name }}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link
+            rel="stylesheet"
+            href="{{ url_for('static', filename='style.css') }}">
     </head>
     <body>
+        <h1><span>{{ location.name }} conditions</span></h1>
         {% if last_reading %}
-            Temperature: {{ last_reading.temp_f }}<br>
-            Dew point: {{ last_reading.dew_point_f }}<br>
-            As of: {{ date }}
+            <p class="important" id="temp">
+                <span class="key">Temperature</span>
+                <span class="value">
+                    <span class="pad"> </span>
+                    <span class="n">
+                        {{- last_reading.temp_f|round|int -}}
+                    </span>
+                    <span class="unit">&deg;F</span>
+                </span>
+            </p>
+            <p class="important" id="dewpoint">
+                <span class="key">Dew point</span>
+                <span class="value">
+                    <span class="pad"> </span>
+                    <span class="n">
+                        {{- last_reading.dew_point_f|round|int -}}
+                    </span>
+                    <span class="unit">&deg;F</span>
+                </span>
+            </p>
+            <p id="timestamp">
+                <span>
+                    <span class="key">Reported</span>
+                    <span class="value">{{ "{:%H:%M}".format(date) }}</span>
+                </span>
+            </p>
         {% else %}
-            No weather yet
+            <p id="big-question-mark">?</p>
         {% endif %}
     </body>
 </html>