Merge pull request #25 from nzzdev/release-1.3.0

Release 1.3.0
nzzdev · Sep 12, 2017 · 1752015 · 1752015
2 parents 014ec7a + baa63c5
commit 1752015
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 47 deletions.
diff --git a/index.html b/index.html
@@ -5,15 +5,15 @@
     <meta charset="utf-8">
     <title>Q Quiz</title>
     <meta name="description" content="">
-    <link rel="stylesheet" href="https://service.sophie.nzz.ch/bundle/sophie-q@^1,sophie-font@^1,sophie-color@^1,sophie-viz-color@^1,sophie-input@~0.1.0[range].css">
+    <link rel="stylesheet" href="https://service.sophie.nzz.ch/bundle/sophie-q@^1.2.0-rc.2,sophie-font@^1.2.0-rc.2,sophie-color@^1.1.0-rc,sophie-viz-color@^1.2.0-rc,sophie-input@^1.2.0-rc.4.css">
     <!-- In current (non niobe) design this set on q embeds -
       to test if colors are correct we add it here, might be removed later with niobe -->
     <style>
       .widget--qembed .card>div>[class*=" q-"], 
       .widget--qembed .card>div>[class^=q-], 
       .widget--qembed>div>[class*=" q-"], 
       .widget--qembed>div>[class^=q-] {
-        color: #f5f5f5;
+        color: #fff;
       }
     </style>
     <script src="https://rawgit.com/filamentgroup/loadCSS/master/src/loadCSS.js"></script> 
@@ -77,7 +77,7 @@
               "question": "Hausnummer der NZZ",
               "answer": 11,
               "min": 1,
