]> _ Git - fluidbook-toolbox-quiz.git/commitdiff
wait #6594 @1
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 3 Jan 2024 11:54:28 +0000 (12:54 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 3 Jan 2024 11:54:28 +0000 (12:54 +0100)
js/quiz.screen.intro.js
style/100-global.sass
style/102-intro.sass
views/screens/intro.blade.php

index 6ef01bc10c475a5211f1d8ccb9b5858a68ab938e..9b56e55ccab97393b499da6d4ad186af84e9ad3d 100644 (file)
@@ -21,7 +21,6 @@ QuizScreenIntro.prototype = {
     animate: function () {
         //animer le texte d'intro
         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
@@ -32,21 +31,16 @@ QuizScreenIntro.prototype = {
             .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);
+            .fromTo("#welcome .markdown", {opacity: 0, y: 20}, {opacity: 1, y: 0, duration: .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 || 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))
-        }
         this.animate();
     },
 
index 2178e75f93f4f7bce245021a35194c1ee63be6aa..882cd4857e527a94e12b7fc89580882bdf8b1407 100644 (file)
@@ -4,6 +4,8 @@
 *
     user-select: none
 
+
+
 body
     background-color: $background-color
     font-family: $font
index 7e2c726eb4c0873b7b7acdefa19cbbe4cf9ad536..6eefad0a7d1243c7c0142ed8a7830ff6ebb65c9f 100644 (file)
@@ -11,6 +11,7 @@
 
         #welcome
             top: 225px
+
             h2
                 font-size: 40px
                 text-align: center
         +font-size(20)
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
 
-    p
+    .markdown
         +font-size(16)
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
-        white-space: pre-wrap
 
-        .word
-            opacity: 0
-            transform: translateY(100px)
+        strong
+            font-weight: bold
+
+        em
+            font-style: italic
+
+        a
+            text-decoration: underline
+            color: $texts-color
+
+        li
+            +font-size(16)
+            margin: 0.5em 0
+            list-style: disc inside
 
 .m
     #welcome
index 941971c4f42df9f2330cfa88cbfea6df22432a88..3f712f8032e7e083e0a763ada89ad4b12110c081 100644 (file)
@@ -18,7 +18,8 @@
     @include('header_title', ['data'=> $headerData])
     <div class="screen vertical-center-screen" id="welcome">
         <h2>{{$data->intro_title?:$__('Welcome')}}</h2>
-        <p>{{$data->intro_text}}</p>
+        <div class="markdown only-desktop">{!! $markdownToHTML($data->intro_text) !!}</div>
+        <div class="markdown only-mobile">{!! $markdownToHTML($data->intro_text_mobile?:$data->intro_text) !!}</div>
     </div>
     <footer class="footer">
         <a id="start" aria-keyshortcuts="Space" class="btn primary">