fix wrong aspect ratio for pictos (#258)

b310-digital · Feb 14, 2024 · de8e3de · de8e3de
1 parent cc108c8
commit de8e3de
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/teammapper-backend/src/map/services/maps.service.ts b/teammapper-backend/src/map/services/maps.service.ts
@@ -83,7 +83,6 @@ export class MapsService {
       this.logger.warn(
         `Parent with id ${clientNode.parent} does not exist for node ${clientNode.id} and map ${mapId}`
       )
-      this.logger.warn(clientNodes.map((node) => [node.id, node.parent]))
       return accCreatedNodes
     }
 

diff --git a/...src/app/modules/application/components/dialog-pictograms/dialog-pictograms.component.html b/...src/app/modules/application/components/dialog-pictograms/dialog-pictograms.component.html
@@ -8,7 +8,7 @@ <h2 mat-dialog-title>{{ 'MODALS.PICTOGRAMS.TITLE' | translate }}</h2>
     </button>
   </mat-form-field>
   <ng-container *ngIf="cardLayout | async as layout">
-  <mat-grid-list cols="2" rowHeight="2:1" [cols]="layout.columns">
+  <mat-grid-list rowHeight="2:1" [cols]="layout.columns">
     <div *ngIf="!pictos">{{ 'MODALS.PICTOGRAMS.EMPTY' | translate }}</div>
     <mat-grid-tile *ngFor="let picto of pictos;" [colspan]="layout.miniCard.cols" [rowspan]="layout.miniCard.rows" class="image-wrapper">
       <img ngSrc="{{getImageUrlOfId(picto._id)}}" (click)="getImageFileOfId(picto._id)" width="150" height="150">

diff --git a/...d/src/app/modules/application/components/dialog-pictograms/dialog-pictograms.component.ts b/...d/src/app/modules/application/components/dialog-pictograms/dialog-pictograms.component.ts
@@ -1,7 +1,11 @@
 import { Component, EventEmitter, HostListener } from '@angular/core';
 import { IPictogramResponse } from 'src/app/core/services/pictograms/picto-types';
 import { PictogramService } from 'src/app/core/services/pictograms/pictogram.service';
-import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
+import {
+  Breakpoints,
+  BreakpointObserver,
+  BreakpointState,
+} from '@angular/cdk/layout';
 import { map } from 'rxjs/operators';
 import { MmpService } from 'src/app/core/services/mmp/mmp.service';
 import { UtilsService } from 'src/app/core/services/utils/utils.service';
@@ -16,18 +20,25 @@ export class DialogPictogramsComponent {
   public onPictogramAdd = new EventEmitter();
   public searchTerm = '';
   public cardLayout = this.breakpointObserver
-    .observe([Breakpoints.Handset])
+    .observe([Breakpoints.WebLandscape, Breakpoints.TabletLandscape])
     .pipe(
-      map(({ matches }) => {
-        if (matches) {
+      map((state: BreakpointState) => {
+        if (state.breakpoints[Breakpoints.TabletLandscape]) {
           return {
-            columns: 1,
+            columns: 2,
+            miniCard: { cols: 1, rows: 1 },
+          };
+        }
+
+        if (state.breakpoints[Breakpoints.WebLandscape]) {
+          return {
+            columns: 4,
             miniCard: { cols: 1, rows: 1 },
           };
         }
 
         return {
-          columns: 4,
+          columns: 1,
           miniCard: { cols: 1, rows: 1 },
         };
       })