Issue task PS-3899 : UI is breaking of Teacher app added unnecessary …

…horizontal scroll on windows browsers
tekdi · Feb 13, 2025 · 1f8b1e8 · 1f8b1e8
1 parent 71bcd91
commit 1f8b1e8
Show file tree

Hide file tree

Showing 3 changed files with 215 additions and 212 deletions.
diff --git 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
@@ -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>
+</ng-container>
+