From 718b9d6a5cb395ca08f594a1f78bced66133984a Mon Sep 17 00:00:00 2001
From: TomCourant <tomcourant@gmail.com>
Date: Wed, 15 Nov 2017 11:31:23 +0100
Subject: [PATCH 1/6] add title and consigne

---
 README.md                                    | 60 ++++++++++++++------
 build/build.js                               | 28 ++++-----
 build/less/carte.less                        |  2 +-
 build/less/diaporama.less                    | 10 ++--
 build/less/main.less                         |  6 +-
 build/less/quiz.less                         | 10 ++--
 build/less/reset.less                        |  1 -
 build/less/switch.less                       |  2 +-
 build/less/utils.less                        |  3 +
 build/meta.js                                | 20 +++++--
 build/template/ptitlibe-carte/assets/app.js  |  2 +-
 build/template/ptitlibe-carte/index.html     | 14 +++--
 build/template/ptitlibe-diaporama/index.html | 14 +++--
 build/template/ptitlibe-quiz/index.html      | 14 +++--
 build/template/ptitlibe-switch/assets/app.js |  2 -
 build/template/ptitlibe-switch/index.html    | 14 +++--
 package-lock.json                            | 43 +++++++++-----
 17 files changed, 161 insertions(+), 84 deletions(-)

