Issue task PS-4119 : UI fixes in Player to support images in ASQ and …

…MTF Question
tekdi · Mar 1, 2025 · db60125 · db60125
1 parent a0fbb47
commit db60125
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 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
@@ -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
@@ -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;
-}
+// .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
@@ -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
@@ -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;
+}
+