From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 3 Jan 2024 11:54:28 +0000 (+0100)
Subject: wait #6594 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=eb46c5effa7db3aa253cb6845302afde639e43c2;p=fluidbook-toolbox-quiz.git

wait #6594 @1
---

diff --git a/js/quiz.screen.intro.js b/js/quiz.screen.intro.js
index 6ef01bc..9b56e55 100644
--- a/js/quiz.screen.intro.js
+++ b/js/quiz.screen.intro.js
@@ -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();
     },
 
diff --git a/style/100-global.sass b/style/100-global.sass
index 2178e75..882cd48 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -4,6 +4,8 @@
 *
     user-select: none
 
+
+
 body
     background-color: $background-color
     font-family: $font
diff --git a/style/102-intro.sass b/style/102-intro.sass
index 7e2c726..6eefad0 100644
--- a/style/102-intro.sass
+++ b/style/102-intro.sass
@@ -11,6 +11,7 @@
 
         #welcome
             top: 225px
+
             h2
                 font-size: 40px
                 text-align: center
@@ -27,14 +28,24 @@
         +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
diff --git a/views/screens/intro.blade.php b/views/screens/intro.blade.php
index 941971c..3f712f8 100644
--- a/views/screens/intro.blade.php
+++ b/views/screens/intro.blade.php
@@ -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">