diff --git a/README.md b/README.md
index 31f3af0..df33c3f 100644
--- a/README.md
+++ b/README.md
@@ -11,31 +11,48 @@
 ## Installation
 Requière Node JS >= 8.5.0 : [télécharger et installer Node](https://nodejs.org/fr/)
 
+Installer browser-sync via : `npm install -g browser-sync`
+
 #### Install :
 
 ```bash
 $ npm install
 ```
-#### Vous aurez besoin de remplir un google sheet :
+## Nouvau module
+#### Vous aurez besoin de remplir un des google sheet :
 
-- [Spreadsheets Sample Quiz](https://docs.google.com/spreadsheets/d/19kqdeE6oRR5GQEAHaQ2zvhQghzq55aNYqcHM-ZK4Zyk/edit?usp=sharing)
-- [Spreadsheets Sample Diparorama](https://docs.google.com/spreadsheets/d/1AcNEA3-i9-_0DrukFVvOilf9yd2Y0rNS_hPBr-nQ9wQ/edit?usp=sharing)
-- [Spreadsheets Sample Switch](https://docs.google.com/spreadsheets/d/1KZ_IEqJwxv-W9T0X27ychB83bBDBU0Eqjd38wObjMn0/edit?usp=sharing)
+- [Spreadsheets Quiz](https://docs.google.com/spreadsheets/d/1nSlncTAbI2lMz9jGkI1i4_JCu1FIooMM5SIcPGD0718/edit)
+- [Spreadsheets Diparorama](https://docs.google.com/spreadsheets/d/14fZ31oTZM2AcMzjyXTN5PufubE4LaZjkW7aKI4dCgAM/edit)
+- [Spreadsheets Switch](https://docs.google.com/spreadsheets/d/1VZitfD0IGveJvwQayfflLTMwm3uQKMeVw8oS90Sz-uk/edit)
 
 _Une fois le google sheet remplis, il faut le publié : **Fichier / Publié pour le Web**_
 
-**Et de copier son ID**
+#### De copier son ID :
+
+docs.google.com/spreadsheets/d/**1VZitfD0IGveJvwQayfflLTMwm3uQKMeVw8oS90Sz-uk**/edit#gid=0
+
+- Pour les Quiz : **1nSlncTAbI2lMz9jGkI1i4_JCu1FIooMM5SIcPGD0718**
+- Pour les Diaporama : **14fZ31oTZM2AcMzjyXTN5PufubE4LaZjkW7aKI4dCgAM**
+- Pour les Switch : **1VZitfD0IGveJvwQayfflLTMwm3uQKMeVw8oS90Sz-uk**
 
-#### Ansi que les 3 couleurs du numéro en cours :
+#### Ansi que des 3 couleurs du numéro en cours :
 
-- Main : Color 1
-- Side : Color 2
-- Ligth : Color 4
+[Le lien des settings dans le quai pour les couleurs](http://quai.liberation.fr/bilbo/ptitlibemodels/ptitlibesettings/)
+
+- Color 4
+- Color 1
+- Color 2
 
 
 ## Utilisation
 
-#### Build :
+Ouvrir le repertoire ptit-libe-modules-master dans la console
+
+**Sur PC :** `[MAJ + Clique droit]` / Ouvrir une fenêtre de commandes ici
+
+**Sur Mac :** Ouvrire l'application terminal, taper : `cd [ESPACE]` et glisser le dossier dans la fenêtre du terminal, taper `[ENTRER]`
+
+#### Lancer la création d'un nouveaux module :
 
 ```bash
 $ npm run build
@@ -47,26 +64,33 @@ $ npm run build
 ? Numéro du Ptit Libé
 ? Quel type de module? (Quiz, Diaporama, Carte cliquable, Switch bouton)
 ? ID du sheet
-? Est ce qu\'il y a plusieur feuilles dans le sheet ? (Yes/No)
+? Est ce qu'il y a plusieur feuilles dans le sheet ? (Yes/No)
 ? Nom de la feuille à traiter
 ? Nom du fichier svg (pour les modules de type carte)
-? Couleur principale (1)
-? Couleur secondaire (2)
-? Couleur opacité resuite (4)
+? Titre
+? Consigne
+? Couleur 4
+? Couleur 1
+? Couleur 2
 ```
 _Si tous se passe bien vous allez voir le logo Ptit Libé ainsi que les instruction pour la mise en ligne._
 
 ## Mise en ligne
 Le nouveau module à été crée dans le dossier `./dist/{numero}/{dossier}/`
 
-le `{numero}` et le `{dossier}` s'afficheron dans le console
+le `{numero}` et le `{dossier}` s'afficheron dans la console
 
 1. Si c'est un module de type carte, ajouter le fichier svg dans : `./dist/{numero}/{dossier}/assets/`
-2. Pour tester le module taper : `browser-sync start -s "./dist/{numero}/{dossier}/"`
+2. Pour tester le module taper : `browser-sync start -s "./dist/{numero}/{dossier}/"` (pour sortir du test taper `[Ctrl + C]` sur le clavier)
 3. Placer le module sur le ftp dans : `ptit-libe/modules/{numero}/{dossier}/`
-4. Copier la balise iframe dans le corps de l'article : `balise-iframe`
+4. Copier la balise iframe dans le corps de l'article : `<iframe src="https:/statics.liberation.fr/apps/ptit-libe/modules/{numero}/{dossier}" class="fit-content" width="100%"></iframe>`
+
+
+## ToDo
 
-**Et voila !**
+- Tester les ID avec accents dans AI
+- Upload des fichier via ssh
+- Crée une interface pour remplacer l'utilisation de la console
 
 
 ## License
diff --git a/build/build.js b/build/build.js
index d7f5c3c..016f91b 100644
--- a/build/build.js
+++ b/build/build.js
@@ -8,7 +8,7 @@ const fs = require('fs'),
       handlebars = require('handlebars'),
       inquirer = require('inquirer'),
       less = require('less'),
-      _ = require('lodash');
+      _ = require('lodash')
 
 var questions = require('./meta'),
     data, src, dest
@@ -18,7 +18,7 @@ var slugify = function (str) {
   return slug
 }
 
-console.log('\n* Start Process *\n');
+console.log('\n* Start Process *\n')
 
 inquirer.prompt(questions).then(function (answers) {
   answers.slug = slugify(answers.name)
@@ -43,19 +43,19 @@ function buildFiles () {
   
   // ASSETS
   copy(src + 'assets/**', dist + 'assets/', function(err, files) {
-    if (err) throw err;
+    if (err) throw err
     // console.log('   => build html')
     // console.log('   => build js')
     buildCss(function() {
       if (data.module !== 'carte') buildJson()
       else printResult()
     })
-  });
+  })
 }
 
 function buildCss (next) {
   // CSS
-  var mainLess = fs.readFileSync('./build/less/main.less').toString();
+  var mainLess = fs.readFileSync('./build/less/main.less').toString()
   less.render(mainLess, {
     paths: ['./build/less'],
     filename: 'main.less',
@@ -67,10 +67,10 @@ function buildCss (next) {
     }
   })
   .then(function(output) {
-    fs.writeFileSync(dist + 'assets/styles.css', output.css);
+    fs.writeFileSync(dist + 'assets/styles.css', output.css)
     // console.log('   => build css')
     next()
-  });
+  })
 
 }
 
@@ -107,15 +107,15 @@ function buildJson () {
     }
 
     fs.writeFile(dist + 'assets/' + data.module+'.json', JSON.stringify(result), function (err) {
-      if (err) console.log(err);
-      // console.log('   => build json');
+      if (err) console.log(err)
+      // console.log('   => build json')
       printResult()
-    });
+    })
   })
   .catch(function(err) {
-      console.log(err.message);
-      console.log(err.stack);
-  });
+      console.log(err.message)
+      console.log(err.stack)
+  })
 
 }
 
