wip #6182 @0.5 | fix merge mess

diff --git a/js/quiz.resize.js b/js/quiz.resize.js
index aa1c17ef1ac977b390deb5997c75d778dc40c316..2ec11924a31880b0bdec151e379dd84e763a06e0 100644 (file)
--- a/js/quiz.resize.js
+++ b/js/quiz.resize.js
@@ -6,9 +6,31 @@ QuizResize.prototype = {
     resize: function () {
         this.ww = $(window).width();
         this.hh = $(window).height();
+        let intro_text_mobile = this.quiz.data.intro_text_mobile
+        let intro_text = this.quiz.data.intro_text
+        const iconReset = getSpriteIcon("quiz-reset")
+        const textReset = "Reset"
 
         // Exécuter ici toutes opérations qui doivent intervenir lorsque la fenêtre est redimensionnée par le système ou l'utilisateur
+        //
+        if(this.ww <= 390) {
+            $("#welcome p").html(this.nl2br(intro_text_mobile))
+        }else {
+            $("#welcome p").html(this.nl2br(intro_text))
+        }
+
+        //
+        if(this.ww <= 992) {
+            $(".btn.reset .text").html(iconReset)
+        } else {
+            $(".btn.reset .text").html(textReset)
+        }
     },
+
+    nl2br: function(str) {
+        if (!str) return str;
+        return str.replace(/(?:\r\n|\r|\n)/g, '<br>');
+    }
 }
 
 export default QuizResize;

diff --git a/style/001-global-variables.sass b/style/001-global-variables.sass
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..65d5730c7df453ddcb4339762ce3ecf7aa5a9538 100644 (file)
--- a/style/001-global-variables.sass
+++ b/style/001-global-variables.sass
@@ -0,0 +1 @@
+$screenSizeMobile: 391px

diff --git a/style/100-global.sass b/style/100-global.sass
index 763a60da35d230544d1b8acfcb3d1fef2a4b39ad..8707185a0ebdc4eac6ed297882e8c6c716a3ef42 100644 (file)
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -17,7 +17,7 @@ body
     max-width: 1200px
     min-height: 680px
     margin: 0 auto
-    padding: 24px 24px
+    +padding-container()
     position: relative
 
 .btn
@@ -31,14 +31,28 @@ body
     +flex-config(center,false,false,center)
     @extend .radius
     +font-size(20)
