fic/server
Archived
1
0
Fork 0
Code Issues Pull requests 10 Releases Wiki Activity

dashboard: improve animation

Browse source
This commit is contained in:
nemunaire 2018-12-06 03:48:23 +01:00
parent 2daa04bb5f
commit 93519e5f62
3 changed files with 49 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

42
dashboard/static/index.html
View file

@ -23,9 +23,9 @@
</div> </div>
</noscript> </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"> <div class="card-body text-light">
<h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1> <h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1>
<p class="lead text-justify"> <p class="lead text-justify">
@ -42,7 +42,7 @@
</div> </div>
</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"> <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> <h3 style="margin:0"><strong ng-bind="s.params.title"></strong></h3>
</div> </div>
@ -52,7 +52,7 @@
</div> </div>
</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"> <div class="card-body text-light">
<h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1> <h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1>
<p class="lead text-justify"> <p class="lead text-justify">
@ -72,7 +72,7 @@
</div> </div>
</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"> <div class="card-body text-light">
<h1 ng-if="s.params.title"><strong ng-bind="s.params.title"></strong></h1> <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> <p ng-if="s.params.lead" class="lead text-justify" ng-bind="s.params.lead"></p>
@ -81,7 +81,7 @@
</div> </div>
</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"> <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> <h3 style="margin:0" ng-bind="s.params.title"></h3>
</div> </div>
@ -92,7 +92,7 @@
<div class="card-body text-light" ng-if="s.params.html" ng-bind-html="s.params.html"></div> <div class="card-body text-light" ng-if="s.params.html" ng-bind-html="s.params.html"></div>
</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"> <div class="card-body text-light">
<p class="lead"> <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> <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> </table>
</div> </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"> <table class="table table-bordered table-striped table-sm">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
@ -173,7 +173,7 @@
</table> </table>
</div> </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"> <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" 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> <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 class="col-4">
<div ng-controller="EventsController"> <div ng-controller="EventsController" id="eventsList">
<div ng-repeat="e in events | limitTo: 7" class="repeated-item"> <div ng-repeat="e in events track by e.id" class="swap-animation" ng-cloak>
<div class="alert" ng-class="e.kind"> <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> <span ng-bind-html="e.txt"></span>
</div> </div>
</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="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 id="hours">{{ time.hours | time }}</span>
<span class="point">:</span> <span class="point">:</span>
<span id="min">{{ time.minutes | time }}</span> <span id="min">{{ time.minutes | time }}</span>
@ -299,16 +299,16 @@
</div> </div>
</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 slide" id="carousel-logos" data-ride="carousel" data-interval="10500">
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item"> <div class="carousel-item">
<div class="carousel-caption"> <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> <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:14vh"> <img src="/img/comcyber.png" alt="Réserves de cyberdéfense" style="height:110px">
</div> </div>
</div> </div>
<div class="carousel-item active"> <div class="carousel-item">
<div class="carousel-caption"> <div class="carousel-caption">
<h2 style="margin: 17px">Bienvenue au challenge forensic&nbsp;!</h2> <h2 style="margin: 17px">Bienvenue au challenge forensic&nbsp;!</h2>
</div> </div>
@ -329,10 +329,10 @@
</p> </p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item active">
<div class="carousel-caption row" style="padding: 5px"> <div class="carousel-caption row" style="padding: 5px">
<div class="col-4" style="padding-top: 4px;"> <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> </div>
<p class="col-8 text-bold" style="font-size: 110%"> <p class="col-8 text-bold" style="font-size: 110%">
Les challenges ont été réalisés par les étudiants de la Les challenges ont été réalisés par les étudiants de la
@ -343,7 +343,7 @@
<div class="carousel-item"> <div class="carousel-item">
<div class="carousel-caption row" style="padding: 14px"> <div class="carousel-caption row" style="padding: 14px">
<div class="col-4"> <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> </div>
<p class="col-8 text-bold" style="padding: 3px 5px 10px 0; font-size: 111%"> <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 Avec le parrainage du commandement de la cyberdéfense française

22
dashboard/static/js/dashboard.js
View file

@ -14,28 +14,10 @@ angular.module("FICApp", ["ngSanitize", "ngAnimate"])
return; return;
$scope.lasteventsetag = response.headers()["last-modified"]; $scope.lasteventsetag = response.headers()["last-modified"];
var events = response.data; $scope.events = response.data;
$scope.events.forEach(function(event) {
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];
event.time = Date.parse(event.time); event.time = Date.parse(event.time);
event.since = now - event.time; event.since = now - event.time;
$scope.events.unshift(event);
}); });
}); });
} }

48
frontend/static/css/fic.css
View file

@ -28,7 +28,8 @@ body {
.bg-public { .bg-public {
background-image: url('../img/logo-epita-bw.png'); background-image: url('../img/logo-epita-bw.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: contain;
height: 100vh;
} }
.card-img-top { .card-img-top {
@ -145,34 +146,37 @@ a:hover .teamname {
text-align: right; text-align: right;
} }
.repeated-item.ng-enter, #eventsList {
.repeated-item.ng-leave { overflow:hidden;
transition-duration: 1s; max-height: 100vh
} }
.repeated-item.ng-enter { .swap-animation .alert {
opacity: 0; margin-bottom: 0px;
transform: translateY(-1000px);
} }
.swap-animation {
.repeated-item.ng-enter.ng-enter-active { 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; opacity: 1;
transform: translateY(0px); transform: translateY(0px);
max-height: 30vh;
} }
.swap-animation.ng-leave {
.repeated-item.ng-leave.ng-leave-active { opacity: 1;
max-height: 30vh;
transform: translateY(0px);
}
.swap-animation.ng-leave-active {
opacity: 0; opacity: 0;
} transform: translateX(120vw);
.col-sm-8 .repeated-item.ng-leave.ng-leave-active { max-height: 0vh;
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;
} }
.carousel-indicators { .carousel-indicators {