Style created countdowns

countdown/templates/countdown/created.html

@@ -3,15 +3,16 @@
 
 {% block body %}
 
+<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"></div>
-            <div class="created-countdown-info"></div>
+                <div class="created-countdown-time">00:00:00</div>
+                <div class="created-countdown-info">Loading...</div>
                 <div class="created-countdown-link">
-                <a href="{{ countdown }}">Link</a>
+                    <a href="{{ countdown }}" target="_blank">Share</a>
                 </div>
             </div>
             <div class="created-countdown-controls">
@@ -23,6 +24,7 @@
         {% endfor %}
     </div>
 
+</div>
 {% endblock body %}
 
 {% block scripts %}

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;
 };

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;
+    }
+}

countdown/templates/countdown/view.js

@@ -77,7 +77,7 @@ let updateCountdown = () => {
     sleep(time.milliseconds)
         .then(() => {
             $("#countdown").text(text);
-            $("#subtext").text();
+            $("#subtext").text("");
         });
 };