From 403d9fc58a7f7f10ed832865031c5f5ff01d485f Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 17 Aug 2023 18:14:08 +0200 Subject: [PATCH] wip #6193 @7:00 --- js/quiz.animations.js | 8 --- js/quiz.js | 8 ++- js/quiz.resize.js | 10 ++++ style/001-global-variables.sass | 1 + style/100-global.sass | 24 ++++++++- style/101-header-footer.sass | 18 +++++-- style/103-question-multiple.sass | 12 ++++- style/105-outro.sass | 63 ++++++++++++++++++++--- views/footer.blade.php | 2 +- views/screens/intro.blade.php | 4 +- views/screens/outro.blade.php | 49 +++++++++++------- views/screens/question_multiple.blade.php | 13 +++-- 12 files changed, 161 insertions(+), 51 deletions(-) diff --git a/js/quiz.animations.js b/js/quiz.animations.js index d43a719..e71b64a 100644 --- a/js/quiz.animations.js +++ b/js/quiz.animations.js @@ -23,14 +23,6 @@ QuizAnimations.prototype = { }); } }, - - triggeredBtn: function() { - /*$(document).on("mousedown", ".btn", function() { - gsap.to($(this), { scale: .9, duration: 0.3 }); - }).on("mouseup", ".btn", function() { - gsap.to($(this), { scale: 1, duration: 0.3 }); - })*/ - } } diff --git a/js/quiz.js b/js/quiz.js index b99daff..10dafa2 100644 --- a/js/quiz.js +++ b/js/quiz.js @@ -126,6 +126,11 @@ Quiz.prototype = { gsap.to($(this), { scale: 1, duration: .2 }); }) + // + $(document).on("click", ".toggle-answers-review", function() { + $(".score-answers-review_container").toggleClass("active") + }) + // this.activeNav() }, @@ -138,6 +143,7 @@ Quiz.prototype = { let responses = $this.responses $this.next(responses); $("#welcome-screen").removeClass("next active-screen").addClass("none").next(".container-screen").removeClass("none").addClass("next active-screen") + $this.activeNav(1) } }) }, @@ -204,7 +210,7 @@ Quiz.prototype = { // si le joueur recharge la page, le rediriger là où il en était setDisplay: function() { const currentQuestion = quiz.score.lastAnsweredQuestion + 1, - questions = this.quiz.questions + questions = this.quiz.questions if(questions.length > 0) { if (quiz.score.lastAnsweredQuestion > -1 && questions.length <= currentQuestion) { diff --git a/js/quiz.resize.js b/js/quiz.resize.js index d2e3f0a..45113b9 100644 --- a/js/quiz.resize.js +++ b/js/quiz.resize.js @@ -8,13 +8,23 @@ QuizResize.prototype = { 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) { diff --git a/style/001-global-variables.sass b/style/001-global-variables.sass index e69de29..4590549 100644 --- a/style/001-global-variables.sass +++ b/style/001-global-variables.sass @@ -0,0 +1 @@ +$screenSizeMobile: 391px \ No newline at end of file diff --git a/style/100-global.sass b/style/100-global.sass index 401aeac..8707185 100644 --- a/style/100-global.sass +++ b/style/100-global.sass @@ -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 @@ -89,9 +106,12 @@ body height: 100% width: 100% object-fit: cover - +above(391px) + &.question-multiple + object-position: top + + +above($screenSizeMobile) display: none img:not(.mobile) display: none - +above(391px) + +above($screenSizeMobile) display: inline diff --git a/style/101-header-footer.sass b/style/101-header-footer.sass index c3c6384..4775a07 100644 --- 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 @@ -53,8 +61,8 @@ header .btn.primary width: 100% - max-width: 400px - +breakpoint(md) + +above(992px) + max-width: 400px position: absolute left: 50% bottom: 24px diff --git a/style/103-question-multiple.sass b/style/103-question-multiple.sass index fed8e2e..7dc8c3a 100644 --- a/style/103-question-multiple.sass +++ b/style/103-question-multiple.sass @@ -1,9 +1,14 @@ .screen.question-multiple - top: 93px + 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% @@ -16,6 +21,9 @@ border: 2px solid rgba($texts-color, .24) position: relative overflow: hidden + +below($screenSizeMobile) + height: 56px + +font-size(14) &:after content: "" width: 100% diff --git a/style/105-outro.sass b/style/105-outro.sass index 0438c0e..1ffae95 100644 --- a/style/105-outro.sass +++ b/style/105-outro.sass @@ -4,6 +4,8 @@ border-radius: 40px overflow: hidden +flex-config(false,false,row,stretch) + +below(993px) + position: static .subtitle +opacity(.8,color,$texts-color) @@ -12,6 +14,8 @@ flex: 1 padding: 24px position: relative + +below(993px) + padding: 16px h1 +font-size(40) margin-bottom: 9px @@ -23,6 +27,11 @@ 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 +41,8 @@ position: relative +font-size(80) margin-right: 60px - + +below(993px) + margin: 0 0 24px #progress-counter width: 100% height: 100% @@ -51,26 +61,58 @@ 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) + &.active + +opacity(1,background-color,$ok-color) + + &-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 +126,9 @@ #answers-list height: 85% padding-right: 24px + +below(993px) + height: 90% + padding-right: 5px .item padding-left: 20px margin-bottom: 22px @@ -117,11 +162,17 @@ .answer +opacity(.8,color,$texts-color) + .toggle-answers-review + +above(992px) + display: none + footer position: absolute width: calc(100% - 48px) bottom: 24px + +below(993px) + width: calc(100% - 32px) .restart-sentence margin-bottom: 14px .controls diff --git a/views/footer.blade.php b/views/footer.blade.php index a4de04a..bcadcba 100644 --- a/views/footer.blade.php +++ b/views/footer.blade.php @@ -1,7 +1,7 @@