From 0ef4939ad965cd4c1bd0ec5daca4385d9c65eec3 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 6 Oct 2023 12:31:38 +0200
Subject: [PATCH] wip #6336 @0.25

---
 style/100-global.sass                            | 16 ++++++++++++++++
 style/106-question-draganddrop.sass              |  3 +--
 views/screens/question_draganddrop.blade.php     |  2 ++
 .../screens/question_draganddrop_area.blade.php  |  9 +--------
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/style/100-global.sass b/style/100-global.sass
index d597543..c4aa2fb 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -272,6 +272,22 @@ body
         .m &
             height: 20%
 
+    &[data-bg-type="draganddropArea1"], &[data-bg-type="draganddropArea2"]
+        width: 260px
+
+        .m &
+            height: 25%
+
+    &[data-bg-type="draganddropArea2"]
+        left: auto
+        right: 0
+
+        .m &
+            left: 0
+            right: auto
+            top: auto
+            bottom: 0
+
 
     img
         width: 100%
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 584f9cf..8c7f5f3 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -1,8 +1,7 @@
 [data-type="draganddrop"]
-
     .fill-area
         background-color: $standard-fill-area
-        width: 120px
+        width: 260px
         height: 100%
 
         &.area2
diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index 8243185..33c8001 100644
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -1,5 +1,7 @@
 <div class="container-screen none question-draganddrop" data-type="draganddrop" data-screen="q-{{$position}}">
     @include('screens.question_draganddrop_area',['area'=>1,'question'=>$question,'theme'=>$theme])
+    <div class="fill-area area1"></div>
+    <div class="fill-area area2"></div>
     @include('header_question', ['question' => $question, 'data' => $data, 'max' => $max, 'position' => $position])
     <div class="vertical-center-screen-relative">
         <div class="screen question-draganddrop">
diff --git a/views/screens/question_draganddrop_area.blade.php b/views/screens/question_draganddrop_area.blade.php
index 5271aa9..4ac8dad 100644
--- a/views/screens/question_draganddrop_area.blade.php
+++ b/views/screens/question_draganddrop_area.blade.php
@@ -1,12 +1,5 @@
-@php
-    $desktopImageKey='draganddropArea'.$area.'Image';
-    $mobileImageKey='draganddropArea'.$area.'ImageMobile';
-@endphp
 <div class="screen-image zone-{{$area}} notDrag" data-zone="zone-{{$area}}">
-    <div class="fill-area area1"></div>
-    <div class="fill-area area2"></div>
-    <img src="{{$theme->$desktopImageKey}}"/>
-    <img class="mobile" src="{{$theme->$mobileImageKey}}"/>
+    @include('components.background',['data'=>$data,'name'=>'draganddropArea'.$area,'fit'=>'fill'])
     <div class="zone-content">
         <div class="text">
             <h2>{{ $question['area_'.$area]['title'] }}</h2>
-- 
2.39.5