From 1f8b1e877db33a2d226c5100d99d362bbb8876da Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Thu, 13 Feb 2025 16:56:31 +0530
Subject: [PATCH] Issue task PS-3899 : UI is breaking of Teacher app added
 unnecessary horizontal scroll on windows browsers

---
 .../quml-demo-app/src/app/app.component.ts    |   1 +
 .../mtf-options/mtf-options.component.html    |  53 +--
 .../mtf-options/mtf-options.component.scss    | 373 +++++++++---------
 3 files changed, 215 insertions(+), 212 deletions(-)

diff --git a/projects/quml-demo-app/src/app/app.component.ts b/projects/quml-demo-app/src/app/app.component.ts
index 80c7e4c7..ff9a35ac 100644
--- a/projects/quml-demo-app/src/app/app.component.ts
+++ b/projects/quml-demo-app/src/app/app.component.ts
@@ -9,6 +9,7 @@ import { DataService } from './services/data.service';
 })
 export class AppComponent implements OnInit {
   contentId = 'do_214234702021410816111';
+  // contentId = 'do_214248762435878912148';
   playerConfig: any;
 
   constructor(private dataService: DataService) { }
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 c42e439f..8f7f3040 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
@@ -1,40 +1,44 @@
 <ng-container *ngIf="optionsShuffled && (layout === 'VERTICAL' || layout === 'DEFAULT')">
-  <div class="main-div">
-    <div id="leftSide">
-      <div *ngFor="let option of shuffledOptions.left" class="bubble-right">
-        <div [innerHTML]="option.label" appCheckFigure></div>
-        <div class="zoom-icon" (click)="openModal($event)"></div>
+  <div class="matching-container">
+    <!-- Left Side (Static) -->
+    <div class="column" style="cursor: not-allowed;">
+      <div *ngFor="let option of shuffledOptions.left" class="match-box left-box">
+        <p [innerHTML]="option.label">{{ option.label }}</p>
+        <span class="">⋮</span>  
       </div>
     </div>
-    <div id="rightSide" cdkDropList (cdkDropListDropped)="onDrop($event)">
-      <div *ngFor="let option of shuffledOptions.right; let i = index" class="bubble-left" cdkDrag
-        [cdkDragData]="option" cdkDragBoundary="#rightSide">
-        <div [innerHTML]="option.label" appCheckFigure></div>
-        <div class="zoom-icon" (click)="openModal($event)"></div>
-      </div>
-    </div>
-    <!-- Modal -->
-    <div class="mft-modal modal" *ngIf="isModalVisible">
-      <div class="modal-content">
-        <span class="modal-close" (click)="closeModal()">&times;</span>
-        <img [src]="selectedImageSrc" />
+
+    <!-- Right Side (Draggable) -->
+    <div class="column" cdkDropList (cdkDropListDropped)="onDrop($event)">
+      <div *ngFor="let option of shuffledOptions.right" class="match-box right-box" cdkDrag 
+        [cdkDragData]="option" 
+        cdkDragBoundary=".column"> <!-- Restrict dragging within the column -->
+        <p [innerHTML]="option.label">{{ option.label }}</p>
+        <span class="drag-icon">⠿</span>
       </div>
     </div>
   </div>
 </ng-container>
 
+
+
+
+
 <ng-container *ngIf="optionsShuffled && layout === 'HORIZONTAL'">
-  <div class="horizontal-main">
+  <div class="horizontal-main matching-container" style="display: flex; flex-direction: column; gap: 70px;">
     <div id="topSide">
-      <div *ngFor="let option of shuffledOptions.left; let i = index" class="bubble-bottom">
-        <div [innerHTML]="option.label" appCheckFigure></div>
+      <div  style="width: 100%; margin-top: unset !important;" *ngFor="let option of shuffledOptions.left; let i = index" class="match-box left-box1">
+        <p [innerHTML]="option.label" appCheckFigure></p>
+        <span>⋮</span> 
         <div class="zoom-icon" (click)="openModal($event)"></div>
       </div>
     </div>
     <div id="bottomSide" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
-      <div *ngFor="let option of shuffledOptions.right; let i = index" class="bubble-top" [cdkDragData]="option"
-        cdkDrag>
-        <div [innerHTML]="option.label" cdkDragBoundary="#bottomSide" appCheckFigure></div>
+      <div *ngFor="let option of shuffledOptions.right; let i = index" class="bubble-top" [cdkDragData]="option" cdkDrag   style="width: 100%;  margin-top: unset !important;" class="match-box right-box1">
+
+
+        <p cdkDragBoundary="#bottomSide" appCheckFigure [innerHTML]="option.label">{{ option.label }}</p>
+        <span class="drag-icon">⠿</span>
         <div class="zoom-icon" (click)="openModal($event)"></div>
       </div>
     </div>
@@ -46,4 +50,5 @@
       </div>
     </div>
   </div>
-</ng-container>
\ No newline at end of file
+</ng-container>
+
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 d73720da..ab121c55 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
@@ -1,13 +1,19 @@
-.main-div {
-  background: #eee;
-  display: flex;
-  width: 100%;
-  padding: 2%;
-}
+
 
 #leftSide {
   flex-basis: 50%;
 }
