wip #6182 @3:30 question drag and drop

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index ad313e81f06051602567437967a71280dd2e443a..fc984bff61efdb49590f2ff7ac7b10ba1f180dfd 100644 (file)
--- 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 3ea6fbcc931af7e70cf078eb6958d61c9a2a99ef..b2c86806fce3c17eed0d17901be0187020b6ef0a 100644 (file)
--- 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 4c6aaee67cc239fa791c780cf2206d30247119b1..afd64fa21e5bde780d43b4ab972bad06d71690d2 100644 (file)
--- 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>