From: Vincent Vanwaelscappel Date: Fri, 18 Aug 2023 16:12:50 +0000 (+0200) Subject: wip #6182 @0.5 | fix merge mess X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c51ce455bd5309c200d9ed9185b8b30a9698a36a;p=fluidbook-toolbox-quiz.git wip #6182 @0.5 | fix merge mess --- diff --git a/js/quiz.resize.js b/js/quiz.resize.js index aa1c17e..2ec1192 100644 --- 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, '
'); + } } export default QuizResize; diff --git a/style/001-global-variables.sass b/style/001-global-variables.sass index e69de29..65d5730 100644 --- 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 763a60d..8707185 100644 --- 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 d4a269e..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 @@ -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 d0057c1..a622c27 100644 --- 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 8f61c6c..7dc8c3a 100644 --- 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 0438c0e..79baa85 100644 --- 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 dc75cc1..27cf49b 100644 --- a/views/footer.blade.php +++ b/views/footer.blade.php @@ -1,7 +1,7 @@