Merge branch 'master' into feature/ssl-1

README.md

@@ -15,22 +15,29 @@ 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
 
-#### Ansi que les 3 couleurs du numéro en cours :
+- Pour les Quiz : **1nSlncTAbI2lMz9jGkI1i4_JCu1FIooMM5SIcPGD0718**
+- Pour les Diaporama : **14fZ31oTZM2AcMzjyXTN5PufubE4LaZjkW7aKI4dCgAM**
+- Pour les Switch : **1VZitfD0IGveJvwQayfflLTMwm3uQKMeVw8oS90Sz-uk**
+
+#### Ansi que des 3 couleurs du numéro en cours :
+
+[Le lien des settings dans le quai pour les couleurs](http://quai.liberation.fr/bilbo/ptitlibemodels/ptitlibesettings/)
 
 - Color 4
 - Color 1
@@ -39,27 +46,29 @@ docs.google.com/spreadsheets/d/**1VZitfD0IGveJvwQayfflLTMwm3uQKMeVw8oS90Sz-uk**/
 
 ## Utilisation
 
-Aller dans le repertoire ptit-libe-modules-master
+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
 ```
 #### Répondre aux differentes questions :
 
-```bash
+```
 ? Nom du module
 ? 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)
+? Titre
+? Consigne
 ? Couleur 4
 ? Couleur 1
 ? Couleur 2
@@ -72,15 +81,16 @@ Le nouveau module à été crée dans le dossier `./dist/{numero}/{dossier}/`
 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 : `<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
 
 - 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
 
 
 ## License

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')
 }

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

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

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";

build/less/quiz.less

@@ -1,17 +1,16 @@
-#app {background: #ffffff;}
 /*! 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;}
@@ -31,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;}
@@ -40,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%;}

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

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

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;

build/meta.js

@@ -26,7 +26,7 @@ module.exports = [
       {
         name: 'Quiz',
         value: 'quiz',
-        short: 'QUiz'
+        short: 'Quiz'
       },
       {
         name: 'Diaporama',
@@ -81,6 +81,18 @@ 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',

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

build/template/ptitlibe-carte/index.html

@@ -22,6 +22,12 @@
     </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>

build/template/ptitlibe-diaporama/index.html

@@ -24,6 +24,12 @@
     </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">

build/template/ptitlibe-quiz/index.html

@@ -24,6 +24,12 @@
     </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">

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');
       });

build/template/ptitlibe-switch/index.html

@@ -24,6 +24,12 @@
     </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">