frontend: redisign some elements

frontend/static/css/fic.css

@@ -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;
+}

frontend/static/index.html

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

frontend/static/views/defi-SE.html

@@ -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]}">
+	      <li ng-repeat="(k,exercice) in themes[current_theme].exercices" class="breadcrumb-item" ng-class="{active: k == current_exercice}">
-		<a ng-if="(k != current_exercice && !my.exercices[k])">{{ exercice.title }}</a>
+		<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>

frontend/static/views/defi.html

@@ -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]}">
+	      <li ng-repeat="(k,exercice) in themes[current_theme].exercices" class="breadcrumb-item" ng-class="{active: k == current_exercice}">
-		<a ng-if="(k != current_exercice && !my.exercices[k])">{{ exercice.title }}</a>
+		<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="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">
+	  <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 mb-2" ng-if="my.exercices[current_exercice].hints.length">
-	  <div class="card border-info">
 	    <div class="card-header bg-info text-white">
 	      <span class="glyphicon glyphicon-lamp" aria-hidden="true"></span> Indices
 	    </div>

frontend/static/views/theme.html

@@ -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 mb-5">
-  <div class="card niceborder" ng-repeat="(k,exercice) in themes[current_theme].exercices">
+  <ul class="list-group" ng-repeat="(k,exercice) in themes[current_theme].exercices">
-    <div class="card-body">
+    <li class="list-group-item">
-      <h5 class="card-title clearfix">
+      <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>