From 6ef702dac03926ecf3aa160283c8d16569cb5e7d Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 16 Oct 2023 09:34:20 +0200
Subject: [PATCH] wait #6397 @0.5

---
 js/quiz.draganddrop.js              | 14 +++++++---
 style/100-global.sass               | 35 ------------------------
 style/106-question-draganddrop.sass | 41 +++++++++++++++++++++++++++++
 views/header_question.blade.php     | 13 ++++++---
 4 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index c693bdb..98c06ac 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -49,7 +49,7 @@ QuizDragAndDrop.prototype = {
             return;
         }
         //this.quiz.screens.currentQuestionAnswers.push(area === 'zone-1' ? 1 : 2);
-        console.log("index",index)
+        console.log("index", index)
         this.quiz.screens.currentQuestionAnswers.splice(index, 0, area === 'zone-1' ? 1 : 2)
 
         this.animating = true;
@@ -67,7 +67,7 @@ QuizDragAndDrop.prototype = {
                 height: slot.h,
                 x: slot.x,
                 y: slot.y,
-                fontSize: "14px",
+                fontSize: "12px",
                 padding: "7px 8px",
                 borderRadius: "8px",
                 position: 'absolute',
@@ -211,7 +211,13 @@ QuizDragAndDrop.prototype = {
 
         if (!this.quiz.resize.isMobile()) {
             let freeSlot = this.getAreaElement(zone).find(".slot:not(.active)")
-            freeSlot.eq(0).addClass("active").append("<h4>" + title + "</h4><p>" + text + "</p>").attr('data-order', target.data("id"))
+            let slotContent = "<h4>" + title + "</h4>";
+            if (text !== '') {
+                slotContent = "<p>" + text + "</p>";
+            } else {
+                freeSlot.addClass('onlyh4');
+            }
+            freeSlot.eq(0).addClass("active").html(slotContent).attr('data-order', target.data("id"))
         }
         target.remove()
     },
@@ -247,7 +253,7 @@ QuizDragAndDrop.prototype = {
     getSlotInformations: function (zone) {
         let a = this.getAreaElement(zone);
         let freeSlot = $(a).find('.slot:not(.active)')
-        if(freeSlot.index() > 5) {
+        if (freeSlot.index() > 5) {
             freeSlot = $(a).find('.slot:nth-child(6)')
         }
         freeSlot = freeSlot.eq(0);
diff --git a/style/100-global.sass b/style/100-global.sass
index a2a4a9a..db2e7b9 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -289,38 +289,3 @@ body
             object-fit: fill
 
 
-.card-holder
-    transition: background-color .2s ease
-    +opacity(.08, background-color, $texts-color)
-    +radius(16px)
-    padding: 8px
-    display: grid
-    gap: 8px
-
-    .slot
-        width: 100%
-        height: 51px
-        transition: all .3s
-        +radius(8px)
-        padding: 7px 8px
-        font-size: 12px
-
-        h4
-            font-size: 1.25em
-            font-weight: 600
-            max-height: 1.1em
-            overflow: hidden
-            text-align: left
-
-        p
-            font-size: 1em
-            font-weight: 400
-            max-height: 1em
-            overflow: hidden
-            text-align: left
-            white-space: pre-line
-            margin-top: 3px
-
-        &.active
-            background-color: rgba($opposite-texts-color, 0.24)
-            border: 1px solid rgba($texts-color, .24)
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 1e783b4..833e0b3 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -194,6 +194,47 @@
             border: 1px dashed rgba($texts-color, .24)
             z-index: 3
 
+.card-holder
+    transition: background-color .2s ease
+    +opacity(.08, background-color, $texts-color)
+    +radius(16px)
+    padding: 8px
+    display: grid
+    gap: 8px
+
+    .slot
+        width: 100%
+        height: 51px
+        transition: all .3s
+        +radius(8px)
+        padding: 7px 8px
+        font-size: 12px
+
+        &.onlyh4
+            h4
+                max-height: 2.05em
+
+        h4
+            font-size: 1.25em
+            font-weight: 600
+            max-height: 1.05em
+            overflow: hidden
+            text-align: left
+
+        p
+            font-size: 1em
+            font-weight: 400
+            max-height: 1em
+            overflow: hidden
+            text-align: left
+            white-space: pre-line
+            margin-top: 3px
+
+        &.active
+            background-color: rgba($opposite-texts-color, 0.24)
+            border: 1px solid rgba($texts-color, .24)
+
+
 .m
     .container-screen.question-draganddrop
         .controls
diff --git a/views/header_question.blade.php b/views/header_question.blade.php
index 03f1648..7b48ab1 100644
--- a/views/header_question.blade.php
+++ b/views/header_question.blade.php
@@ -1,5 +1,11 @@
 @php
     $h1class='';
+
+    $limit=105;
+    if($question['type'] === "draganddrop"){
+        $limit=40;
+    }
+
     if(mb_strlen($question['question'])>105){
         $h1class='small';
     }
@@ -15,9 +21,10 @@
     </div>
 
     @if($question['type'] === "draganddrop")
-        <h1 id="titleQuestion">
-            <span class="only-desktop">{{$__('Drag and drop each card in the right container')}}</span>
-            <span class="only-mobile">{{$__('Swipe up or down each card in the right container')}}</span>
+        <h1 class="{{$h1class}}" id="titleQuestion">
+            <span
+                class="only-desktop">{{$__('Drag and drop each card in the right container')}}{{__(': ')}}<br>{{$question['question']}}</span>
+            <span class="only-mobile">{{$__('Swipe up or down each card in the right container')}}{{__(': ')}}<br>{{$question['question']}}</span>
         </h1>
         <h2 class="subtitle only-desktop">{{$__('Use arrow keys to move the cards to the corresponding zone')}}</h2>
     @elseif($question['type']==='match')
-- 
2.39.5