From 93519e5f62ce27d911f134ab6ce3330e5b319954 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Thu, 6 Dec 2018 03:48:23 +0100
Subject: [PATCH] dashboard: improve animation

---
 dashboard/static/index.html      | 42 ++++++++++++++--------------
 dashboard/static/js/dashboard.js | 22 ++-------------
 frontend/static/css/fic.css      | 48 +++++++++++++++++---------------
 3 files changed, 49 insertions(+), 63 deletions(-)

diff --git a/dashboard/static/index.html b/dashboard/static/index.html
index 1f678c7f..07e81dd1 100644
--- a/dashboard/static/index.html
+++ b/dashboard/static/index.html
@@ -23,9 +23,9 @@
 	  </div>
 	</noscript>
 
-	<div ng-repeat="(k,s) in scene" class="repeatedd-item" style="margin-bottom: 15px;">
+	<div ng-repeat="(k,s) in scene" class="repeatedd-item" style="margin-bottom: 15px;" ng-cloak>
 
-	  <div class="card" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'teams'">
+	  <div class="card niceborder" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'teams'">
 	    <div class="card-body text-light">
 	      <h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1>
 	      <p class="lead text-justify">
@@ -42,7 +42,7 @@
 	    </div>
 	  </div>
 
-	  <div class="card border-{{s.params.color}}" ng-if="s.type == 'countdown' && !s.params.hide">
+	  <div class="card border-{{s.params.color}} niceborder" ng-if="s.type == 'countdown' && !s.params.hide">
 	    <div class="card-header bg-{{s.params.color}} text-light" ng-if="s.params.title">
 	      <h3 style="margin:0"><strong ng-bind="s.params.title"></strong></h3>
 	    </div>
@@ -52,7 +52,7 @@
 	    </div>
 	  </div>
 
-	  <div class="card" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'public'">
+	  <div class="card niceborder" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'public'">
 	    <div class="card-body text-light">
 	      <h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1>
 	      <p class="lead text-justify">
@@ -72,7 +72,7 @@
 	    </div>
 	  </div>
 
-	  <div class="card" ng-if="s.type == 'message' && !s.params.hide">
+	  <div class="card niceborder" ng-if="s.type == 'message' && !s.params.hide">
 	    <div class="card-body text-light">
 	      <h1 ng-if="s.params.title"><strong ng-bind="s.params.title"></strong></h1>
 	      <p ng-if="s.params.lead" class="lead text-justify" ng-bind="s.params.lead"></p>
@@ -81,7 +81,7 @@
 	    </div>
 	  </div>
 
-	  <div class="card border-{{ s.params.color }}" ng-if="s.type == 'panel' && !s.params.hide">
+	  <div class="card border-{{ s.params.color }} niceborder" ng-if="s.type == 'panel' && !s.params.hide">
 	    <div class="card-header bg-{{ s.params.color }} text-white" ng-if="s.params.title">
 	      <h3 style="margin:0" ng-bind="s.params.title"></h3>
 	    </div>
@@ -92,7 +92,7 @@
 	    <div class="card-body text-light" ng-if="s.params.html" ng-bind-html="s.params.html"></div>
 	  </div>
 
-	  <div class="card" ng-if="s.type == 'exercice' && !s.params.hide">
+	  <div class="card niceborder" ng-if="s.type == 'exercice' && !s.params.hide">
 	    <div class="card-body text-light">
 	      <p class="lead">
 		<strong>Challenge <em>{{ themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].title }}</em> du thème {{ themes[my.exercices[s.params.exercice].theme_id].name }}</strong>
@@ -154,7 +154,7 @@
 	    </table>
 	    </div>
 
-	    <div class="card" ng-if="s.type == 'rank' && !s.params.hide">
+	    <div class="card niceborder" ng-if="s.type == 'rank' && !s.params.hide">
 	    <table class="table table-bordered table-striped table-sm">
 	      <thead class="thead-dark">
 		<tr>
