From 4e258cb30dbb8b935a181b35a4d68e00d47dd2b3 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Mon, 20 Jan 2020 16:01:35 +0100
Subject: [PATCH] frontend: don't display hours/seconds on small screens

---
 frontend/static/index.html | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/static/index.html b/frontend/static/index.html
index 76824638..81243738 100644
--- a/frontend/static/index.html
+++ b/frontend/static/index.html
@@ -24,12 +24,16 @@
 	  </a>
 	</div>
 	<div class="clock col-auto text-center" ng-hide="1">Chargement...</div>
-	<div class="clock col-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>
+	<div class="clock col text-center" ng-class="{expired: time.expired, end: time.end}" ng-if="time.remaining !== undefined && settings.end - settings.start > 0" ng-cloak>
+	  <span ng-class="{'d-none': !time.hours, 'd-sm-inline': !time.hours}">
+            <span id="hours">{{ time.hours | time }}</span>
+            <span class="point">:</span>
+	  </span>
           <span id="min">{{ time.minutes | time }}</span>
-          <span class="point">:</span>
-          <span id="sec">{{ time.seconds | time }}</span>
+	  <span ng-class="{'d-none': time.hours, 'd-sm-inline': time.hours}">
+            <span class="point">:</span>
+            <span id="sec">{{ time.seconds | time }}</span>
+	  </span>
 	</div>
 	<div class="clock col-auto btn-group btn-group-lg" ng-if="time.remaining === undefined || settings.end - settings.start <= 0" ng-cloak>
 	    <a class="btn btn-light" href="/">