+#rightSide div:last-child{
+  margin-top: 1px  !important;
+}
+
+#rightSide div:nth-child(3) {
+  margin-top: 3px !important;
+}
+
+#rightSide div:nth-child(2) {
+  margin-top: 1px !important;
+}
 
 ::ng-deep .main-div figure.image img,
 ::ng-deep .horizontal-main figure.image img {
@@ -24,25 +30,25 @@
   flex-basis: 50%;
 }
 
-.horizontal-main {
-  background: #eee;
-  width: 100%;
-  padding: 20px;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
+
 
 #topSide {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
+    display: flex;
+      flex-direction: row;
+      justify-content: center;
+      gap: 20px;
+      overflow: hidden;
+      width: 100%;
 }
 
 #bottomSide {
   min-height: 60px;
   display: flex;
   flex-direction: row;
-  margin-top: -3%;
+  // margin-top: -3%;  
+  justify-content: center;
+  gap: 20px;
+  width: 100%;
 }
 
 .cdk-drag-preview {
@@ -74,146 +80,13 @@
 
 
 //ui changes
-.bubble-left {
-  margin-left: 10px;
-  padding: 50px;
-  --size: 150px;
-  position: relative;
-  width: var(--size);
-  height: calc(var(--size) * 0.66);
-  border-radius: 10px;
-  width: 100%;
-  margin-bottom: 20px;
-  border: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  cursor: move;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background: #fff;
-  z-index: 1;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-}
 
-.bubble-left:before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 0;
-  height: 0;
-  border: calc(var(--size) * 0.13) solid transparent;
-  border-right-color: #fff;
-  border-left: 0;
-  margin-top: calc(var(--size) * 0.13 * -1);
-  margin-left: calc(var(--size) * 0.13 * -1);
-}
-
-.bubble-right {
-  --size: 150px;
-  padding: 50px;
-  position: relative;
-  width: var(--size);
-  height: calc(var(--size) * 0.66);
-  cursor: not-allowed;
-  border-radius: 10px;
-  width: 100%;
-  margin-bottom: 20px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background: #fff;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  clip-path: polygon(100% 0, 100% 32%, 96% 51%, 100% 72%, 100% 100%, 50% 100%, 21% 100%, 0 100%, 0 0, 41% 0);
-  z-index: 1;
-}
 
-.bubble-right:before {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 50%;
-  width: 0;
-  height: 0;
-  border: calc(var(--size) * 0.13) solid transparent;
-  border-left-color: #fff;
-  border-right: 0;
-  margin-top: calc(var(--size) * 0.13 * -1);
-  margin-right: calc(var(--size) * 0.13 * -1);
-}
-
-.bubble-bottom {
-  margin: 10px;
-  --size: 200px;
-  margin-bottom: 30px;
-  position: relative;
-  width: var(--size);
-  height: calc(var(--size) * 0.66);
-  cursor: not-allowed;
-  width: var(--size);
-  height: calc(var(--size) * 0.66);
-  border-radius: 10px;
-  width: 92%;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background: #fff;
-  z-index: 1;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  margin-bottom: 30px;
-  clip-path: polygon(50% 0%, 100% 0, 100% 100%, 61% 100%, 50% 79%, 39% 100%, 0 100%, 0 0);
-}
 
