From cec8811dfc5c85d01c3277f1b0e885d260dd7957 Mon Sep 17 00:00:00 2001
From: Armin Friedl <dev@friedl.net>
Date: Sun, 13 Sep 2020 22:24:58 +0200
Subject: [PATCH] Style created countdowns

---
 countdown/templates/countdown/created.html | 34 ++++++------
 countdown/templates/countdown/created.js   |  4 +-
 countdown/templates/countdown/created.scss | 63 ++++++++++++++++++++++
 countdown/templates/countdown/view.js      |  2 +-
 4 files changed, 84 insertions(+), 19 deletions(-)

diff --git a/countdown/templates/countdown/created.html b/countdown/templates/countdown/created.html
index 0b7acdf..a75f778 100644
--- a/countdown/templates/countdown/created.html
+++ b/countdown/templates/countdown/created.html
@@ -3,26 +3,28 @@
 
 {% block body %}
 
-<div id="created-countdowns">
-{% for countdown in countdowns %}
-    <div class="created-countdown" countdown-id="{{ countdown }}">
-        <div class="created-countdown-header">
-            <h1>Countdown {{ loop.index }}</h1>
-            <div class="created-countdown-time"></div>
-            <div class="created-countdown-info"></div>
-            <div class="created-countdown-link">
-                <a href="{{ countdown }}">Link</a>
+<div class="center">
+    <div id="created-countdowns">
+        {% for countdown in countdowns %}
+        <div class="created-countdown" countdown-id="{{ countdown }}">
+            <div class="created-countdown-header">
+                <h1>Countdown {{ loop.index }}</h1>
+                <div class="created-countdown-time">00:00:00</div>
+                <div class="created-countdown-info">Loading...</div>
+                <div class="created-countdown-link">
+                    <a href="{{ countdown }}" target="_blank">Share</a>
+                </div>
+            </div>
+            <div class="created-countdown-controls">
+                <button class="created-countdown-start" type="button" name="start" value="{{ countdown }}">Start</button>
+                <button class="created-countdown-stop" type="button" name="stop" value="{{ countdown }}">Stop</button>
+                <button class="created-countdown-reset" type="button" name="reset" value="{{ countdown }}">Reset</button>
             </div>
         </div>
-        <div class="created-countdown-controls">
-            <button class="created-countdown-start" type="button" name="start" value="{{ countdown }}">Start</button>
-            <button class="created-countdown-stop" type="button" name="stop" value="{{ countdown }}">Stop</button>
-            <button class="created-countdown-reset" type="button" name="reset" value="{{ countdown }}">Reset</button>
-        </div>
+        {% endfor %}
     </div>
-{% endfor %}
-</div>
 
+</div>
 {% endblock body %}
 
 {% block scripts %}
diff --git a/countdown/templates/countdown/created.js b/countdown/templates/countdown/created.js
index 8aa5db5..16d15db 100644
--- a/countdown/templates/countdown/created.js
+++ b/countdown/templates/countdown/created.js
@@ -25,8 +25,8 @@ let formatTime = (h, m, s) => {
     let mtext = padTime(m);
     let stext = padTime(s);
 
-    htext = htext !== "00" ? htext + ":" : "";
-    mtext = mtext !== "00" || htext !== "00" ? mtext + ":" : "";
+    htext = htext + ":";
+    mtext = mtext + ":";
 
     return htext + mtext + stext;
 };
diff --git a/countdown/templates/countdown/created.scss b/countdown/templates/countdown/created.scss
index e69de29..be107df 100644
--- a/countdown/templates/countdown/created.scss
+++ b/countdown/templates/countdown/created.scss
@@ -0,0 +1,63 @@
+#created-countdowns {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.created-countdown {
+    border: 0;
+    box-shadow: 0 .25rem 1rem rgba(48,55,66,.15);
+    padding: 1rem;
+    padding-bottom: 0.3rem;
+    margin: 1rem;
+}
+
+.created-countdown-controls {
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: solid;
+    border-top-width: 1px;
+
+    button {
+        display: block;
+        width: 100%;
+        margin-bottom: 0.5rem;
+        padding: 0.2rem;
+        background-color: white;
+        border-style: solid;
+        border-width: 1px;
+        border-top-color: #F0F0F0;
+        border-left-color: #F0F0F0;
+        border-bottom-color: #E3E3E3;
+        border-right-color: #E3E3E3;
+        font-size: 1.3em;
+        cursor: pointer;
+    }
+}
+
+.created-countdown-header {
+    h1 {
+        color: lightgrey;
+        font-variant: all-petite-caps;
+        font-size: 1em;
+        text-align: right;
+        margin-top: -0.5rem;
+    }
+
+    .created-countdown-time {
+        font-size: 3em;
+        text-align: right;
+        margin-top: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .created-countdown-info {
+        font-size: 1em;
+        display: inline;
+    }
+
+    .created-countdown-link {
+        font-size: 1em;
+        float: right;
+    }
+}
diff --git a/countdown/templates/countdown/view.js b/countdown/templates/countdown/view.js
index 9ed096b..dbb331c 100644
--- a/countdown/templates/countdown/view.js
+++ b/countdown/templates/countdown/view.js
@@ -77,7 +77,7 @@ let updateCountdown = () => {
     sleep(time.milliseconds)
         .then(() => {
             $("#countdown").text(text);
-            $("#subtext").text();
+            $("#subtext").text("");
         });
 };