From 399e56be0ed49bd23b5f68029082bb31b62bc5d0 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 14 Sep 2023 17:55:45 +0200
Subject: [PATCH] wip #6182 @3:30 question drag and drop

---
 js/quiz.draganddrop.js                       |  1 -
 style/106-question-draganddrop.sass          | 66 ++++++++++++++++++++
 views/screens/question_draganddrop.blade.php |  2 +
 3 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index ad313e8..fc984bf 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -54,7 +54,6 @@ QuizDragAndDrop.prototype = {
         })
 
         this.retreiveAnswer()
-        //let x = $(".list-item").offset().left
     },
 
     createDraggable: function($this) {
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 3ea6fbc..b2c8680 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -145,3 +145,69 @@
                 display: flex
         svg
             color: $texts-color
+
+.m
+    .container-screen.question-draganddrop
+        .controls
+            display: none
+
+        .screen-image
+            img.mobile
+                width: 100%
+                height: auto
+                left: 0
+            .zone-content
+                max-width: 95%
+                height: auto
+                left: 50%
+                transform: translateX(-50%)
+                padding: 10px 40px
+                border-radius: 8px
+                border-width: 2px
+                .text
+                    text-align: center
+                    margin: 0
+                h2
+                    margin-bottom: 5px
+                p
+                    font-size: 14px
+                    +opacity(.8,color,$texts-color)
+            .slot
+                display: none
+            &.zone-1
+                width: 100%
+                height: auto
+                .zone-content
+                    top: 29px
+
+            &.zone-2
+                height: auto
+                top: initial
+                bottom: -3px
+                left: 0
+                .zone-content
+                    top: initial
+                    bottom: 78px
+
+        .header-question
+            top: 130px
+            .progress-container
+                margin: 4px 0
+
+        .screen
+            .list
+                height: 178px
+                margin: 20px 0 0
+
+                &-item
+                    &:not(.overlay)
+                        transition: top .3s
+                        opacity: 0
+
+                        &:not(.isDragging)
+                            &:nth-child(2)
+                                top: 24px
+                            &:nth-child(3)
+                                top: 47px
+                            &:nth-child(4)
+                                top: 67px
diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index 4c6aaee..afd64fa 100644
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -1,6 +1,7 @@
 <div class="container-screen none question-draganddrop" data-screen="q-{{$position}}">
     <div class="screen-image zone-1">
         <img src="{{$theme->draganddropArea1Image}}" />
+        <img class="mobile" src="{{$theme->draganddropArea1ImageMobile}}"/>
         <div class="zone-content">
             <div class="text">
                 <h2>Zone 1</h2>
@@ -37,6 +38,7 @@
     </div>
     <div class="screen-image zone-2">
         <img src="{{$theme->draganddropArea2Image}}" />
+        <img class="mobile" src="{{$theme->draganddropArea2ImageMobile}}"/>
         <div class="zone-content">
             <div class="text">
                 <h2>Zone 1</h2>
-- 
2.39.5