-.bubble-bottom:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border: calc(var(--size) * 0.13) solid transparent;
-  border-top-color: #fff;
-  border-bottom: 0;
-  margin-left: calc(var(--size) * 0.13 * -1);
-  margin-bottom: calc(var(--size) * 0.13 * -1);
-}
-
-.bubble-top {
-  cursor: move;
-  margin: 10px;
-  --size: 200px;
-  margin-top: 2%;
-  position: relative;
-  width: var(--size);
-  height: calc(var(--size) * 0.66);
-  border-radius: 10px;
-  width: 92%;
-  margin-bottom: 10px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background: #fff;
-  z-index: 1;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-}
 
-.bubble-top:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border: calc(var(--size) * 0.13) solid transparent;
-  border-bottom-color: #fff;
-  border-top: 0;
-  margin-left: calc(var(--size) * 0.13 * -1);
-  margin-top: calc(var(--size) * 0.13 * -1);
-}
+
+
+
 
 .zoom-icon {
   position: absolute;
@@ -270,63 +143,187 @@
   cursor: pointer;
 }
 
-@media screen and (max-width: 768px) {
+
+@media screen and (min-width: 1200px) {
   ::ng-deep.main-div p {
-    font-size: 12px;
-    line-height: 20px;
+    font-size: 16px;
+    line-height: 25px;
     margin-bottom: 0px;
   }
 
   ::ng-deep.horizontal-main p {
-    font-size: 11px;
-    line-height: 16px;
-    margin-bottom: 0;
+    font-size: 16px;
+    line-height: 25px;
+    margin-bottom: 0px;
   }
 
-  .horizontal-main {
-    padding: 0px;
+  .mft-modal .modal-content img {
+    width: 900px;
+    height: 300px;
+    object-fit: contain;
   }
+}
+p {
+  margin-top: unset !important;
+  margin-bottom: unset !important;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-  .bubble-right {
-    padding: 0px;
-  }
 
-  .bubble-left {
-    padding: 0px;
-  }
 
-  .bubble-bottom {
-    margin: 10px 2px 20px;
+
+
+
+
+
+
+
+
+
+
+.matching-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  padding: 30px;
+  background: #f0f0f0;
+  border-radius: 20px;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  width: 660px;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.match-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: white;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.left-box {
+  border-left: 5px solid #99bcd8;
+  border-right: 1px solid black;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+}
+
+.right-box {
+  border-left: 5px solid #dd918f;
+  border-right: 1px solid black;
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  cursor: grab;
+}
+
+.left-box1 {
+  border-left: 5px solid #99bcd8;
+  border-right: 1px solid black;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+}
+
+.right-box1 {
+  border-left: 5px solid #dd918f;
+  border-right: 1px solid black;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  cursor: grab;
+}
+
+.right-box:hover {
+  transform: scale(1.05);
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
+}
+.right-box1:hover {
+  transform: scale(1.05);
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
+}
+
+.drag-icon {
+  color: #888;
+  font-size: 20px;
+  cursor: grab;
+}
+.right-box  p {
+  margin-top: 16px !important;
+}
+
+.left-box p {
+  margin-top: 16px !important;
+}
+
+
+
+@media screen and (max-width: 768px) {
+  ::ng-deep.main-div p {
+    font-size: 12px;
+    line-height: 20px;
+    margin-bottom: 0px;
   }
 
-  .bubble-top {
-    margin: 2% 2px 4px;
+  ::ng-deep.horizontal-main p {
+    font-size: 11px;
+    line-height: 16px;
+    margin-bottom: 0;
   }
 
+
   ::ng-deep .main-div figure.image img,
   ::ng-deep .horizontal-main figure.image img {
     width: 70px;
     height: 70px;
     object-fit: contain;
   }
-}
 
-@media screen and (min-width: 1200px) {
-  ::ng-deep.main-div p {
-    font-size: 16px;
-    line-height: 25px;
-    margin-bottom: 0px;
+  .match-box {
+    padding: 12px 8px;
   }
+    .matching-container{
+      padding: 8px;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-  ::ng-deep.horizontal-main p {
-    font-size: 16px;
-    line-height: 25px;
-    margin-bottom: 0px;
-  }
 
-  .mft-modal .modal-content img {
-    width: 900px;
-    height: 300px;
-    object-fit: contain;
-  }
-}
\ No newline at end of file