Merge pull request #1032 from DSD-DBS/better-mobile-space-usage

feat: Improve diagram cache margins on mobile phones
DSD-DBS · Oct 10, 2023 · 1e68933 · 1e68933
2 parents e2bd86b + 350617c
commit 1e68933
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/...src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html b/...src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
@@ -117,4 +117,8 @@ <h2>View diagrams</h2>
   >
     No diagrams for the given filter found. Please remove your search query.
   </div>
+  <div class="w-full md:hidden sticky bottom-0 bg-white">
+    <mat-divider id="bottom-divider"></mat-divider>
+    <button class="w-full" mat-button mat-dialog-close>Close</button>
+  </div>
 </div>
diff --git a/...d/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts b/...d/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
@@ -130,8 +130,16 @@ export class ModelDiagramDialogComponent {
     const loadingDiagram = this.diagrams[diagram.uuid];
     if (!loadingDiagram.loading) {
       this.dialog.open(ModelDiagramPreviewDialogComponent, {
-        height: '80vh',
-        width: '80vw',
+        maxWidth: '100vw',
+        panelClass: [
+          'md:w-[85vw]',
+          'md:h-[85vw]',
+          'md:max-h-[85vh]',
+          'max-h-full',
+          'w-full',
+          'h-full',
+          '!max-w-full',
+        ],
         data: {
           diagram: diagram,
           content: loadingDiagram.content,

diff --git a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
@@ -62,8 +62,15 @@ export class ModelOverviewComponent implements OnInit {
 
   openDiagramsDialog(model: Model): void {
     this.dialog.open(ModelDiagramDialogComponent, {
-      height: '80vh',
-      width: '80vw',
+      maxWidth: '100vw',
+      panelClass: [
+        'md:w-[85vw]',
+        'md:h-[85vw]',
+        'md:max-h-[85vh]',
+        'max-h-full',
+        'w-full',
+        'h-full',
+      ],
       data: { modelSlug: model.slug, projectSlug: this.projectSlug },
     });
   }