css: clock is now a css class

This commit is contained in:
nemunaire 2018-12-04 05:27:15 +01:00
parent 46aaa7cb4a
commit f9237d2dcf
7 changed files with 15 additions and 15 deletions

View file

@ -47,7 +47,7 @@
<h3 style="margin:0"><strong ng-bind="s.params.title"></strong></h3>
</div>
<div ng-controller="TimerController" ng-init="s.params.end?init(s.params.end):initStart()">
<div class="card-body text-center" style="font-size: 450%;" ng-if="duration > 0">{{ duration / 60 | time }} <span class="point">:</span> {{ duration % 60 | time }}</div>
<div class="card-body text-center clock" style="font-size: 450%;" ng-if="duration > 0">{{ duration / 60 | time }} <span class="point">:</span> {{ duration % 60 | time }}</div>
<div class="card-body text-center" style="font-size: 450%;" ng-if="!duration || duration <= 0">{{ s.params.lead }}</div>
</div>
</div>
@ -280,8 +280,8 @@
</div>
<div style="box-shadow: 0px -5px 5px 5px #e9ecef; position: fixed; bottom: calc(14vh - 1px); right: 0; width: 33vw;" class="navbar bg-light" ng-controller="CountdownController">
<div class="text-center" ng-if="time.hours === 0 || time.hours" style="margin-top: -5px;">
<div id="clock" ng-class="{expired: time.expired, end: time.end}" style="font-size: 50px" ng-cloak>
<div class="text-center" ng-if="time.hours === 0 || time.hours" style="margin-top: -5px; width: inherit">
<div class="clock" ng-class="{expired: time.expired, end: time.end}" style="font-size: 50px" ng-cloak>
<span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span>
<span id="min">{{ time.minutes | time }}</span>
@ -289,12 +289,12 @@
<span id="sec">{{ time.seconds | time }}</span>
</div>
<div style="font-size: 18px; margin-top: -15px; text-shadow: 0 0 6px #446688;">
<span ng-if="!time.end && time.duration != time.remaining">Temps restant du challenge forensic</span>
<span ng-if="!time.end && time.duration == time.remaining">Le challenge forensic va bientôt commencer&nbsp;!</span>
<span ng-if="!time.end && !startIn">Temps restant du challenge forensic</span>
<span ng-if="!time.end && startIn">Le challenge forensic va bientôt commencer&nbsp;!</span>
<span ng-if="time.end">Le challenge forensic est terminé&nbsp;!</span>
</div>
</div>
<div id="clock" class="col-sm-6" ng-if="!(time.hours === 0 || time.hours)">
<div class="clock" class="col-sm-6" ng-if="!(time.hours === 0 || time.hours)">
{{ time.start | date:"shortDate" }}
</div>
</div>

View file

@ -67,10 +67,10 @@ body {
margin: 3px auto;
height: 100px;
}
.navbar #clock {
.navbar .clock {
font-size: 70px;
}
#clock:not(.expired) .point, #clock.expired {
.clock:not(.expired) .point, .clock.expired {
transition: color text-shadow 1s;
position: relative;
animation: clockanim 1s ease infinite;

View file

@ -25,7 +25,7 @@
<img src="/img/fic.png" alt="Forum International de la Cybersécurité">
</a>
</div>
<div id="clock" class="col-md-auto text-center">Challenge Forensic</div>
<div class="clock col-md-auto text-center">Challenge Forensic</div>
<div class="col-md-auto">
<a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita">

View file

@ -25,7 +25,7 @@
<img src="/img/fic.png" alt="Forum International de la Cybersécurité">
</a>
</div>
<div id="clock" class="col-md-auto text-center">Challenge Forensic</div>
<div class="clock col-md-auto text-center">Challenge Forensic</div>
<div class="col-md-auto">
<a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita">

View file

@ -25,7 +25,7 @@
<img src="/img/fic.png" alt="Forum International de la Cybersécurité">
</a>
</div>
<div id="clock" class="col-md-auto text-center">Challenge Forensic</div>
<div class="clock col-md-auto text-center">Challenge Forensic</div>
<div class="col-md-auto">
<a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita">

View file

@ -26,15 +26,15 @@
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
</a>
</div>
<div id="clock" class="col-md-auto text-center" ng-hide="1">Chargement...</div>
<div id="clock" class="col-md-auto text-center" ng-class="{expired: time.expired, end: time.end}" ng-if="time.remaining !== undefined && settings.end - settings.start > 0" ng-cloak>
<div class="clock col-md-auto text-center" ng-hide="1">Chargement...</div>
<div class="clock col-md-auto text-center" ng-class="{expired: time.expired, end: time.end}" ng-if="time.remaining !== undefined && settings.end - settings.start > 0" ng-cloak>
<span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span>
<span id="min">{{ time.minutes | time }}</span>
<span class="point">:</span>
<span id="sec">{{ time.seconds | time }}</span>
</div>
<div id="clock" class="col-md-auto btn-group btn-group-lg" ng-if="time.remaining === undefined || settings.end - settings.start <= 0" ng-cloak>
<div class="clock col-md-auto btn-group btn-group-lg" ng-if="time.remaining === undefined || settings.end - settings.start <= 0" ng-cloak>
<a class="btn btn-light" href="/">
<span class="glyphicon glyphicon-home"></span> Accueil
</a>

View file

@ -20,7 +20,7 @@
<img src="/img/fic.png" alt="Forum International de la Cybersécurité">
</a>
</div>
<div id="clock" class="col-md-auto text-center">Challenge Forensic</div>
<div class="clock col-md-auto text-center">Challenge Forensic</div>
<div class="col-md-auto">
<a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita">