From dff8431e8bc2622a2a6014ac848542fe2f9d9b74 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Wed, 5 Dec 2018 02:55:31 +0100
Subject: [PATCH] frontend: improve responsiveness

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

diff --git a/frontend/static/index.html b/frontend/static/index.html
index 64f634b0..58cd2c5b 100644
--- a/frontend/static/index.html
+++ b/frontend/static/index.html
@@ -18,23 +18,20 @@
 
     <div class="navbar navbar-expand-lg navbar-dark bg-dark text-light" ng-controller="CountdownController">
       <div class="container">
-	<div class="col-md-auto">
-          <a href="https://www.forum-fic.com/" ng-if="!(time.remaining === undefined || my.team_id)">
-            <img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
-	  </a>
-          <a href="/" ng-if="(time.remaining === undefined || my.team_id)" ng-cloak>
+	<div class="col-auto d-none d-sm-block">
+          <a ng-href="{{ (time.remaining === undefined || my.team_id)?'https://www.forum-fic.com/':'/' }}">
             <img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
 	  </a>
 	</div>
-	<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>
+	<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>
           <span id="min">{{ time.minutes | time }}</span>
           <span class="point">:</span>
           <span id="sec">{{ time.seconds | time }}</span>
 	</div>
-	<div class="clock col-md-auto btn-group btn-group-lg" ng-if="time.remaining === undefined || settings.end - settings.start <= 0" ng-cloak>
+	<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="/">
 	      <span class="glyphicon glyphicon-home"></span> Accueil
 	    </a>
@@ -45,7 +42,7 @@
 	      <span class="glyphicon glyphicon-blackboard"></span> Vidéos
 	    </a>
 	</div>
-	<div class="col-md-auto">
+	<div class="col-auto d-none d-md-block">
 	  <div class="carousel slide" data-ride="carousel" data-interval="30000" style="width: 150px">
 	    <div class="carousel-inner text-center">
 	      <div class="carousel-item active">
@@ -69,8 +66,8 @@
 
     <div ng-controller="DataController">
 
-    <nav class="navbar navbar-expand-lg bg-primary niceborder" ng-cloak>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#themesMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
+    <nav class="navbar navbar-expand-sm bg-primary niceborder" ng-cloak>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
 	<span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navMenu">
@@ -128,7 +125,7 @@
 
     <div class="container" ng-view>
       <noscript>
-	<div class="alert alert-danger">
+	<div class="alert alert-danger mt-4">
 	  <strong>Veuillez activer le JavaScript.</strong> Ce site requiert un navigateur interprêtant le JavaScript pour fonctionner. Veuillez l'activer ou en télécharger un supportant cette technologie.
 	</div>
       </noscript>