frontend: redisign some elements

This commit is contained in:
nemunaire 2020-01-17 15:48:53 +01:00
parent 22c4835875
commit 08aa7d278c
5 changed files with 60 additions and 19 deletions

View File

@ -324,3 +324,38 @@ img {
.carousel-item, .carousel-caption {
height: inherit;
}
.page-header {
background-size: cover;
background-position: center;
margin-bottom: -15rem;
}
.page-header h1 {
text-shadow: 0 0 5px rgba(255,255,255,0.9)
}
.page-header h1, .page-header h1 a {
color: black;
}
.page-header h1 a:hover {
text-decoration: none;
}
.page-header h2 {
font-size: 100%;
text-shadow: 1px 1px 1px rgba(0,0,0,0.9)
}
.page-header h2, .page-header h2 a {
color: #4eaee6;
}
.page-header h1 {
padding-top: 4rem;
text-align: center;
}
.page-header h2 {
padding-bottom: 14rem;
text-align: center;
}
.page-header .headerfade {
background: linear-gradient(transparent 0%, rgb(233,236,239) 100%);
height: 3rem;
}

View File

@ -123,10 +123,17 @@
</div>
</div>
<div class="container page-header text-primary clearfix" ng-cloak>
<h1 ng-if="(current_theme)">{{ themes[current_theme].name }} <small class="authors" ng-if="themes[current_theme].authors" ng-bind-html="themes[current_theme].authors"></small></h1>
<h1 ng-if="(!current_theme && title)" ng-cloak>{{ title }} <small class="authors" ng-if="authors">{{ authors }}</small></h1>
<h1 ng-if="(!current_theme && !title)">{{ settings.title }} <small class="authors">{{ settings.authors }}</small></h1>
<div style="background-image: url({{ themes[current_theme].image }})" ng-if="(current_theme)" class="page-header">
<div class="container text-primary" ng-cloak>
<h1><a ng-href="{{ themes[current_theme].urlid }}" ng-bind="themes[current_theme].name"></a></h1>
<h2 ng-bind-html="themes[current_theme].authors"></h2>
</div>
<div class="headerfade"></div>
</div>
<div class="container text-primary clearfix" ng-if="!current_theme" ng-cloak>
<h1 ng-if="title" ng-cloak>{{ title }} <small class="authors" ng-if="authors">{{ authors }}</small></h1>
<h1 ng-if="!title">{{ settings.title }} <small class="authors">{{ settings.authors }}</small></h1>
</div>
<div class="container" ng-view>

View File

@ -1,7 +1,7 @@
<nav role="navigation">
<ol class="breadcrumb">
<li ng-repeat="(k,exercice) in themes[current_theme].exercices" class="breadcrumb-item" ng-class="{active: k == current_exercice, disabled: !my.exercices[k]}">
<a ng-if="(k != current_exercice && !my.exercices[k])">{{ exercice.title }}</a>
<li ng-repeat="(k,exercice) in themes[current_theme].exercices" class="breadcrumb-item" ng-class="{active: k == current_exercice}">
<a class="text-muted" ng-if="(k != current_exercice && !my.exercices[k])">{{ exercice.title }}</a>
<a ng-href="{{ themes[current_theme].urlid }}/{{ themes[current_theme].exercices[k].urlid }}" ng-if="(k != current_exercice && my.exercices[k])" ng-class="{'text-success': my.exercices[k].solved}">
{{ exercice.title }}
<span class="glyphicon glyphicon-gift" aria-hidden="true" ng-if="themes[current_theme].exercices[k].curcoeff > 1.0"></span>

View File

@ -1,7 +1,7 @@
<nav role="navigation">
<ol class="breadcrumb">
<li ng-repeat="(k,exercice) in themes[current_theme].exercices" class="breadcrumb-item" ng-class="{active: k == current_exercice, disabled: !my.exercices[k]}">
<a ng-if="(k != current_exercice && !my.exercices[k])">{{ exercice.title }}</a>
<li ng-repeat="(k,exercice) in themes[current_theme].exercices" class="breadcrumb-item" ng-class="{active: k == current_exercice}">
<a class="text-muted" ng-if="(k != current_exercice && !my.exercices[k])">{{ exercice.title }}</a>
<a ng-href="{{ themes[current_theme].urlid }}/{{ themes[current_theme].exercices[k].urlid }}" ng-if="(k != current_exercice && my.exercices[k])" ng-class="{'text-success': my.exercices[k].solved}">
{{ exercice.title }}
<span class="glyphicon glyphicon-gift" aria-hidden="true" ng-if="themes[current_theme].exercices[k].curcoeff > 1.0"></span>
@ -38,8 +38,8 @@
<div class="row">
<div class="col-xl mb-5" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].files.length)">
<div class="card">
<div class="col-xl mb-5" ng-if="(my.exercices[current_exercice] && (my.exercices[current_exercice].files.length || my.exercices[current_exercice].hints.length))">
<div class="card mb-2" ng-if="my.exercices[current_exercice].files.length">
<div class="card-header text-white">
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Téléchargements
</div>
@ -56,10 +56,8 @@
</a>
</div>
</div>
</div>
<div class="col-xl mb-5" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].hints.length)">
<div class="card border-info">
<div class="card border-info mb-2" ng-if="my.exercices[current_exercice].hints.length">
<div class="card-header bg-info text-white">
<span class="glyphicon glyphicon-lamp" aria-hidden="true"></span> Indices
</div>

View File

@ -3,10 +3,11 @@
<p class="text-justify" ng-bind-html="themes[current_theme].intro"></p>
</div>
<div class="card-group mb-5">
<div class="card niceborder" ng-repeat="(k,exercice) in themes[current_theme].exercices">
<div class="card-body">
<h5 class="card-title clearfix">
<div class="card niceborder mb-5">
<ul class="list-group" ng-repeat="(k,exercice) in themes[current_theme].exercices">
<li class="list-group-item">
<a ng-href="tags/{{tag}}" class="badge badge-pill badge-secondary ml-1 float-right" ng-repeat="tag in themes[current_theme].exercices[k].tags">#{{tag}}</a>
<h5 class="card-title">
<a ng-href="{{ themes[current_theme].urlid }}/{{ themes[current_theme].exercices[k].urlid }}" ng-if="my.exercices[k]">
{{ exercice.title }}
</a>
@ -14,10 +15,10 @@
<span class="glyphicon glyphicon-lock" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi"></span>
{{ exercice.title }}
</span>
<a ng-href="tags/{{tag}}" class="badge badge-pill badge-secondary ml-1 float-right" ng-repeat="tag in themes[current_theme].exercices[k].tags">#{{tag}}</a>
<span class="glyphicon glyphicon-ok" aria-hidden="true" ng-if="(my.team_id && my.exercices[k].solved)"></span>
<span class="glyphicon glyphicon-gift" aria-hidden="true" ng-if="themes[current_theme].exercices[k].curcoeff > 1.0" title="Un bonus est actuellement appliqué lors de la résolution de ce défi"></span>
</h5>
<p class="card-text" ng-bind-html="exercice.headline"></p>
</div>
</li>
</ul>
</div>