Initialize page referential

live/app/router.js

@@ -32,6 +32,8 @@ export default Router.map(function () {
   this.route('index', { path: '/' });
   this.route('courses');
   this.route('placement-tests');
+  this.route('project', { path: '/projet' });
+  this.route('referential', { path: '/referentiel'});
 
   this.route('challenges.get-preview', { path: '/challenges/:challenge_id/preview' });
 
@@ -42,6 +44,5 @@ export default Router.map(function () {
 
   this.route('assessments.get-challenge', { path: '/assessments/:assessment_id/challenges/:challenge_id' });
   this.route('assessments.get-results', { path: '/assessments/:assessment_id/results' });
-  this.route('project', { path: '/projet' });
   this.route('assessments.get-comparison', { path: '/assessments/:assessment_id/results/compare/:answer_id/:index' });
 });

live/app/routes/referential.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

live/app/styles/app.scss

@@ -48,6 +48,10 @@
 @import 'project';
 @import 'courses/get-preview';
 
+
+
+@import 'pages/referential';
+
 /* XXX : every above is to be refactored, don't put any CSS properties right here */
 @media (min-width: 1200px) {
   .container {

live/app/styles/components/navbar-header.scss

@@ -3,6 +3,7 @@
   padding: 20px 0;
   float: none;
   color: $white;
+  width: 100%;
 }
 
 .navbar-header--white {

live/app/styles/pages/_referential.scss

@@ -0,0 +1,85 @@
+.referential-page {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  background-color: #fafafa;
+  color: $charcoal-grey;
+  text-rendering: optimizeLegibility;
+}
+
+.referential-page__header {
+  padding: 60px 20px;
+  width: 100%;
+  background-image: linear-gradient(to bottom, #446eff, #001f8d), linear-gradient(#3d68ff, #3d68ff);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0 50px;
+}
+
+.referential-page__header-text {
+  text-align: center;
+  margin: 0 auto;
+  color: $white;
+  font-family: $font-lato;
+  font-size: 32px;
+  font-weight: bold;
+  font-style: italic;
+  line-height: 1.2;
+  max-width: 940px;
+
+  @media (min-width: 992px) {
+    font-size: 36px;
+  }
+}
+
+.referential-domain {
+  max-width: 940px;
+  width: 100%;
+  padding: 20px 40px;
+}
+
+.referential-domain__title {
+  margin: 15px 0;
+  font-family: $font-raleway;
+  font-size: 40px;
+  font-weight: 500;
+}
+
+.domain-topic {
+  border-top: 1px solid #d8d8d8;
+  padding: 26px 0 5px;
+  margin-top: 30px;
+}
+
+.domain-topic__title {
+  font-family: $font-raleway;
+  font-size: 28px;
+  font-weight: 600;
+  color: $blue;
+  margin-top: 0;
+  margin-bottom: 17px;
+}
+
+.domain-topic__description {
+  font-family: $font-lato;
+  font-size: 20px;
+  margin-bottom: 20px;
+  color: $charcoal-grey;
+}
+
+.domain-topic__themes-title {
+  font-family: $font-lato;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin: 0 0 5px 0;
+}
+
+.domain-topic__themes-content {
+  font-family: $font-lato;
+  font-size: 16px;
+  font-weight: 300;
+  color: $charcoal-grey;
+}

live/app/styles/project.scss

@@ -69,9 +69,6 @@
   align-items: center;
   justify-content: center;
   margin: 0 0 50px;
-
-  @media (min-width: 992px) {
-  }
 }
 
 .project-page__header-text {

live/app/templates/referential.hbs

@@ -0,0 +1,61 @@
+<div class="referential-page">
+
+  {{navbar-header class="navbar-header--white"}}
+
+  <section class="referential-page__panel referential-page__header">
+    <h1 class="referential-page__header-text">Retrouver les 5 domaines de compétences que pix souhaite évaluer, en accord avec le référentiel européen DIGCOMP.</h1>
+  </section>
+
+  <section class="rounded-panel referential-domain referential-domain--information">
+    <header class="referential-domain__header">
+      <h2 class="referential-domain__title">Informations et données</h2>
+    </header>
+    <div class="referential-domain__topics">
+      <!-- 1 -->
+      <div class="domain-topic">
+        <h3 class="domain-topic__title">Mener une recherche et une veille d’information</h3>
+        <p class="domain-topic__description">Mener une recherche et une veille d’information pour répondre à un besoin d’information et se tenir au courant de l’actualité d’u sujet (avec un moteur de recherche, au sein d’un réseau social, par abonnement à des flux ou des lettres d’information, ou tout autre moyen.)</p>
+        <div class="domain-topic__themes">
+          <h4 class="domain-topic__themes-title">Thématiques associées</h4>
+          <p class="domain-topic__themes-content">Web et navigation ; Moteur de recherche et requête ; Veille d’information, flux encuration ; Evaluation de l’information ; Source et citation ; Gouvernance d’internet et ouverture du web ; Abondance de l’information, filtrage et personnalisation ; Recul critique face à l’information et aux médias ; Droit d’auteur.</p>
+        </div>
+      </div>
+      <!-- 2 -->
+      <div class="domain-topic">
+        <h3 class="domain-topic__title">Gérer des données</h3>
+        <p class="domain-topic__description">Stocker et organiser des données pour les retrouver, les conserver et en faciliter l’accès et la gestion (avec un gestionnaire de fichiers, un espace de stockage en ligne, des tags, des classeurs, des bases de données, un système d’information, etc.).</p>
+        <div class="domain-topic__themes">
+          <h4 class="domain-topic__themes-title">Thématiques associées</h4>
+          <p class="domain-topic__themes-content">Dossier et fichier ; Stockage et compression ; Transfert et synchronisation ; Recherche et méta-données ; Indexation sémantique et libellé (tag) ; Structuration des données ; Système d’information ; Localisation des données et droit applicable ; Modèles et stratégies économiques ; Sécurité du système d’information.</p>
+        </div>
+      </div>
+      <!-- 3 -->
+      <div class="domain-topic">
+        <h3 class="domain-topic__title">Traiter des données</h3>
+        <p class="domain-topic__description">Appliquer des traitements à des données pour les analyser et les interpréter (avec un tableur, un programme, un logiciel de traitement d’enquête, une requête calcul dans une base de données, etc.).</p>
+        <div class="domain-topic__themes">
+          <h4 class="domain-topic__themes-title">Thématiques associées</h4>
+          <p class="domain-topic__themes-content">Dossier et fichier ; Stockage et compression ; Transfert et synchronisation ; Recherche et méta-données ; Indexation sémantique et libellé (tag) ; Structuration des données ; Système d’information ; Localisation des données et droit applicable ; Modèles et stratégies économiques ; Sécurité du système d’information.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="rounded-panel referential-domain referential-domain--environment">
+    <header class="referential-domain__header">
+      <h2 class="referential-domain__title">Environnement numérique</h2>
+    </header>
+  </section>
+
+  <section class="rounded-panel referential-page__panel referential-page__panel--communication section-communication">
+  </section>
+
+  <section class="rounded-panel referential-page__panel referential-page__panel--content section-content">
+  </section>
+
+  <section class="rounded-panel referential-page__panel referential-page__panel--protection section-protection">
+  </section>
+
+</div>
+
+{{app-footer}}

live/tests/unit/routes/project-test.js

@@ -3,6 +3,7 @@ import { describe, it } from 'mocha';
 import { setupTest } from 'ember-mocha';
 
 describe('Unit | Route | project', function() {
+
   setupTest('route:project', {
     // Specify the other units that are required for this test.
     // needs: ['controller:foo']

live/tests/unit/routes/referential-test.js

@@ -0,0 +1,16 @@
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { setupTest } from 'ember-mocha';
+
+describe('Unit | Route | referential', function() {
+
+  setupTest('route:referential', {
+    // Specify the other units that are required for this test.
+    // needs: ['controller:foo']
+  });
+
+  it('exists', function() {
+    const route = this.subject();
+    expect(route).to.be.ok;
+  });
+});