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

dashboard: improve general design (mostly events related)

Browse source
This commit is contained in:
nemunaire 2018-12-09 18:35:28 +01:00
parent 83ad6340b2
commit aa3750bb68
11 changed files with 70 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard/static/css/bootstrap.min.css vendored
View file

@ -1 +1 @@
../../../frontend/static/css/bootstrap.min.css
../../../admin/static/css/bootstrap.min.css

54
dashboard/static/index.html
View file

@ -25,8 +25,8 @@
<div ng-repeat="(k,s) in scene" class="repeatedd-item" style="margin-bottom: 15px;" ng-cloak>
<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 niceborder bg-dark" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'teams'">
<div class="card-body text-light text-indent">
<h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1>
<p class="lead text-justify">
Avant de vous installer, venez récupérer votre clef USB auprès
@ -35,7 +35,7 @@
</p>
<p class="lead text-justify">
Une fois connecté au réseau, contactez notre serveur sur&nbsp;:
<span style="display: block; font-size: 200%" class="text-center">
<span style="display: block; font-size: 200%; text-indent: 0;" class="text-center">
<a style="font-family: mono" href="https://fic.srs.epita.fr/"><span class="text-info">https://fic.srs.epita.fr/</span></a>
</span>
</p>
@ -47,13 +47,13 @@
<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 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 class="card-body text-center bg-dark text-light 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 bg-dark text-light" style="font-size: 450%;" ng-if="!duration || duration <= 0">{{ s.params.lead }}</div>
</div>
</div>
<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 niceborder bg-dark" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'public'">
<div class="card-body text-light text-indent">
<h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1>
<p class="lead text-justify">
Durant ce challenge, les équipes doivent <strong>remonter des scénarii
@ -72,7 +72,7 @@
</div>
</div>
<div class="card niceborder" ng-if="s.type == 'message' && !s.params.hide">
<div class="card niceborder bg-dark" 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>
@ -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 niceborder" ng-if="s.type == 'exercice' && !s.params.hide">
<div class="card niceborder bg-dark" 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>
@ -111,8 +111,8 @@
</div>
<div ng-if="s.type == 'table' && !s.params.hide">
<table class="table table-striped table-sm">
<thead>
<table class="table table-striped table-sm table-dark">
<thead class="bg-light">
<tr class="text-light">
<th class="frotated"></th>
<th class="rotated" ng-repeat="(tid,th) in themes" ng-if="s.params.themes.indexOf(tid-0) !== -1"><div class="bg-dark"><span>{{ th.name }}</span></div></th>
@ -129,7 +129,7 @@
</td>
</tr>
</tbody>
<tbody class="table-bordered bg-secondary text-dark" ng-if="s.params.kind == 'teams'">
<tbody class="table-bordered" ng-if="s.params.kind == 'teams'">
<tr ng-repeat="team in rank | orderBy: 'rank' | limitTo: s.params.limit: s.params.begin" ng-if="s.params.teams.indexOf(team.id-0) !== -1" ng-controller="TeamController">
<th class="text-center">{{ team.rank }}<sup ng-if="team.rank == 1">er</sup><sup ng-if="team.rank > 1">e</sup><br><span style="text-overflow: ellipsis; display: inline-block; width: 82px;overflow: hidden;">{{ team.name }}</span></th>
<td ng-repeat="(tid,th) in themes" class="text-center" ng-if="mystats && s.params.themes.indexOf(tid-0) !== -1">
@ -154,8 +154,8 @@
</table>
</div>
<div class="card niceborder" ng-if="s.type == 'rank' && !s.params.hide">
<table class="table table-bordered table-striped table-sm">
<div class="card niceborder bg-dark" ng-if="s.type == 'rank' && !s.params.hide">
<table class="table table-bordered table-striped table-sm table-dark">
<thead class="thead-dark">
<tr>
<th class="text-right">Place</th>
@ -173,12 +173,12 @@
</table>
</div>
<div class="card niceborder" ng-if="s.type == 'carousel' && !s.params.hide">
<div class="card niceborder bg-dark" 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>
</div>
<div class="card-body bg-primary">
<div class="card-body bg-dark">
<div class="carousel slide" data-interval="30000" style="height: 270px" autocarousel ng-if="s.params.kind == 'themes'">
<ol class="carousel-indicators">
@ -216,7 +216,7 @@
<div class="carousel-inner">
<div class="carousel-item" ng-repeat="(i,t) in pagesrank" ng-class="{active: $first}">
<div class="carousel-caption">
<table class="table table-bordered table-striped table-sm">
<table class="table table-bordered table-striped table-sm table-dark">
<thead class="thead-dark">
<tr>
<th class="text-right">Place</th>
@ -271,16 +271,20 @@
<div class="col-4">
<div ng-controller="EventsController" id="eventsList">
<div ng-controller="EventsController" id="eventsList" style="position: fixed">
<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 text-muted">{{ e.since | since }}</div>
<span ng-bind-html="e.txt"></span>
<div class="card card-sm niceborder" ng-class="e.kind">
<div class="card-header text-right">
<small class="text-muted">{{ e.since | since }}</small>
</div>
<div class="card-body text-indent text-justify">
<p class="card-text" ng-bind-html="e.txt"></p>
</div>
</div>
</div>
<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="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 text-dark" 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">
<span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span>
@ -299,7 +303,7 @@
</div>
</div>
<div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 110px" class="bg-primary">
<div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 110px" class="bg-dark">
<div class="carousel slide" id="carousel-logos" data-ride="carousel" data-interval="10500">
<div class="carousel-inner">
<div class="carousel-item">
@ -352,7 +356,7 @@
</div>
<div class="carousel-item">
<div class="carousel-caption">
<table class="table table-sm table-striped">
<table class="table table-sm table-striped table-dark">
<tbody>
<tr>
<td>{{ settings.start - 1800000 | date:"HH'&nbsp;h&nbsp;'mm" }}</td>

1
dashboard/static/js/dashboard.js
View file

@ -18,6 +18,7 @@ angular.module("FICApp", ["ngSanitize", "ngAnimate"])
$scope.events.forEach(function(event) {
event.time = Date.parse(event.time);
event.since = now - event.time;
event.kind = ["border-" + event.kind, "alert-" + event.kind];
});
});
}