From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 20 Sep 2023 11:37:40 +0000 (+0200)
Subject: wip #6295 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=2031914e828d9b116a89947625a3b6e195a7b7d3;p=fluidbook-toolbox-quiz.git

wip #6295 @1.5
---

diff --git a/js/quiz.resize.js b/js/quiz.resize.js
index 04b1fdb..c83ce65 100644
--- a/js/quiz.resize.js
+++ b/js/quiz.resize.js
@@ -6,6 +6,9 @@ QuizResize.prototype = {
     resize: function () {
         this.ww = $(window).width();
         this.hh = $(window).height();
+        this.ratio = this.ww / this.hh;
+
+        this.updateViewport();
 
         if (this.isMobile()) {
             $('html').addClass('m');
@@ -21,24 +24,51 @@ QuizResize.prototype = {
         this.quiz.screens.intro.resize(this.ww, this.hh);
         //
         if (this.isMobile()) {
-            $(".btn.reset .text").html(iconReset)
+            $(".btn.reset .text").html(iconReset);
+            this.centerItems();
         } else {
-            $(".btn.reset .text").html(textReset)
+            $(".btn.reset .text").html(textReset);
+            this.resetCenterItems();
         }
+    },
+
+    centerItems: function () {
+        const $this = this;
+        $('.vertical-center-screen').each(function () {
+            if (!$this.quiz.utils.isVisible(this)) {
+                return;
+            }
+            let h = $(this).outerHeight();
+            $(this).css('top', ($this.hh - h) / 2);
+        });
+
+        $('.vertical-center-screen-relative').each(function () {
+            if (!$this.quiz.utils.isVisible(this)) {
+                return;
+            }
 
+            $(this).css('top', '');
+            let rect = $(this).get(0).getBoundingClientRect();
 
+            let h = $(this).outerHeight();
+            $(this).css('top', (($this.hh - h) / 2) - rect.y);
+        });
+    },
+
+    resetCenterItems: function () {
+        $('.vertical-center-screen,.vertical-center-screen-relative').css('top', '');
     },
 
     updateViewport: function () {
-        if (this.isMobile()) {
-            $('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no');
+        if (!this.isMobile()) {
+            $('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, test=yes');
         } else {
-            $('meta[name="viewport"]').attr('content', 'width=390, user-scalable=no, initial-scale=1.0, shrink-to-fit=no');
+            $('meta[name="viewport"]').attr('content', 'width=390, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, test=yes');
         }
     },
 
     isMobile: function () {
-        return this.ww <= 390;
+        return this.ww <= 600 && this.ratio < 0.7;
     },
 
 }
diff --git a/js/quiz.screen.intro.js b/js/quiz.screen.intro.js
index b38c03e..92961bf 100644
--- a/js/quiz.screen.intro.js
+++ b/js/quiz.screen.intro.js
@@ -23,27 +23,27 @@ QuizScreenIntro.prototype = {
         let title = new SplitType("#welcome h2", {types: 'words, chars'})
         let text = new SplitType("#welcome p", {types: 'words, chars'})
         gsap.timeline({delay: .4})
-        .to(".active-screen .title-header", {
-            y: 0
-        })
-        .to("#start", {
-            y: 0,
+            .to(".active-screen .title-header", {
+                y: 0
+            })
+            .to("#start", {
+                y: 0,
 
-        },.2)
-        .from(title.words, {
-            opacity: 0, y: 20, duration: .2, stagger: 0.05
-        },.5)
-        .to(text.words, {
-            opacity: 1, y: 0, duration: .8, ease: "power4.easeInOut", stagger: {
-                amount: 0.2
-            }
-        },.7)
+            }, .2)
+            .from(title.words, {
+                opacity: 0, y: 20, duration: .2, stagger: 0.05
+            }, .5)
+            .to(text.words, {
+                opacity: 1, y: 0, duration: .8, ease: "power4.easeInOut", stagger: {
+                    amount: 0.2
+                }
+            }, .7)
     },
 
     resize: function (ww, hh) {
-        let intro_text_mobile = this.quiz.data.intro_text_mobile
-        let intro_text = this.quiz.data.intro_text
-        if (ww <= 390) {
+        let intro_text_mobile = this.quiz.data.intro_text_mobile || this.quiz.data.intro_text;
+        let intro_text = this.quiz.data.intro_text;
+        if (this.quiz.resize.isMobile()) {
             $("#welcome p").html(this.quiz.utils.nl2br(intro_text_mobile))
         } else {
             $("#welcome p").html(this.quiz.utils.nl2br(intro_text))
diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index d5372a1..513e927 100644
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -57,7 +57,9 @@ QuizScreens.prototype = {
                 $this.nextQuestion();
             }
         });
-    }, instantReview: function (review) {
+    },
+
+    instantReview: function (review) {
         this.quiz.progressbar.update();
         this.quiz.animations.instantReviewAnimation(review.ok === 'ok' ? 'OK' : 'NOK');
 
@@ -122,7 +124,9 @@ QuizScreens.prototype = {
         const $this = this;
         let screenToShow = $('[data-screen="' + screen + '"]');
         this.hideCurrentScreen(function () {
-            $this.resetCountdownBackground()
+
+
+            $this.resetCountdownBackground();
             screenToShow.removeClass("none").addClass("next active-screen");
             if (callback !== undefined) {
                 callback();
@@ -137,7 +141,6 @@ QuizScreens.prototype = {
             $this.animateContent(screenToShow);
 
 
-
             // Reset form to prevent browser letting a option selected after a refresh
             $this.resetForm();
             $this.currentQuestionAnswers = [];
@@ -147,7 +150,7 @@ QuizScreens.prototype = {
             if (screen === 'outro') {
                 $this.outro.show();
             }
-
+            $this.quiz.resize.resize();
         });
     },
 
diff --git a/style/100-global.sass b/style/100-global.sass
index e51fc23..55f213e 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -13,9 +13,13 @@ body
     min-height: 100vh
 
 #quiz
-    width: 100%
+
+    min-width: 1200px
     max-width: 1200px
+
     min-height: 680px
+    max-height: 680px
+
     margin: 0 auto
     +padding-container()
     position: relative
@@ -25,7 +29,13 @@ body
 
     .m &
         border-radius: 0
-        box-shadow: 0
+        box-shadow: 0 0 0
+        height: 100vh
+        max-height: 100vh
+        min-height: 100vh
+        width: 390px
+        min-width: 390px
+        max-width: 390px
 
 
 .btn
@@ -212,3 +222,6 @@ body
 
     .only-mobile
         display: inherit
+
+    .vertical-center-screen-relative
+        position: relative
diff --git a/style/102-intro.sass b/style/102-intro.sass
index cac7809..7719dfb 100644
--- a/style/102-intro.sass
+++ b/style/102-intro.sass
@@ -6,6 +6,7 @@
     max-width: 590px
     margin: 0 auto
     top: 160px
+
     h2
         margin: 0 0 12px
         +font-size(20)
@@ -15,12 +16,14 @@
         +font-size(16)
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
         white-space: pre-wrap
+
         .word
             opacity: 0
             transform: translateY(100px)
 
 .m
     #welcome
-        top: 138px
+        position: absolute
+
     #start
         left: 50%
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 0dcdb15..793390c 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -18,6 +18,9 @@
                 position: absolute
                 right: 0
 
+                .m &
+                    height: 252px
+
             .zone-content
                 right: 24px
 
@@ -43,6 +46,9 @@
                 min-height: 196px
                 padding: 8px
 
+                .m &
+                    display: none
+
             .text
                 margin-bottom: 21px
 
@@ -239,10 +245,10 @@
                 height: auto
 
                 .zone-content
-                    top: 29px
+                    top: 0
 
             &.zone-2
-                height: auto
+                height: 210px
                 top: initial
                 bottom: -3px
                 left: 0
diff --git a/views/header_question.blade.php b/views/header_question.blade.php
index a9f2cb9..9303f0b 100644
--- a/views/header_question.blade.php
+++ b/views/header_question.blade.php
@@ -12,8 +12,7 @@
             <span class="only-desktop">{{$__('Drag and drop each card in the right container')}}</span>
             <span class="only-mobile">{{$__('Swipe up or down each card in the right container')}}</span>
         </h1>
-        <h2 class="subtitle"
-            class="only-desktop">{{$__('Use arrow keys to move the cards to the corresponding zone')}}</h2>
+        <h2 class="subtitle only-desktop">{{$__('Use arrow keys to move the cards to the corresponding zone')}}</h2>
     @elseif($question['type']==='match')
         <h1 id="titleQuestion">
             {{$__('Answer the question by swiping left or right to select the most appropriate answer')}}
diff --git a/views/screens/intro.blade.php b/views/screens/intro.blade.php
index 383037a..543416b 100644
--- a/views/screens/intro.blade.php
+++ b/views/screens/intro.blade.php
@@ -3,7 +3,7 @@
 @endphp
 <div class="container-screen none" data-type="intro" data-screen="welcome">
     @include('header_title', ['data', $data])
-    <div class="screen" id="welcome">
+    <div class="screen vertical-center-screen" id="welcome">
         <h2>{{$data->intro_title?:$__('Welcome')}}</h2>
         <p>{{$data->intro_text}}</p>
     </div>
diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index 2dfa621..3f2db1d 100644
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -1,18 +1,20 @@
 <div class="container-screen none question-draganddrop" data-type="draganddrop" data-screen="q-{{$position}}">
     @include('screens.question_draganddrop_area',['area'=>1,'question'=>$question,'theme'=>$theme])
     @include('header_question', ['question' => $question, 'data' => $data, 'max' => $max, 'position' => $position])
-    <div class="screen question-draganddrop">
-        @include('screens.arrow',['side'=>'left'])
-        <ul class="list">
-            @foreach($question['answers'] as $key => $answer)
-                <li class="list-item {{ $key === 0 ? 'current' : '' }}" data-id="{{$key}}">
-                    <h4>{{$answer['answer']}}</h4>
-                    <p>{{$answer['answer_text']}}</p>
-                </li>
-            @endforeach
-            <li class="overlay"></li>
-        </ul>
-        @include('screens.arrow',['side'=>'right'])
+    <div class="vertical-center-screen-relative">
+        <div class="screen question-draganddrop">
+            @include('screens.arrow',['side'=>'left'])
+            <ul class="list">
+                @foreach($question['answers'] as $key => $answer)
+                    <li class="list-item {{ $key === 0 ? 'current' : '' }}" data-id="{{$key}}">
+                        <h4>{{$answer['answer']}}</h4>
+                        <p>{{$answer['answer_text']}}</p>
+                    </li>
+                @endforeach
+                <li class="overlay"></li>
+            </ul>
+            @include('screens.arrow',['side'=>'right'])
+        </div>
     </div>
     @include('screens.question_draganddrop_area',['area'=>2,'question'=>$question,'theme'=>$theme])
     @include('footer', ['question' => $question,'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true])