+    +below(992px)
+        height: 56px
     &.primary
         background: radial-gradient(at 16% 6px, rgb(255, 102, 186) -7%, #D0167C 74%)
         box-shadow: 0 4px 6px rgba(0,0,0,.2)
+        +below(993px)
+            flex: 1
+            margin-left: 16px
     &.secondary
         +opacity(.16)
         padding-left: 22px
     &.reset
         max-width: 144px
+        +below(992px)
+            width: 56px
+            flex-shrink: 0
+            padding: 0
+        .text
+            +below(992px)
+                +flex-config(center,false,false,center)
+            svg
+                width: 50%
     &.info
         max-width: 177px
 
@@ -52,6 +66,9 @@ body
     margin-left: 16px
     +flex-config(center,false,false,center)
     border: 0
+    +below(993px)
+        &:not(.missed):not(.ok):not(.nok)
+            display: none
     &.space
         width: 70px
     &.infos
@@ -84,3 +101,17 @@ body
         height: 100%
         width: 100%
         z-index: 0
+        img.mobile
+            display: inline
+            height: 100%
+            width: 100%
+            object-fit: cover
+            &.question-multiple
+                object-position: top
+
+            +above($screenSizeMobile)
+                display: none
+        img:not(.mobile)
+            display: none
+            +above($screenSizeMobile)
+                display: inline

diff --git a/style/101-header-footer.sass b/style/101-header-footer.sass
index d4a269eb07104a2c7b25633cc07ead94f31537c2..4775a07a9afc940becbbd87d25bbf87c2aa48a10 100644 (file)
--- a/style/101-header-footer.sass
+++ b/style/101-header-footer.sass
@@ -17,10 +17,14 @@ header
 .header-question
     text-align: center
     .abovetitle
-        +font-size(16)
+        +font-size(14)
+        +above($screenSizeMobile)
+            +font-size(16)
     .progress-container
-        margin: 6px 0 16px
+        margin: 4px 0 16px
         +flex-config(center,false,false,center)
+        +above($screenSizeMobile)
+            margin: 6px 0 16px
     .progress-item
         width: 16px
         height: 4px
@@ -37,7 +41,11 @@ header
         &.nok
             background-color: $nok-color
     h1
-        +font-size(24)
+        +font-size(20)
+        height: 84px
+        +above(991px)
+            height: auto
+            +font-size(24)
 
 .footer
     position: absolute
@@ -45,13 +53,17 @@ header
     left: 0
     width: 100%
     z-index: 2
-    +flex-config(space-between,false,row,center)
+    +flex-config(center,false,row,center)
     +padding-container()
+    +breakpoint(md)
+        +flex-config(space-between,false,row,center)
+
 
     .btn.primary
         width: 100%
-        max-width: 400px
-        position: absolute
-        left: 50%
-        bottom: 24px
-        transform: translateX(-50%)
+        +above(992px)
+            max-width: 400px
+            position: absolute
+            left: 50%
+            bottom: 24px
+            transform: translateX(-50%)

diff --git a/style/102-intro.sass b/style/102-intro.sass
index d0057c145e883c0182ce60b015dd0a83193a7b6c..a622c274310a75eac1e9d5207ab3d7dfee1f66d9 100644 (file)
--- a/style/102-intro.sass
+++ b/style/102-intro.sass
@@ -1,3 +1,7 @@
+[data-screen="welcome"]
+    .screen-image
+        +flex-config(center)
+
 #welcome
     max-width: 590px
     margin: 0 auto

diff --git a/style/103-question-multiple.sass b/style/103-question-multiple.sass
index 8f61c6cd6743ceb97eb8be7d3f8ba544bcc1d91f..7dc8c3a26baa63c8968271c00a7d570a059222a0 100644 (file)
--- a/style/103-question-multiple.sass
+++ b/style/103-question-multiple.sass
@@ -1,29 +1,29 @@
 .screen.question-multiple
-    top: 93px
-
-    form
-        &.disabled
-            label
-                pointer-events: none
-
+    top: 45px
+    +above(992px)
+        top: 93px
     .list
         display: grid
-        grid-template-columns: repeat(2, 1fr)
         grid-gap: 16px
-
+        +below($screenSizeMobile)
+            grid-gap: 8px
+        +breakpoint(md)
+            grid-template-columns: repeat(2, 1fr)
         &-item
             label
                 width: 100%
                 height: 58px
                 @extend .radius
-                +opacity(.80, background-color, $neutral-color)
-                +flex-config(space-between, false, false, center)
+                +opacity(.80,background-color,$neutral-color)
+                +flex-config(space-between,false,false,center)
                 padding: 0 16px
                 cursor: pointer
                 border: 2px solid rgba($texts-color, .24)
                 position: relative
                 overflow: hidden
-
+                +below($screenSizeMobile)
+                    height: 56px
+                    +font-size(14)
                 &:after
                     content: ""
                     width: 100%
@@ -32,21 +32,17 @@
                     top: 0
                     left: 0
                     transition: background-color .1s ease-out
-
                 &.ok:after,
                 &.missed:after
                     //
-                    +opacity(.24, background-color, $ok-color)
-
+                    +opacity(.24,background-color,$ok-color)
                 *
                     z-index: 1
 
-            input:checked + label
+            input:checked+label
                 border-color: $texts-color
                 transition: border-color .1s ease-out
-
                 &:after
                     +opacity(.16)
-
                 &.nok:after
                     background: transparent

diff --git a/style/105-outro.sass b/style/105-outro.sass
index 0438c0ee8f9cf6101efeb6bb5dfaeb1831dd4496..79baa858d88c8273a5aa52d5b1eb6ecf370186db 100644 (file)
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -1,28 +1,57 @@
 .score
-    height: 576px //680(hauteur de base) - 80(hauteur du header) - 24(padding inférieure)
-    +opacity(.48,background-color,$neutral-color)
+    height: 600px //680(hauteur de base) - 80(hauteur du header)
     border-radius: 40px
     overflow: hidden
     +flex-config(false,false,row,stretch)
+    +below(993px)
+        position: static
+        border-radius: 0
+    +above(992px)
+        +opacity(.48,background-color,$neutral-color)
+        height: 576px //680(hauteur de base) - 80(hauteur du header) - 24(padding inférieure)
+
+    &:after
+        +below(993px)
+            content: ""
+            width: 100%
+            position: absolute
+            height: 100%
+            +opacity(.48,background-color,$neutral-color)
+            top: 0
+            left: 0
 
     .subtitle
         +opacity(.8,color,$texts-color)
+        +below(993px)
+            margin-bottom: 20px
 
     &-content
         flex: 1
         padding: 24px
         position: relative
+        z-index: 1
+        +below(993px)
+            padding: 0
         h1
             +font-size(40)
             margin-bottom: 9px
+            +below(993px)
+                +font-size(24)
         .subtitle
             +font-size(16)
+            +below(993px)
+                +font-size(14)
 
     &-content-wrapper
         +flex-config(false,false,false,center)
         position: relative
         top: var(--space-21-66)
         left: var(--space-21-66)
+        +below(993px)
+            +flex-config(center,false,column,center)
+            top: 74px
+            left: 0
+            text-align: center
 
     &-counter
         height: 0
@@ -32,7 +61,9 @@
         position: relative
         +font-size(80)
         margin-right: 60px
-
+        +below(993px)
+            margin: 0 0 24px
+            font-size: 56px
         #progress-counter
             width: 100%
             height: 100%
@@ -51,26 +82,60 @@
                 overflow: visible
                 width: calc(100% - 12px)
                 height: calc(100% - 12px)
-                transform: rotate(-90deg)
                 position: absolute
                 circle
-                    stroke-width: 12px
+                    stroke-width: 6px
                 circle:not(#progress-circle)
                     +opacity(.16,color,$texts-color)
-                circle#progress-circle
-                    transition: stroke-dashoffset 0.5s ease-in-out
 
-    &-answers-review
+    &-answers-review_container
         width: 36.11111%
+        +below(993px)
+            width: 100%
+            height: 100%
+            position: absolute
+            top: 0
+            left: 0
+            z-index: 99
+            display: flex
+            padding: 16px 16px 0
+            align-items: flex-end
+            visibility: hidden
+            //+opacity(0,background-color,$ok-color)
+            backdrop-filter: blur(4px)
+            &.active
+                //+opacity(1,background-color,$ok-color)
+                visibility: visible
+
+    &-answers-review
+        height: 100%
         background-color: $neutral-color
         padding: 24px 24px 0
         position: relative
+        +below(993px)
+            width: 100%
+            height: calc(100% - 78px)
+            padding: 8px 16px 0
+            border-top-left-radius: 20px
+            border-top-right-radius: 20px
         h2
             +font-size(24)
             margin-bottom: 5px
+            +below(993px)
+                margin-bottom: 12px
+                text-align: center
+                position: relative
+            #close-answers
+                position: absolute
+                right: 0
+                top: 50%
+                transform: translateY(-50%)
+
         .subtitle
             +font-size(16)
             margin-bottom: 22px
+            +below(993px)
+                display: none
 
         &:after
             content: ""
@@ -84,6 +149,9 @@
     #answers-list
         height: 85%
         padding-right: 24px
+        +below(993px)
+            height: 90%
+            padding-right: 5px
         .item
             padding-left: 20px
             margin-bottom: 22px
@@ -117,16 +185,47 @@
             .answer
                 +opacity(.8,color,$texts-color)
 
+    .toggle-answers-review
+        +above(992px)
+            display: none
+
 
     footer
         position: absolute
         width: calc(100% - 48px)
         bottom: 24px
+        z-index: 1
+        +below(993px)
+            width: 100%
+            bottom: 0
         .restart-sentence
             margin-bottom: 14px
         .controls
             +flex-config(space-between)
 
+    .restart-sentence,
+    .btn.restart
+        +below(993px)
+            display: none
+        &-mobile
+            +flex-config(center)
+            +above(992px)
+                display: none
+
+    .restart-sentence-mobile
+        margin-bottom: 14px
+        font-size: 14px
+
+    .btn.restart-mobile
+        width: max-content
+        height: 35px
+        padding: 12px
+        margin: 0 auto
+        font-size: 16px
+        svg
+            height: 13px
+            margin-right: 6px
+
 
     // SimpleBar personalisation
     .simplebar-wrapper

diff --git a/views/footer.blade.php b/views/footer.blade.php
index dc75cc1413aa0d74e5377ed5aa9b544eee053072..27cf49bb1fffff878f5f33e5079ad45f1c7c781f 100644 (file)
--- a/views/footer.blade.php
+++ b/views/footer.blade.php
@@ -1,7 +1,7 @@
 <footer class="footer-question footer">
     @isset($reset)
         <a class="btn secondary reset" aria-keyshortcuts="R">
-            Reset
+            <span class="text">Reset</span>
             <span class="access">R</span>
         </a>
     @endisset

diff --git a/views/index.blade.php b/views/index.blade.php
index c4f77a5186325146c35a3fbf54f5f985e258ed88..9272efd9c1cb64b408a780399c2d1e3c48e822e0 100644 (file)
--- a/views/index.blade.php
+++ b/views/index.blade.php
@@ -28,5 +28,17 @@
     </div>
 </div>
 <script src="js/quiz.js"></script>
+<script>
+    function changeViewportSize () {
+        const mvp = document.getElementById('myViewport');
+        if (screen.width > 390) {
+            mvp.setAttribute('content','width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no');
+        }else {
+            mvp.setAttribute('content','width=390, user-scalable=no, initial-scale=1.0, shrink-to-fit=no');
+        }
+    }
+    window.addEventListener("onload", changeViewportSize)
+    window.addEventListener("resize", changeViewportSize)
+</script>
 </body>
 </html>

diff --git a/views/screens/intro.blade.php b/views/screens/intro.blade.php
index bb4e45112c8ada5463fc25f82f476c64e3819a72..a75421c057ed26bf37197fdb778c9fad3dd56780 100644 (file)
--- a/views/screens/intro.blade.php
+++ b/views/screens/intro.blade.php
@@ -9,8 +9,9 @@
     </div>
     <div class="screen-image">
         <img src="{{$data->theme->introImage}}" />
+        <img class="mobile" src="{{$data->theme->introImageMobile}}" />
     </div>
     <footer class="footer">
-        <a id="start" aria-keyshortcuts="Space" class="btn primary">{{$data->intro_button}}</a>
+        <a id="start" aria-keyshortcuts="Space" class="btn primary">{{$data->intro_button}}<span class="access space">space</span></a>
     </footer>
 </div>

diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index c779ea1c4c28f97474925e10a742b590c6f184af..af8918d090e2945b221eeb887906eb86ca00c9f2 100644 (file)
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -6,16 +6,26 @@
                 <div class="score-counter">
                     <div id="progress-counter">
                         <span id="score-counter">0</span><span>/</span><span id="maxScore-counter">0</span>
-                        <svg width="100%" height="100%" id="svg">
-                            <circle cx="50%" cy="50%" r="50%" fill="transparent" stroke="currentColor"/>
-                            <circle id="progress-circle" cx="50%" cy="50%" r="50%" fill="none" stroke="currentColor"/>
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve">
+                            <circle cx="50" cy="50" r="48" fill="transparent" stroke="currentColor" />
+                            <circle id="progress-circle" fill="none" stroke="currentColor" stroke-width="1.2" stroke-mitterlimit="0" cx="50" cy="50" r="48" stroke-dasharray="360" stroke-linecap="round" transform="rotate(-90 ) translate(-100 0)" >
+                                <!--<animate attributeName="stroke-dashoffset" values="360;0" dur="2s" repeatCount="indefinite"></animate>-->
+                            </circle>
                         </svg>
                     </div>
                 </div>
                 <div class="score-text">
                     <h1>Congratulation!</h1>
                     <p class="subtitle">You have completed the quiz<br/> with <span id="score-text"></span>
-                        correct answers out of <span id="maxScore-text"></span></p>
+                        correct answers out of <span id="maxScore-text"></span>
+                    </p>
+                    @if($data->restart_button)
+                        <div class="restart-sentence-mobile">Want to improve your score?</div>
+                        <a class="btn secondary restart restart-mobile">
+                            <span data-icon="reset"></span>
+                            Restart
+                        </a>
+                    @endif
                 </div>
             </div>
             <footer>
@@ -24,36 +34,42 @@
                 @endif
                 <div class="controls">
                     @if($data->restart_button)
-                        <a class="btn secondary reset" aria-keyshortcuts="r">
+                        <a class="btn secondary restart" aria-keyshortcuts="r">
                             Restart
                             <span class="access">R</span>
                         </a>
                     @endif
-                    <a class="btn primary action" aria-keyshortcuts="Space">
+                    <a class="btn secondary toggle-answers-review">
+                        <span data-icon=""></span>
+                        Review answers
+                    </a>
+                    <a class="btn primary action">
                         Leave
                         <span class="access space">space</span>
                     </a>
                 </div>
             </footer>
         </div>
-        <div class="score-answers-review">
-            <h2>Answers review</h2>
-            <p class="subtitle">Review your answers before you go</p>
-            <ul id="answers-list">
-                @verbatim
-                    <script id="template-answers-review" type="text/x-handlebars-template">
-                        {{#each reviewList}}
-                        <li class="item {{this.status}}">
-                            <p class="position">Question {{inc @index}}</p>
-                            <p class="question">{{this.question}}</p>
-                            {{#each this.answers}}
-                            <p class="answer">{{this.answer}}</p>
+        <div class="score-answers-review_container">
+            <div class="score-answers-review">
+                <h2>Answers review<span class="toggle-answers-review" id="close-answers" data-icon="wrong"></span></h2>
+                <p class="subtitle">Review your answers before you go</p>
+                <ul id="answers-list">
+                    @verbatim
+                        <script id="template-answers-review" type="text/x-handlebars-template">
+                            {{#each reviewList}}
+                            <li class="item {{this.status}}">
+                                <p class="position">Question {{inc @index}}</p>
+                                <p class="question">{{this.question}}</p>
+                                {{#each this.answers}}
+                                <p class="answer">{{this.answer}}</p>
+                                {{/each}}
+                            </li>
                             {{/each}}
-                        </li>
-                        {{/each}}
-                    </script>
-                @endverbatim
-            </ul>
+                        </script>
+                    @endverbatim
+                </ul>
+            </div>
         </div>
     </div>
 </div>

diff --git a/views/screens/question_multiple.blade.php b/views/screens/question_multiple.blade.php
index 958ff393d8a58348c4e4f960c128df8b79758171..caaa92272881474b3e35497cffc5d998fad3e81b 100644 (file)
--- a/views/screens/question_multiple.blade.php
+++ b/views/screens/question_multiple.blade.php
@@ -6,7 +6,7 @@
                 @foreach($question['answers'] as $key => $answer)
                     <li class="list-item">
                         <input type="{{ $data['multiple'] ? 'checkbox' : 'radio' }}"
-                               name="{{  'answer' }}"
+                               name="answer"
                                id="question-{{$position.$key}}" class="none" value="{{$key}}">
                         <label for="question-{{$position.$key}}" aria-keyshortcuts="{{$alphabet[$key]}}">
                             <span class="relative">{{$answer['answer']}}</span>
@@ -18,7 +18,8 @@
         </form>
     </div>
     <div class="screen-image">
-        <img src="{{$theme->standardImage}}">
+        <img src="{{$theme->standardImage}}"/>
+        <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
     </div>
     @include('footer', ['question' =>$question, 'data' => $data, 'reset' => true, 'info' => true])
 </div>