@@ -165,5 +165,5 @@ function printResult () {
   console.log('=> Et l\'iframe pour l\'article :')
   console.log('   <iframe src="http://www.liberation.fr/apps/ptit-libe/modules/' + data.path + '" class="fit-content" width="100%"></iframe> \n')
 
-  console.log('\n* End Process *\n');
+  console.log('\n* End Process *\n')
 }
diff --git a/build/less/carte.less b/build/less/carte.less
index b3031f3..70794e4 100644
--- a/build/less/carte.less
+++ b/build/less/carte.less
@@ -1,3 +1,3 @@
 /*! Carte */
-#carte {max-width:600px; margin: 0 auto 20px;}
+#carte {position: relative;}
 .svgwithlabels__label {display: inline-block;padding: .75em 3em;margin: 0 auto;border-radius: .5em;background-color: @mainColor;opacity:0;font-size: 1.2em;color: #fff;}
\ No newline at end of file
diff --git a/build/less/diaporama.less b/build/less/diaporama.less
index 83d45a8..073ba71 100644
--- a/build/less/diaporama.less
+++ b/build/less/diaporama.less
@@ -1,12 +1,12 @@
 /*! Diaporalma */
-.diaporama {position: relative; max-width: 600px; margin: 0 auto 20px;}
+.diaporama {position: relative;}
 .slider {position: relative; width: 100%; overflow: hidden;}
-.diaporama__nav {position: absolute;top: 50%;right: -50px;width: 40px;height: 40px;margin-top: -20px;cursor: pointer;overflow:hidden;background-color: @sideColor;border-radius: 50%;}
+.diaporama__nav {position: absolute;top: 50%;right: -80px;width: 40px;height: 40px;margin-top: -20px;cursor: pointer;overflow:hidden;background-color: @sideColor;border-radius: 50%;}
 .diaporama__nav:before{content:''; height:11px; width:11px; display:block; border:3px solid #000; border-left-width:0; border-top-width:0; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); position:absolute; top:15px; right:12px;}
 .diaporama__nav:after{content:''; height:3px; width:18px; display:block; background:#000; position:absolute; top:19px; left:10px;}
-.diaporama__nav.diaporama__prev {left: -50px; right: auto;-moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
+.diaporama__nav.diaporama__prev {left: -80px; right: auto;-moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
 .diaporama__pagination {position: absolute; top: 0; left: 0; right: 0; text-align: center;}
-.diaporama__pagination .btn {display: inline-block; margin: 5px; width: 10px; height: 10px; background: #FFF; border-radius: 10px; border: 1px solid @sideColor;}
+.diaporama__pagination .btn {display: inline-block; margin: 5px; width: 10px; height: 10px; background: #FFF; border-radius: 10px; border: 1px solid @sideColor; cursor: pointer;}
 .diaporama__pagination .btn.active {background: @sideColor;}
 .slide {padding-top: 25px; text-align: left;}
 .slide-right-enter-active {
@@ -49,7 +49,7 @@
   to { -webkit-transform: translateX(100%); transform: translateX(100%); }
 }
 
-@media (max-width: 768px) {
+@media only screen and (max-width: 800px) {
   .diaporama__nav {right: -20px;}
   .diaporama__nav.diaporama__prev {left: -20px;}
 }
\ No newline at end of file
diff --git a/build/less/main.less b/build/less/main.less
index 1a45d73..cd8e908 100644
--- a/build/less/main.less
+++ b/build/less/main.less
@@ -14,6 +14,10 @@
 .ligthColor {background-color: @ligthColor;}
 
 /*! App */
-#app {position: relative; width: 100%; padding: 2em 30px; background: @ligthColor;}
+#app {position: relative; width: 80%; max-width: 1000px; margin: 0 auto; padding: 20px; background: @ligthColor;}
+
+@media only screen and (max-width: 800px) {
+  #app {width: 100%; padding: 20px;}
+}
 
 @import "@{module}.less";
\ No newline at end of file
diff --git a/build/less/quiz.less b/build/less/quiz.less
index be161ff..503f63d 100644
--- a/build/less/quiz.less
+++ b/build/less/quiz.less
@@ -1,16 +1,16 @@
 /*! Quiz */
-.quiz {max-width: 600px; margin: 0 auto 20px;}
+.quiz {position: relative;}
 .slider-wrap {position: relative; height: 10px; background-color: @ligthColor;}
 .slider {position: absolute; top: 0; left: 0; width: 50%; height: 10px; background-color: @sideColor;}
-.quiz-header {padding: 1em; color: #fff; background-color: @mainColor;}
+.quiz-header {padding: 1em; color: #fff; background-color: @mainColor; letter-spacing: 0.1em;}
 .quiz-header div:nth-child(1) {font-size: 1.1em;}
 .quiz-header div:nth-child(2) {font-size: 2em;}
-.quiz-main {border: 10px solid @ligthColor;}
 .current-reponses {overflow: hidden; background-color: @ligthColor;}
 .isImage .image {position: relative; float: left; width: 19%; height: 230px; margin-right: 1%; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: contain;}
 .isImage .reponse {float: left; width: 80%;}
 .reponse {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; margin-bottom: 10px; padding: 15px 5px; font-size: 1.3em; line-height: 40px; color: @mainColor; text-align: left; background-color: #fff;}
 .reponse:hover {background-color: @sideColor; color: #fff;}
+.reponse:first-child {margin-top: 10px;}
 .reponse:last-child {margin-bottom: 0;}
 .text {display: inline-block; vertical-align: middle; line-height: normal; -ms-flex-item-align: center; align-self: center;}
 .arrow {height:40px; min-width:40px; margin-right: 10px; display:block; position:relative; overflow:hidden; background-color: @sideColor; border-radius: 50%; -ms-flex-item-align: center; align-self: center;}
@@ -30,7 +30,7 @@
 .quiz-end p {max-width: 600px; margin: 10px auto; font-size: 1.4em;}
 .quiz-end p span {display: block;}
 .quiz-end .prev,
-.quiz-end .next {width: 50%;}
+.quiz-end .next {float: none; width: 100%;}
 .more {margin-top: 2em;}
 .more p {font-size: 1em; text-transform: uppercase;}
 .more-wrap {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: distribute; justify-content: space-around; padding: .5em; background-color: #f4f4f4;}
@@ -39,7 +39,7 @@
 .more-box a span {display: block;}
 .more-box a span:first-child {font-size: 1.2em;}
 
-@media (max-width: 768px) {
+@media only screen and (max-width: 800px) {
 .quiz-header {font-size: .75em;}
 .isImage .image {float: none; width: 100%; height: 230px; margin-right: 0; margin-bottom: 10px;}
 .isImage .reponse {float: none; width: 100%;}
diff --git a/build/less/reset.less b/build/less/reset.less
index 990086d..9d61088 100644
--- a/build/less/reset.less
+++ b/build/less/reset.less
@@ -6,7 +6,6 @@ html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-t
 *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
 html, body {margin: 0;padding: 0;}
 html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
-html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
 body {position: relative; font-family:'syntheselibeweb', Verdana, Geneva, sans-serif;font-size:1em;color:#000;background:#ffffff;}
 h1, h2, h3, h4, h5, h6 {font-style: normal; font-weight: normal;}
 li {list-style-type:none;}
diff --git a/build/less/switch.less b/build/less/switch.less
index c050f9c..84fb711 100644
--- a/build/less/switch.less
+++ b/build/less/switch.less
@@ -1,5 +1,5 @@
 /*! Switch */
-.switch {position: relative; max-width: 600px; margin: 0 auto 20px;}
+.switch {position: relative;}
 .switch img {width: 100%;}
 
 .control-switch {margin-top: 1em; overflow: hidden;}
diff --git a/build/less/utils.less b/build/less/utils.less
index ad471b5..293b9dd 100644
--- a/build/less/utils.less
+++ b/build/less/utils.less
@@ -11,6 +11,9 @@
 .center-block {display: block; margin-left: auto; margin-right: auto;}
 .libesansrond {font-family: 'libesansrond-regular', sans-serif; letter-spacing: 0.05em;}
 
+.module-title {margin-top: 0; font-size: 1em; line-height: 1.4em; text-align: center; color: @mainColor; text-transform: uppercase;}
+.module-sub-title {font-size: 1.1em;}
+
 .libePink {color: #e61e49;}
 .animation {
 -webkit-transition: all 0.5s ease-in-out;
diff --git a/build/meta.js b/build/meta.js
index 6701189..99ac56d 100644
--- a/build/meta.js
+++ b/build/meta.js
@@ -26,7 +26,7 @@ module.exports = [
       {
         name: 'Quiz',
         value: 'quiz',
-        short: 'QUiz'
+        short: 'Quiz'
       },
       {
         name: 'Diaporama',
@@ -81,22 +81,34 @@ module.exports = [
       return answers.module === 'carte' 
     }
   },
+  {
+    type: 'input',
+    name: 'title',
+    message: 'Titre',
+    default: false
+  },
+  {
+    type: 'input',
+    name: 'subTitle',
+    message: 'Consigne',
+    default: false
+  },
   {
     type: 'input',
     name: 'mainColor',
-    message: 'Couleur principale (1)',
+    message: 'Couleur 4',
     validate: (input) => required(input)
   },
   {
     type: 'input',
     name: 'sideColor',
-    message: 'Couleur secondaire (2)',
+    message: 'Couleur 1',
     validate: (input) => required(input)
   },
   {
     type: 'input',
     name: 'ligthColor',
-    message: 'Couleur opacité resuite (4)',
+    message: 'Couleur 2',
     default: '#ffffff',
     validate: (input) => required(input)
   }
diff --git a/build/template/ptitlibe-carte/assets/app.js b/build/template/ptitlibe-carte/assets/app.js
index 6faf4e0..f08fd2f 100644
--- a/build/template/ptitlibe-carte/assets/app.js
+++ b/build/template/ptitlibe-carte/assets/app.js
@@ -9,7 +9,7 @@ document.querySelector('#carte_cliquable').addEventListener('load', function() {
   [].slice.call(svg.querySelectorAll('*[id]')).forEach(function(element) {
       if (['path', 'polygon', 'g'].indexOf(element.tagName) >= 0) {
           var name = element.getAttribute('id').replace(/_\d+_/g, '').replace(/_/g, ' ');
-
+          element.style.cursor = 'pointer';
           element.addEventListener('click', function() {
               [].slice.call(svg.querySelectorAll('*[id]')).forEach(function(el) {
                 if (['path', 'polygon'].indexOf(element.tagName) >= 0) { el.style['fill'] = colors.off; }
diff --git a/build/template/ptitlibe-carte/index.html b/build/template/ptitlibe-carte/index.html
index e0fdbb6..2ce080c 100644
--- a/build/template/ptitlibe-carte/index.html
+++ b/build/template/ptitlibe-carte/index.html
@@ -8,20 +8,26 @@
         <meta name="description" content="Tout savoir sur les dernières actualités politiques, monde, société, sports, écologie avec le journal en ligne Libération.">
         <meta name="keywords" content="actualités, news">
 
-        <link rel="shortcut icon" href="http://www.liberation.fr/favicon.ico">
-        <link rel="shortcut icon" href="http://www.liberation.fr/favicon.png">
+        <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.ico">
+        <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.png">
 
         <!-- Vendor -->
         <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
         <script type="text/javascript" src="http://www.liberation.fr/apps/ptit-libe/assets/iframeResizer.contentWindow.min.js"></script>
         
         <!-- Fonts & Styles -->
-        <link type="text/css" rel="stylesheet" href="http://s1.libe.com/newsite/css/fonts.css">
-        <link type="text/css" rel="stylesheet" href="http://www.liberation.fr/apps/ptit-libe/libesansrond.css">
+        <link type="text/css" rel="stylesheet" href="https://statics.liberation.fr/newsite/css/fonts.css">
+        <link type="text/css" rel="stylesheet" href="https://statics.liberation.fr/apps/ptit-libe/libesansrond.css">
         <link type="text/css" rel="stylesheet" href="assets/styles.css">
     </head>
     <body>
         <div id="app">
+            {{#if title}}
+            <p class="module-title libesansrond">{{title}}</p>
+            {{/if}}
+            {{#if subTitle}}
+            <p class="module-sub-title">{{subTitle}}</p>
+            {{/if}}
             <div id="carte" class="as-p text-center">
                 <object id="carte_cliquable" data="assets/{{ imageSvg }}" type="image/svg+xml"></object>
                 <div id="mapName" class="svgwithlabels__label libesansrond ng-binding"></div>
diff --git a/build/template/ptitlibe-diaporama/index.html b/build/template/ptitlibe-diaporama/index.html
index 10defcb..e75a6d4 100644
--- a/build/template/ptitlibe-diaporama/index.html
+++ b/build/template/ptitlibe-diaporama/index.html
@@ -8,8 +8,8 @@
         <meta name="description" content="Tout savoir sur les dernières actualités politiques, monde, société, sports, écologie avec le journal en ligne Libération.">
         <meta name="keywords" content="actualités, news">
 
-        <link rel="shortcut icon" href="http://www.liberation.fr/favicon.ico">
-        <link rel="shortcut icon" href="http://www.liberation.fr/favicon.png">
+        <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.ico">
+        <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.png">
         
         <!-- Vendor -->
         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
@@ -17,13 +17,19 @@
         <script type="text/javascript" src="http://www.liberation.fr/apps/ptit-libe/assets/iframeResizer.contentWindow.min.js"></script>
 
         <!-- Fonts & Styles -->
-        <link type="text/css" rel="stylesheet" href="http://s1.libe.com/newsite/css/fonts.css">
-        <link type="text/css" rel="stylesheet" href="http://www.liberation.fr/apps/ptit-libe/libesansrond.css">
+        <link type="text/css" rel="stylesheet" href="https://statics.liberation.fr/newsite/css/fonts.css">
+        <link type="text/css" rel="stylesheet" href="https://statics.liberation.fr/apps/ptit-libe/libesansrond.css">
         <link type="text/css" rel="stylesheet" href="assets/styles.css">
 
     </head>
     <body>
       <div id="app">
+        {{#if title}}
+        <p class="module-title libesansrond">{{title}}</p>
+        {{/if}}
+        {{#if subTitle}}
+        <p class="module-sub-title">{{subTitle}}</p>
+        {{/if}}
         <div class="diaporama">
           <div class="slider">
             <div v-for="(slide, i) in slides">
diff --git a/build/template/ptitlibe-quiz/index.html b/build/template/ptitlibe-quiz/index.html
index ce4e081..81045e8 100644
--- a/build/template/ptitlibe-quiz/index.html
+++ b/build/template/ptitlibe-quiz/index.html
@@ -8,8 +8,8 @@
         <meta name="description" content="Tout savoir sur les dernières actualités politiques, monde, société, sports, écologie avec le journal en ligne Libération.">
         <meta name="keywords" content="actualités, news">
 
-        <link rel="shortcut icon" href="http://www.liberation.fr/favicon.ico">
-        <link rel="shortcut icon" href="http://www.liberation.fr/favicon.png">
+        <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.ico">
+        <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.png">
         
         <!-- Vendor -->
         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
@@ -17,13 +17,19 @@
         <script type="text/javascript" src="http://www.liberation.fr/apps/ptit-libe/assets/iframeResizer.contentWindow.min.js"></script>
 
         <!-- Fonts & Styles -->
-        <link type="text/css" rel="stylesheet" href="http://s1.libe.com/newsite/css/fonts.css">
-        <link type="text/css" rel="stylesheet" href="http://www.liberation.fr/apps/ptit-libe/libesansrond.css">
+        <link type="text/css" rel="stylesheet" href="https://statics.liberation.fr/newsite/css/fonts.css">
+        <link type="text/css" rel="stylesheet" href="https://statics.liberation.fr/apps/ptit-libe/libesansrond.css">
         <link type="text/css" rel="stylesheet" href="assets/styles.css">
 
     </head>
     <body>
       <div id="app">
+        {{#if title}}
+        <p class="module-title libesansrond">{{title}}</p>
+        {{/if}}
+        {{#if subTitle}}
+        <p class="module-sub-title">{{subTitle}}</p>
+        {{/if}}
         <div class="quiz">
           <div class="quiz-start" v-show="!isEnd()">
             <div class="slider-wrap">
diff --git a/build/template/ptitlibe-switch/assets/app.js b/build/template/ptitlibe-switch/assets/app.js
index 5b88853..9478ff6 100644
--- a/build/template/ptitlibe-switch/assets/app.js
+++ b/build/template/ptitlibe-switch/assets/app.js
@@ -11,9 +11,7 @@ function init() {
     },
     created () {
       this.$http.get('assets/switch.json').then(function(res) {
-        console.log(res.body)
         this.switchs = res.body
-        console.log(this.switchs)
       }, function() {
         console.log('error');
       });
diff --git a/build/template/ptitlibe-switch/index.html b/build/template/ptitlibe-switch/index.html
index ec65681..0e11b29 100644
--- a/build/template/ptitlibe-switch/index.html
+++ b/build/template/ptitlibe-switch/index.html
@@ -8,8 +8,8 @@
         <meta name="description" content="Tout savoir sur les dernières actualités politiques, monde, société, sports, écologie avec le journal en ligne Libération.">
         <meta name="keywords" content="actualités, news">
 
-        <link rel="shortcut icon" href="http://www.liberation.fr/favicon.ico">
-        <link rel="shortcut icon" href="http://www.liberation.fr/favicon.png">
+        <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.ico">
+        <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.png">
         
         <!-- Vendor -->
         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
@@ -17,13 +17,19 @@
         <script type="text/javascript" src="http://www.liberation.fr/apps/ptit-libe/assets/iframeResizer.contentWindow.min.js"></script>
 
         <!-- Fonts & Styles -->
-        <link type="text/css" rel="stylesheet" href="http://s1.libe.com/newsite/css/fonts.css">
-        <link type="text/css" rel="stylesheet" href="http://www.liberation.fr/apps/ptit-libe/libesansrond.css">
+        <link type="text/css" rel="stylesheet" href="https://statics.liberation.fr/newsite/css/fonts.css">
+        <link type="text/css" rel="stylesheet" href="https://statics.liberation.fr/apps/ptit-libe/libesansrond.css">
         <link type="text/css" rel="stylesheet" href="assets/styles.css">
 
     </head>
     <body>
       <div id="app">
+        {{#if title}}
+        <p class="module-title libesansrond">{{title}}</p>
+        {{/if}}
+        {{#if subTitle}}
+        <p class="module-sub-title">{{subTitle}}</p>
+        {{/if}}
         <div class="switch">
           <div class="img-wrap">
             <transition name="fade">
diff --git a/package-lock.json b/package-lock.json
index a633c73..3058022 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ptit-libe-modules",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2116,14 +2116,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -2134,6 +2126,14 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -2540,6 +2540,11 @@
         "request": "2.81.0"
       }
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handlebars": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.10.tgz",
@@ -4562,12 +4567,6 @@
         "limiter": "1.1.2"
       }
     },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-      "dev": true
-    },
     "string-template": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
@@ -4601,6 +4600,12 @@
         }
       }
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+      "dev": true
+    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@@ -4957,6 +4962,14 @@
         "replace-ext": "0.0.1"
       }
     },
+    "vue-touch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-touch/-/vue-touch-1.1.0.tgz",
+      "integrity": "sha1-9p2jtL8DPz97z1hkARprTUu1lrk=",
+      "requires": {
+        "hammerjs": "2.0.8"
+      }
+    },
     "weinre": {
       "version": "2.0.0-pre-I0Z7U9OV",
       "resolved": "https://registry.npmjs.org/weinre/-/weinre-2.0.0-pre-I0Z7U9OV.tgz",

From cfecf05a67fc48ebc269807aba9c0701de6d8644 Mon Sep 17 00:00:00 2001
From: TomCourant <tomcourant@gmail.com>
Date: Wed, 15 Nov 2017 11:46:48 +0100
Subject: [PATCH 2/6] remove bash on code

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index df33c3f..4977731 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ Installer browser-sync via : `npm install -g browser-sync`
 
 #### Install :
 
-```bash
+```
 $ npm install
 ```
 ## Nouvau module
@@ -54,12 +54,12 @@ Ouvrir le repertoire ptit-libe-modules-master dans la console
 
 #### Lancer la création d'un nouveaux module :
 
-```bash
+```
 $ npm run build
 ```
 #### Répondre aux differentes questions :
 
-```bash
+```
 ? Nom du module
 ? Numéro du Ptit Libé
 ? Quel type de module? (Quiz, Diaporama, Carte cliquable, Switch bouton)

From dbee1e22e2350ad11683f217fd1c47d487d26f53 Mon Sep 17 00:00:00 2001
From: TomCourant <tomcourant@gmail.com>
Date: Thu, 16 Nov 2017 18:10:24 +0100
Subject: [PATCH 3/6] remove HEAD file

---
 build/template/ptitlibe-diaporama/index.html | 4 ----
 build/template/ptitlibe-quiz/index.html      | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/build/template/ptitlibe-diaporama/index.html b/build/template/ptitlibe-diaporama/index.html
index 96020b0..ea53029 100644
--- a/build/template/ptitlibe-diaporama/index.html
+++ b/build/template/ptitlibe-diaporama/index.html
@@ -10,11 +10,7 @@
 
         <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.ico">
         <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.png">
-<<<<<<< HEAD
-        
-=======
 
->>>>>>> 701dbc0b9541d803c43d9a92afd3e428e95a5237
         <!-- Vendor -->
         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
diff --git a/build/template/ptitlibe-quiz/index.html b/build/template/ptitlibe-quiz/index.html
index 4b23443..2f18ee7 100644
--- a/build/template/ptitlibe-quiz/index.html
+++ b/build/template/ptitlibe-quiz/index.html
@@ -10,11 +10,7 @@
 
         <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.ico">
         <link rel="shortcut icon" href="https://statics.liberation.fr/ptitlibe/favicon.png">
-<<<<<<< HEAD
-        
-=======
 
->>>>>>> 701dbc0b9541d803c43d9a92afd3e428e95a5237
         <!-- Vendor -->
         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>

From 21d2b0a25a2779d4293e8acfb2b08659c03e6323 Mon Sep 17 00:00:00 2001
From: TomCourant <tomcourant@gmail.com>
Date: Thu, 16 Nov 2017 18:15:04 +0100
Subject: [PATCH 4/6] remove background on #app

---
 build/less/quiz.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/build/less/quiz.less b/build/less/quiz.less
index 2a60f7e..ae46f69 100644
--- a/build/less/quiz.less
+++ b/build/less/quiz.less
@@ -1,4 +1,3 @@
-#app {background: #ffffff;}
 /*! Quiz */
 .quiz {position: relative;}
 .slider-wrap {position: relative; height: 10px; background-color: @ligthColor;}

From c5cdd55cebcf3f70490f0ad8d0b31fcbac801b04 Mon Sep 17 00:00:00 2001
From: TomCourant <tomcourant@gmail.com>
Date: Mon, 20 Nov 2017 11:41:49 +0100
Subject: [PATCH 5/6] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4977731..edf5965 100644
--- a/README.md
+++ b/README.md
@@ -83,7 +83,7 @@ le `{numero}` et le `{dossier}` s'afficheron dans la console
 1. Si c'est un module de type carte, ajouter le fichier svg dans : `./dist/{numero}/{dossier}/assets/`
 2. Pour tester le module taper : `browser-sync start -s "./dist/{numero}/{dossier}/"` (pour sortir du test taper `[Ctrl + C]` sur le clavier)
 3. Placer le module sur le ftp dans : `ptit-libe/modules/{numero}/{dossier}/`
-4. Copier la balise iframe dans le corps de l'article : `<iframe src="https:/statics.liberation.fr/apps/ptit-libe/modules/{numero}/{dossier}" class="fit-content" width="100%"></iframe>`
+4. Copier la balise iframe dans le corps de l'article : `<iframe src="https:/statics.liberation.fr/apps/ptit-libe/modules/{numero}/{dossier}" class="fit-content" width="100%"></iframe>` dans une balise p avec la calss "full-width"
 
 
 ## ToDo

From 0761c96da045b02ad3acf464edd0f74393fee79c Mon Sep 17 00:00:00 2001
From: TomCourant <tomcourant@gmail.com>
Date: Mon, 20 Nov 2017 11:42:36 +0100
Subject: [PATCH 6/6] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index edf5965..7f5cd82 100644
--- a/README.md
+++ b/README.md
@@ -89,6 +89,7 @@ le `{numero}` et le `{dossier}` s'afficheron dans la console
 ## ToDo
 
 - Tester les ID avec accents dans AI
+- ajouter les couleurs via api
 - Upload des fichier via ssh
 - Crée une interface pour remplacer l'utilisation de la console