From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 6 Oct 2023 10:22:12 +0000 (+0200)
Subject: wip #6336 @0.25
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f545ff402343c68755f7f2800f51d530f54fd482;p=fluidbook-toolbox-quiz.git

wip #6336 @0.25
---

diff --git a/style/100-global.sass b/style/100-global.sass
index dc036ac..d597543 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -235,14 +235,6 @@ body
     left: 0
     width: 100%
 
-[data-bg]
-    position: absolute
-    display: block
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    pointer-events: none
 
 // SimpleBar personalisation
 .simplebar-wrapper
@@ -266,15 +258,31 @@ body
         display: none
 
 [data-bg]
+    position: absolute
+    display: block
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    pointer-events: none
+
+    &[data-bg-type="standard"]
+        height: 160px
+
+        .m &
+            height: 20%
+
+
     img
         width: 100%
         height: 100%
 
-[data-bg-fit="cover"]
-    img
-        object-fit: cover
-        object-position: 50% 50%
 
-[data-bg-fit="fill"]
-    img
-        object-fit: fill
+    &[data-bg-fit="cover"]
+        img
+            object-fit: cover
+            object-position: 50% 50%
+
+    &[data-bg-fit="fill"]
+        img
+            object-fit: fill
diff --git a/views/components/background.blade.php b/views/components/background.blade.php
index bc3c623..df897fb 100644
--- a/views/components/background.blade.php
+++ b/views/components/background.blade.php
@@ -6,4 +6,4 @@
         $m=false;
     }
 @endphp
-<div data-bg-fit="{{$fit}}" data-bg="" data-bg-d="{{$d}}" @if($m)data-bg-m="{{$m}}"@endif></div>
+<div data-bg-type="{{$name}}" data-bg-fit="{{$fit}}" data-bg="" data-bg-d="{{$d}}" @if($m)data-bg-m="{{$m}}"@endif></div>
diff --git a/views/screens/question_country.blade.php b/views/screens/question_country.blade.php
index a31513f..99f13aa 100644
--- a/views/screens/question_country.blade.php
+++ b/views/screens/question_country.blade.php
@@ -1,4 +1,5 @@
 <div class="container-screen none" data-screen="q-{{$position}}" data-type="country">
+    @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
     <div class="fill-area"></div>
     @include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
     <div class="screen question-text question-country">
@@ -23,9 +24,5 @@
             </div>
         </form>
     </div>
-    <div class="screen-image">
-        <img src="{{$theme->standardImage}}"/>
-        <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
-    </div>
     @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
 </div>
diff --git a/views/screens/question_email.blade.php b/views/screens/question_email.blade.php
index 8d08916..28661f9 100644
--- a/views/screens/question_email.blade.php
+++ b/views/screens/question_email.blade.php
@@ -1,4 +1,5 @@
 <div class="container-screen none" data-screen="q-{{$position}}" data-type="email">
+    @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
     <div class="fill-area"></div>
     @include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
     <div class="screen question-text question-email">
@@ -14,9 +15,5 @@
             </div>
         </form>
     </div>
-    <div class="screen-image">
-        <img src="{{$theme->standardImage}}"/>
-        <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
-    </div>
     @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
 </div>
diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php
index 9f72d1f..5a5e124 100644
--- a/views/screens/question_match.blade.php
+++ b/views/screens/question_match.blade.php
@@ -11,6 +11,7 @@
 @endphp
 
 <div class="container-screen none question-match" data-type="match" data-screen="q-{{$position}}">
+    @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
     <div class="fill-area"></div>
     @include('header_question', ['data' => $data, 'max' => $max, 'position' => $position])
     <div class="screen">
@@ -41,9 +42,5 @@
             <div class="swiper-pagination-bottom"></div>
         </div>
     </div>
-    <div class="screen-image">
-        <img src="{{$theme->standardImage}}"/>
-        <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
-    </div>
     @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true, 'matchMaking' => true])
 </div>
diff --git a/views/screens/question_multiple.blade.php b/views/screens/question_multiple.blade.php
index 85c0c6c..9e62d90 100644
--- a/views/screens/question_multiple.blade.php
+++ b/views/screens/question_multiple.blade.php
@@ -1,4 +1,5 @@
 <div class="container-screen none" data-screen="q-{{$position}}" data-type="multiple">
+    @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
     <div class="fill-area"></div>
     @include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
     <div class="screen question-multiple">
@@ -20,9 +21,5 @@
             </ul>
         </form>
     </div>
-    <div class="screen-image">
-        <img src="{{$theme->standardImage}}"/>
-        <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
-    </div>
     @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
 </div>
diff --git a/views/screens/question_text.blade.php b/views/screens/question_text.blade.php
index bdb879e..449b8d6 100644
--- a/views/screens/question_text.blade.php
+++ b/views/screens/question_text.blade.php
@@ -1,16 +1,13 @@
 <div class="container-screen none" data-screen="q-{{$position}}" data-type="text">
+    @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
     <div class="fill-area"></div>
     @include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
     <div class="screen question-text">
         <form id="form-{{$position}}">
             <div class="form-group">
-                <input class="answer-text" name="text" type="text" placeholder="{{$__('Enter your answer')}}..." />
+                <input class="answer-text" name="text" type="text" placeholder="{{$__('Enter your answer')}}..."/>
             </div>
         </form>
     </div>
-    <div class="screen-image">
-        <img src="{{$theme->standardImage}}"/>
-        <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
-    </div>
     @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
 </div>
diff --git a/views/screens/question_textarea.blade.php b/views/screens/question_textarea.blade.php
index 3b70114..2556abf 100644
--- a/views/screens/question_textarea.blade.php
+++ b/views/screens/question_textarea.blade.php
@@ -1,4 +1,5 @@
 <div class="container-screen none" data-screen="q-{{$position}}" data-type="text">
+    @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
     <div class="fill-area"></div>
     @include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
     <div class="screen question-text">
@@ -8,9 +9,5 @@
             </div>
         </form>
     </div>
-    <div class="screen-image">
-        <img src="{{$theme->standardImage}}"/>
-        <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
-    </div>
     @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
 </div>