@@ -173,7 +173,7 @@
 	    </table>
 	    </div>
 
-	    <div class="card" ng-if="s.type == 'carousel' && !s.params.hide">
+	    <div class="card niceborder" ng-if="s.type == 'carousel' && !s.params.hide">
 	      <div class="card-header bg-{{ s.params.color }} text-white" ng-if="s.params.title">
 		<h3 style="margin:0" ng-bind="s.params.title" class="text-dark" ng-if="s.params.color == 'light'"></h3>
 		<h3 style="margin:0" ng-bind="s.params.title" ng-if="s.params.color != 'light'"></h3>
@@ -271,17 +271,17 @@
 
       <div class="col-4">
 
-	<div ng-controller="EventsController">
-	  <div ng-repeat="e in events | limitTo: 7" class="repeated-item">
+	<div ng-controller="EventsController" id="eventsList">
+	  <div ng-repeat="e in events track by e.id" class="swap-animation" ng-cloak>
 	    <div class="alert" ng-class="e.kind">
-	      <div class="heading">{{ e.since | since }}</div>
+	      <div class="heading text-muted">{{ e.since | since }}</div>
 	      <span ng-bind-html="e.txt"></span>
 	    </div>
 	  </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="navbar bg-light" ng-controller="CountdownController" style="box-shadow: 0px -5px 5px 5px #e9ecef; position: fixed; bottom: 109px; right: 0; width: 33vw;" 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>
+	      <div class="clock" ng-class="{expired: time.expired, end: time.end}" style="font-size: 50px">
 		<span id="hours">{{ time.hours | time }}</span>
 		<span class="point">:</span>
 		<span id="min">{{ time.minutes | time }}</span>
@@ -299,16 +299,16 @@
 	    </div>
 	  </div>
 
-	  <div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 14vh" class="bg-primary">
+	  <div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 110px" class="bg-primary">
 	    <div class="carousel slide" id="carousel-logos" data-ride="carousel" data-interval="10500">
 	      <div class="carousel-inner">
 		<div class="carousel-item">
 		  <div class="carousel-caption">
-		    <a href="http://www.epita.fr/" class="mr-3"><img src="/img/epita.png" alt="Epita" style="max-height:14vh"></a>
-		    <img src="/img/comcyber.png" alt="Réserves de cyberdéfense" style="height:14vh">
+		    <a href="http://www.epita.fr/" class="mr-3"><img src="/img/epita.png" alt="Epita" style="max-height:110px"></a>
+		    <img src="/img/comcyber.png" alt="Réserves de cyberdéfense" style="height:110px">
 		  </div>
 		</div>
-		<div class="carousel-item active">
+		<div class="carousel-item">
 		  <div class="carousel-caption">
 		    <h2 style="margin: 17px">Bienvenue au challenge forensic&nbsp;!</h2>
 		  </div>
@@ -329,10 +329,10 @@
 		    </p>
 		  </div>
 		</div>
-		<div class="carousel-item">
+		<div class="carousel-item active">
 		  <div class="carousel-caption row" style="padding: 5px">
 		    <div class="col-4" style="padding-top: 4px;">
-		      <a href="https://srs.epita.fr/"><img src="/img/srs.png" alt="Laboratoire SRS" style="max-width:100%; max-height:12vh"></a>
+		      <a href="https://srs.epita.fr/"><img src="/img/srs.png" alt="Laboratoire SRS" style="max-width:100%; max-height:90px"></a>
 		    </div>
 		    <p class="col-8 text-bold" style="font-size: 110%">
 		      Les challenges ont été réalisés par les étudiants de la
@@ -343,7 +343,7 @@
 		<div class="carousel-item">
 		  <div class="carousel-caption row" style="padding: 14px">
 		    <div class="col-4">
