From db60125056e0f7ff1f88171195b65cc89a12d380 Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Sat, 1 Mar 2025 16:43:16 +0530
Subject: [PATCH] Issue task PS-4119 : UI fixes in Player to support images in
 ASQ and MTF Question

---
 .../asq-options/asq-options.component.html    | 10 +++--
 .../asq-options/asq-options.component.scss    | 37 +++++++++++++------
 .../mtf-options/mtf-options.component.html    |  2 +-
 .../mtf-options/mtf-options.component.scss    | 14 +++++++
 4 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.html b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.html
index 813fd7e7..c9844ef0 100644
--- a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.html
+++ b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.html
@@ -2,15 +2,16 @@
   <div id="dragdropSpace" cdkDropList [cdkDropListData]="shuffledOptions" class="vertical-list" (cdkDropListDropped)="onDrop($event)">
     <div class="box vertical-box" *ngFor="let option of shuffledOptions" cdkDrag>
       <div class="content">
-        <div class="mt-1r" [innerHTML]="option.label"></div>
+        <div class="mt-1r img-jk" [innerHTML]="option.label"></div>
       </div>
       <div class="drag-handle" style="display: flex; align-items: center;">
-        <quml-reorder></quml-reorder>
+        <!-- <quml-reorder></quml-reorder> -->
+         <span class="drag-icon">⠿</span>
       </div>
     </div>
   </div>
 </ng-container>
-
+ 
 
 
 <ng-container *ngIf="optionsShuffled && layout === 'HORIZONTAL'">
@@ -20,7 +21,8 @@
         <div class="mt-1r" [innerHTML]="option.label"></div>
       </div>
       <div  class="drag-handle" style="display: flex; align-items: center;">
-        <quml-reorder></quml-reorder>
+        <!-- <quml-reorder></quml-reorder> -->
+         <span class="drag-icon">⠿</span>
       </div>
     </div>
   </div>
diff --git a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss
index 0f7fb264..e03ac72f 100644
--- a/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss
+++ b/projects/quml-library/src/lib/asq/asq-options/asq-options.component.scss
@@ -88,12 +88,12 @@ align-items: center;
 justify-content: center;
 height: 100vh;
 }
-.drag-handle{
-  position: absolute;
-  top: 15px;
-  right: 5px;
-  cursor: move;
-}
+// .drag-handle{
+//   position: absolute;
+//   top: 15px;
+//   right: 30px;
+//   cursor: move;
+// }
 @media screen and (max-width: 600px) {
 ::ng-deep .asq-vertical-box p {
   line-height: 14px;
@@ -133,7 +133,8 @@ height: 100vh;
   // width: 250px;
   width: 90%;
   cursor: grab;
-  height: 60px;
+  min-height: 60px;
+  max-height: 100px;
   padding: 12px;
   border-left: 5px solid #99bcd8;
     border-right: 1px solid black;
@@ -145,6 +146,7 @@ height: 100vh;
   font-weight: bold;
   // transition: transform 0.2s ease-in-out;
   position: relative;
+  overflow: hidden;
 }
 
 /* Restricting drag to within the box */
@@ -155,7 +157,8 @@ height: 100vh;
 
 /* Prevent dragging outside the box */
 .cdk-drag-preview {
-  max-height: 60px;
+  min-height: 60px;
+    max-height: 100px;
 }
 
 /* List Styles */
@@ -177,11 +180,21 @@ height: 100vh;
 .drag-handle {
   cursor: grab;
   font-size: 18px;
-  padding: 5px;
   display: flex;
   align-items: center;
 }
 
-.mt-1r {
-  padding-top: 1rem !important;
-}
\ No newline at end of file
+// .mt-1r {
+//   padding-top: 1rem !important;
+// }
+::ng-deep .img-jk figure img {
+  width: 70px !important;
+  height: 50px !important;
+  object-fit: cover;
+}
+::ng-deep .img-jk p {
+  margin-bottom: 0px !important;
+}
+::ng-deep .img-jk figure {
+  position: relative;
+}
diff --git a/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.html b/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.html
index 8f7f3040..d952dc64 100644
--- a/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.html
+++ b/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.html
@@ -14,7 +14,7 @@
         [cdkDragData]="option" 
         cdkDragBoundary=".column"> <!-- Restrict dragging within the column -->
         <p [innerHTML]="option.label">{{ option.label }}</p>
-        <span class="drag-icon">⠿</span>
+        <span class="drag-icon" style="color: #000; font-weight: 700;">⠿</span>
       </div>
     </div>
   </div>
diff --git a/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss b/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss
index 75757f15..e5c4227f 100644
--- a/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss
+++ b/projects/quml-library/src/lib/mtf/mtf-options/mtf-options.component.scss
@@ -194,6 +194,8 @@ p {
   border-right: 1px solid black;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
+  min-height: 60px;
+  max-height: 80px;
 }
 
 .right-box {
@@ -202,6 +204,8 @@ p {
     border-top: 1px solid black;
     border-bottom: 1px solid black;
   cursor: grab;
+  min-height: 60px;
+    max-height: 80px;
 }
 
 .left-box1 {
@@ -271,6 +275,16 @@ p {
       padding: 8px;
     }
 }
+::ng-deep .match-box figure {
+  position: relative;
+}
+
+::ng-deep .match-box figure img {
+  width: 70px;
+    height: 50px;
+  object-fit: cover;
+}
+