-              "max": 30,
+              "max": 150000,
               "step": 1
             },
             {
@@ -149,6 +149,8 @@
               "id": "86a6d3bc3be11a1cf51f7c12bd10858c-1503673750136-872919612",
               "type": "lastCard",
               "title": "Geschafft. Danke fürs Mitspielen.",
+              "quizLink": "https://www.nzz.ch/feuilleton/nzz-quizz-twin-peaks-kehrt-zurueck-ld.1294313",
+              "quizTitle": "Was wissen Sie über Twin Peaks",
               "isFinalScoreShown": true,
               "articleRecommendations": [],
               "text": "Ui so ein Spass"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nzz/q-quiz",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Q quiz",
   "keywords": [
     "storytelling",

diff --git a/script_src/MultipleChoiceHandler.js b/script_src/MultipleChoiceHandler.js
@@ -14,8 +14,8 @@ export default class MultipleChoiceHandler {
   }
 
   renderResult(answer) {
-    const checkmark = '<svg class="q-quiz-result__answer__checkmark s-viz-color-three-5" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="none" d="M0 12V0h16v16H0z"/><path d="M0 9l5 5L16 3l-2-2-9 9-3-3-2 2z" fill="currentColor"/></g></svg>';
-    const crossmark = '<svg class="q-quiz-result__answer__checkmark s-viz-color-six-5" width="16" height="16" viewBox="0 0 16 16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="none" d="M0 12V0h16v16H0z"/><path fill="currentColor" d="M8 10l-5 5-2-2 5-5-5-5 2-2 5 5 5-5 2 2-5 5 5 5-2 2-5-5z"/></g></svg>';
+    const checkmark = '<svg class="q-quiz-result__answer__checkmark s-color-positive" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="none" d="M0 12V0h16v16H0z"/><path d="M0 9l5 5L16 3l-2-2-9 9-3-3-2 2z" fill="currentColor"/></g></svg>';
+    const crossmark = '<svg class="q-quiz-result__answer__checkmark s-color-negative" width="16" height="16" viewBox="0 0 16 16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="none" d="M0 12V0h16v16H0z"/><path fill="currentColor" d="M8 10l-5 5-2-2 5-5-5-5 2-2 5 5 5-5 2 2-5 5 5 5-2 2-5-5z"/></g></svg>';
 
     this.choices = [];
     this.questionElement.querySelectorAll('.q-quiz-result__answer > span').forEach(element => {
@@ -25,14 +25,14 @@ export default class MultipleChoiceHandler {
 
       // is answer element the correct answer
       if (element.textContent === this.data.correctAnswer) {
-        element.classList.add('s-font-note--strong', 's-viz-color-three-5');
+        element.classList.add('s-font-note--strong', 's-color-positive');
 
         let correctAnswerElement = document.createElement('span');
-        correctAnswerElement.classList.add('s-viz-color-three-5');
+        correctAnswerElement.classList.add('s-color-positive');
         correctAnswerElement.innerText = 'korrekte Antwort';
         parentNode.insertBefore(correctAnswerElement, element.nextSibling);
 
-        bar.classList.add('s-font-note-s--strong', 's-viz-color-three-5');
+        bar.classList.add('s-font-note-s--strong', 's-color-positive');
 
         // is user input correct
         if (this.data.correctAnswer === answer) {
@@ -46,14 +46,14 @@ export default class MultipleChoiceHandler {
           let crossmarkElement = document.createElement('span');
           crossmarkElement.innerHTML = crossmark;
           parentNode.insertBefore(crossmarkElement, element);
-          element.classList.add('s-font-note--strong', 's-viz-color-six-5');
+          element.classList.add('s-font-note--strong', 's-color-negative');
 
           let wrongAnswerElement = document.createElement('span');
-          wrongAnswerElement.classList.add('s-viz-color-six-5');
+          wrongAnswerElement.classList.add('s-color-negative');
           wrongAnswerElement.innerText = 'falsche Antwort';
           parentNode.insertBefore(wrongAnswerElement, element.nextSibling);
 
-          bar.classList.add('s-font-note-s--strong', 's-viz-color-six-5');
+          bar.classList.add('s-font-note-s--strong', 's-color-negative');
         } else {
           // all other answer elements
           element.classList.add('s-font-note--light');

diff --git a/script_src/NumberGuessHandler.js b/script_src/NumberGuessHandler.js
@@ -32,15 +32,15 @@ export default class NumberGuessHandler {
 
     this.inputElement.addEventListener('input', () => {
       label.textContent = this.inputElement.value;
-      label.setAttribute('style', `left: ${(this.inputElement.value - this.min) / (this.max - this.min) * 100}%;`);
+      label.setAttribute('style', `left: calc(${(this.inputElement.value - this.min) / (this.max - this.min) * 100}% - 1px);`);
     });
     this.inputElement.addEventListener('change', () => {
       label.textContent = this.inputElement.value;
-      label.setAttribute('style', `left: ${(this.inputElement.value - this.min) / (this.max - this.min) * 100}%;`);
+      label.setAttribute('style', `left: calc(${(this.inputElement.value - this.min) / (this.max - this.min) * 100}% - 1px);`);
     });
 
     label.innerHTML = this.defaultInputValue;
-    label.setAttribute('style', `left: ${(this.inputElement.value - this.min) / (this.max - this.min) * 100}%;`);
+    label.setAttribute('style', `left: calc(${(this.inputElement.value - this.min) / (this.max - this.min) * 100}% - 1px);`);
   }
 
   getValue(event) {

diff --git a/styles/default.scss b/styles/default.scss
@@ -46,6 +46,10 @@
   opacity: 0;
 }
 
+.q-quiz-input {
+  margin-top: 16px;
+}
+
 .q-quiz-input,
 .q-quiz-result {
   &.state-hidden {
@@ -118,38 +122,17 @@
 }
 
 .q-quiz-answer-button {
-  background-color: currentColor;
-  border: none;
-  outline: none;
-  border-radius: 3px;
   width: 100%;
-  padding: 9px;
-  position: relative;
-  cursor: pointer;
   margin-top: 10px;
   opacity: 1;
 
   transition: opacity 0.1s ease-out;
 
-  &[disabled] {
-    background: none;
-    border: 1px solid #d6d6d6;
-    cursor: default;
-    span {
-      color: #d6d6d6;
-    }
-  }
-
   &.state-clicked {
     opacity: 0;
   }
 }
 
-.q-quiz-answer-button--soft {
-  background-color: transparent;
-  border: 1px solid currentColor;
-}
-
 .q-quiz-element-container {
   img {
     display: block;

diff --git a/styles/q-quiz-button.scss b/styles/q-quiz-button.scss
@@ -51,7 +51,6 @@
 }
 
 .q-quiz-button__icon {
-  background: currentColor;
   width: 44px;
   height: 44px;
   border-radius: 50%;
@@ -60,7 +59,6 @@
   svg {
     height: 16px;
     position: relative;
-    top: 14px;
   }
 }
 
@@ -69,6 +67,5 @@
   height: 64px;
   svg {
     height: 30px;
-    top: 17px;
   }
 }
diff --git a/views/HtmlJs.html b/views/HtmlJs.html
@@ -5,7 +5,7 @@
       <div class="q-quiz-element-container q-quiz__cover s-color-primary-1 q-quiz-element-container--is-active" style="width: {{elementWidth}}%;">
         <h3 class="q-quiz__cover-title s-font-title">{{#if cover.title}}{{cover.title}}{{/if}}</h3>
         <button class="q-quiz-button">
-          <div class="q-quiz-button__icon q-quiz-button__icon--large s-color-primary-6">
+          <div class="q-quiz-button__icon q-quiz-button__icon--large s-button s-button--large s-button--circular">
             <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
               <g fill="none" fill-rule="evenodd">
                 <path fill="#FFF" d="M9.8 22.4l1.4 1.4L21 14l-9.8-9.8-1.4 1.4 8.4 8.4z"></path>
@@ -46,7 +46,7 @@ <h3 class="s-q-item__title q-quiz-last-card-title">{{lastCard.title}}</h3>
               <div class="s-q-item__title q-quiz-play-another-title">{{lastCard.quizTitle}}</div>
             {{/if}}
             <a href="{{lastCard.quizLink}}" class="q-quiz-button">
-              <div class="q-quiz-button__icon q-quiz-button__icon--large s-color-primary-6">
+              <div class="q-quiz-button__icon q-quiz-button__icon--large s-button s-button--large s-button--circular">
                 <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
                   <path d="M2.488 21.49A13.428 13.428 0 0 1 0 13.695C0 6.131 6.267 0 13.998 0c7.73 0 13.997 6.131 13.997 13.694 0 7.564-6.267 13.695-13.997 13.695-2.706 0-5.232-.751-7.373-2.051L1.383 28l1.105-6.51zm10.322-5.043c0-.771.096-1.385.287-1.842.192-.457.542-.908 1.052-1.35.509-.444.848-.805 1.017-1.083.169-.278.253-.571.253-.88 0-.93-.439-1.396-1.317-1.396-.416 0-.75.126-1 .376s-.382.596-.393 1.037h-2.448c.01-1.052.358-1.875 1.042-2.47.684-.595 1.617-.892 2.8-.892 1.192 0 2.118.282 2.777.847.659.564.988 1.361.988 2.391 0 .468-.107.91-.321 1.326-.214.415-.588.877-1.123 1.383l-.684.636c-.428.402-.672.873-.734 1.413l-.034.504H12.81zm-.244 2.535c0-.368.128-.673.384-.912.256-.24.584-.36.983-.36.4 0 .728.12.984.36s.384.544.384.912c0 .364-.125.664-.376.9-.25.238-.58.356-.992.356-.41 0-.741-.118-.992-.355a1.186 1.186 0 0 1-.375-.9z" fill="#FFF" fill-rule="evenodd"></path>
                 </svg>

diff --git a/views/MapPointGuess.html b/views/MapPointGuess.html
@@ -3,7 +3,7 @@
     Klicken Sie auf die gewünschte Stelle auf der Karte, um Ihre Antwort einzugeben.
   </div>
   <div class="q-quiz-map-container" style="height: 300px;"></div>
-  <button class="q-quiz-answer-button s-font-note s-color-primary-6" disabled="true">
+  <button class="s-button s-button--small q-quiz-answer-button" disabled="true">
     <span class="s-color-gray-1">Antworten</span>
   </button>
 </div>

diff --git a/views/MultipleChoice.html b/views/MultipleChoice.html
@@ -1,7 +1,7 @@
 <div class="q-quiz-input">
   {{#each answers as answer}}
-  <button class="q-quiz-answer-button q-quiz-answer-button--soft s-font-note s-color-gray-4" value="{{answer}}">
-    <span class="s-color-primary-6" style="pointer-events: none;">{{answer}}</span>
+  <button class="s-button s-button--secondary s-button--small q-quiz-answer-button" value="{{answer}}">
+    <span style="pointer-events: none;">{{answer}}</span>
   </button>
   {{/each}}
 </div>

diff --git a/views/NumberGuess.html b/views/NumberGuess.html
@@ -1,7 +1,7 @@
 <div class="q-quiz-input">
   <div class="s-input-range-container">
     <div class="s-input-range-position-label-container">
-      <div class="s-input-range-position-label s-font-title-xs s-color-primary-6" style="left: {{labelPosition}}%;">
+      <div class="s-input-range-position-label s-font-text s-font-text--strong s-color-primary-6" style="left: {{labelPosition}}%; transform: translateX({{transformValue}}%);">
         {{initialValue}}
       </div>
     </div>
@@ -13,7 +13,7 @@
       {{labelMax}}
     </div>
   </div>
-  <button class="q-quiz-answer-button s-font-note s-color-primary-6">
+  <button class="s-button s-button--small q-quiz-answer-button">
     <span class="s-color-gray-1">Antworten</span>
   </button>
 </div>

diff --git a/views/Question.html b/views/Question.html
@@ -22,7 +22,7 @@ <h3 class="s-q-item__title">{{#if question.question}}{{question.question}}{{/if}
   <button class="q-quiz-button q-quiz-button--horizontal q-quiz-button--right s-font-note-s state-hidden">
     <div class="q-quiz-button__content">
       <span>nächste Frage</span>
-      <div class="q-quiz-button__icon q-quiz-button__icon s-color-primary-6">
+      <div class="q-quiz-button__icon q-quiz-button__icon s-button s-button--small s-button--circular ">
         <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">
             <path fill="#FFF" d="M9.8 22.4l1.4 1.4L21 14l-9.8-9.8-1.4 1.4 8.4 8.4z"></path>