-		      <img src="/img/comcyber.png" alt="Réserves de cyberdéfense" style="max-width:100%; max-height: 11vh">
+		      <img src="/img/comcyber.png" alt="Réserves de cyberdéfense" style="max-width:100%; max-height: 80px">
 		    </div>
 		    <p class="col-8 text-bold" style="padding: 3px 5px 10px 0; font-size: 111%">
 		      Avec le parrainage du commandement de la cyberdéfense française
diff --git a/dashboard/static/js/dashboard.js b/dashboard/static/js/dashboard.js
index 951180f6..d3786d15 100644
--- a/dashboard/static/js/dashboard.js
+++ b/dashboard/static/js/dashboard.js
@@ -14,28 +14,10 @@ angular.module("FICApp", ["ngSanitize", "ngAnimate"])
 		    return;
 		$scope.lasteventsetag = response.headers()["last-modified"];
 
-		var events = response.data;
-
-		var kEvents = {};
-		events.forEach(function(ev) {
-		    kEvents[ev.id] = ev;
-		});
-		var kxEvents = {}
-		$scope.events.forEach(function(ev) {
-		    kxEvents[ev.id] = ev;
-		});
-
-		var oldEvents = $(Object.keys(kxEvents)).not(Object.keys(kEvents)).get();
-		var newEvents = $(Object.keys(kEvents)).not(Object.keys(kxEvents)).get();
-
-		$scope.events.filter(function(val) {
-		    return !oldEvents.inArray(val.id);
-		});
-		newEvents.forEach(function(ev) {
-		    var event = kEvents[ev];
+		$scope.events = response.data;
+		$scope.events.forEach(function(event) {
 		    event.time = Date.parse(event.time);
 		    event.since = now - event.time;
-		    $scope.events.unshift(event);
 		});
 	    });
 	}
diff --git a/frontend/static/css/fic.css b/frontend/static/css/fic.css
index b87d5e0a..4e6efc71 100644
--- a/frontend/static/css/fic.css
+++ b/frontend/static/css/fic.css
@@ -28,7 +28,8 @@ body {
 .bg-public {
     background-image: url('../img/logo-epita-bw.png');
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: contain;
+    height: 100vh;
 }
 
 .card-img-top {
@@ -145,34 +146,37 @@ a:hover .teamname {
     text-align: right;
 }
 
-.repeated-item.ng-enter,
-.repeated-item.ng-leave {
-    transition-duration: 1s;
+#eventsList {
+    overflow:hidden;
+    max-height: 100vh
 }
 
-.repeated-item.ng-enter {
-    opacity: 0;
-    transform: translateY(-1000px);
+.swap-animation .alert {
+    margin-bottom: 0px;
 }
-
-.repeated-item.ng-enter.ng-enter-active {
+.swap-animation {
+    margin-bottom: 0.5rem;
+    max-height: 25vh;
+    transition: max-height 1.5s linear,opacity 1.0s linear,transform 0.5s linear;
+}
+.swap-animation.ng-enter {
+    transform: translateY(-25vh);
+    max-height: 0vh;
+}
+.swap-animation.ng-enter-active {
     opacity: 1;
     transform: translateY(0px);
+    max-height: 30vh;
 }
-
-.repeated-item.ng-leave.ng-leave-active {
+.swap-animation.ng-leave {
+    opacity: 1;
+    max-height: 30vh;
+    transform: translateY(0px);
+}
+.swap-animation.ng-leave-active {
     opacity: 0;
-}
-.col-sm-8 .repeated-item.ng-leave.ng-leave-active {
-    transform: translateX(-800px);
-}
-.col-sm-4 .repeated-item.ng-leave.ng-leave-active {
-    transform: translateX(800px);
-}
-
-.repeated-item.ng-enter-stagger {
-    transition-delay: 0.7s;
-    transition-duration: 0s;
+    transform: translateX(120vw);
+    max-height: 0vh;
 }
 
 .carousel-indicators {