]> _ Git - fluidbook-toolbox-quiz.git/commitdiff
wip #6336 @0.25
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Fri, 6 Oct 2023 10:22:12 +0000 (12:22 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Fri, 6 Oct 2023 10:22:12 +0000 (12:22 +0200)
style/100-global.sass
views/components/background.blade.php
views/screens/question_country.blade.php
views/screens/question_email.blade.php
views/screens/question_match.blade.php
views/screens/question_multiple.blade.php
views/screens/question_text.blade.php
views/screens/question_textarea.blade.php

index dc036acb216ccfea290e77900f6a158e8e8bf94b..d597543189cc461f1208396ddea4bd4315f4fd70 100644 (file)
@@ -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
index bc3c623c8f33636101ff9919117819c10b10305d..df897fbd5d2f385398979c8ba5cc58cacc7e2599 100644 (file)
@@ -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>
index a31513f77a162f7f2061d8842207afa3b641cad6..99f13aa0f7d19af9dc69daafa3be538b015d6c0e 100644 (file)
@@ -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>
index 8d089165bebcd91667848cf719da9877dcb8c778..28661f9a9ee94f91acec4127db24375babbc1274 100644 (file)
@@ -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>
index 9f72d1ff7ee3259a8086e907c61b17babe3eaeba..5a5e124e45c529b206e33762593c8a393e883604 100644 (file)
@@ -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>
index 85c0c6cbe8c71477b4fa44b6c43784a010f2cf57..9e62d903617dcc3d33c310e8edb89797305697fb 100644 (file)
@@ -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>
index bdb879e2e5eb4eead63e161a5096ca22c7f52a34..449b8d635e8dbb94cf2f5116bf89bcae88708bcd 100644 (file)
@@ -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>
index 3b701141e14ee4774a02d14810323e24916ef90e..2556abff41313ccdad67514656695f6b5b56f4a7 100644 (file)
@@ -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>