incubator/netclock
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Style created countdowns
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Armin Friedl 2020-09-13 22:24:58 +02:00
parent 142ff73e01
commit cec8811dfc
Signed by: armin
GPG key ID: 48C726EEE7FBCBC8
4 changed files with 84 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
countdown/templates/countdown/created.html
View file

@ -3,15 +3,16 @@
{% block body %} {% block body %}
<div id="created-countdowns"> <div class="center">
{% for countdown in countdowns %} <div id="created-countdowns">
{% for countdown in countdowns %}
<div class="created-countdown" countdown-id="{{ countdown }}"> <div class="created-countdown" countdown-id="{{ countdown }}">
<div class="created-countdown-header"> <div class="created-countdown-header">
<h1>Countdown {{ loop.index }}</h1> <h1>Countdown {{ loop.index }}</h1>
<div class="created-countdown-time"></div> <div class="created-countdown-time">00:00:00</div>
<div class="created-countdown-info"></div> <div class="created-countdown-info">Loading...</div>
<div class="created-countdown-link"> <div class="created-countdown-link">
<a href="{{ countdown }}">Link</a> <a href="{{ countdown }}" target="_blank">Share</a>
</div> </div>
</div> </div>
<div class="created-countdown-controls"> <div class="created-countdown-controls">
@ -20,9 +21,10 @@
<button class="created-countdown-reset" type="button" name="reset" value="{{ countdown }}">Reset</button> <button class="created-countdown-reset" type="button" name="reset" value="{{ countdown }}">Reset</button>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div>
{% endblock body %} {% endblock body %}
{% block scripts %} {% block scripts %}

4
countdown/templates/countdown/created.js
View file

@ -25,8 +25,8 @@ let formatTime = (h, m, s) => {
let mtext = padTime(m); let mtext = padTime(m);
let stext = padTime(s); let stext = padTime(s);
htext = htext !== "00" ? htext + ":" : ""; htext = htext + ":";
mtext = mtext !== "00" || htext !== "00" ? mtext + ":" : ""; mtext = mtext + ":";
return htext + mtext + stext; return htext + mtext + stext;
}; };

63
countdown/templates/countdown/created.scss
View file

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

2
countdown/templates/countdown/view.js
View file

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