fix: show attachments as list

alexfriesen · Oct 15, 2024 · 236d6e5 · 236d6e5
1 parent cd881e1
commit 236d6e5
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 18 deletions.
diff --git a/src/app/components/attachments/attachments.component.html b/src/app/components/attachments/attachments.component.html
@@ -4,24 +4,30 @@
   </mat-expansion-panel-header>
 
   <ng-template matExpansionPanelContent>
-    @for (attachment of attachments(); track attachment.name) {
-    <div class="item">
-      <button class="tool" mat-mini-fab (click)="inspectAttachment(attachment)">
-        <mat-icon>search</mat-icon>
-      </button>
+    <div class="list">
+      @for (attachment of attachments(); track attachment.name) {
+      <div class="item">
+        <button
+          class="tool"
+          mat-mini-fab
+          (click)="inspectAttachment(attachment)"
+        >
+          <mat-icon>search</mat-icon>
+        </button>
 
-      @if (attachment.mimeType.includes('image/')) {
-      <mat-icon class="icon large" svgIcon="image" />
-      } @else if (attachment.mimeType.includes('xml')) {
-      <mat-icon class="icon large" svgIcon="xml" />
-      } @else {
-      <mat-icon class="icon large" svgIcon="unknown" />
-      }
+        @if (attachment.mimeType.includes('image/')) {
+        <mat-icon class="icon large" svgIcon="image" />
+        } @else if (attachment.mimeType.includes('xml')) {
+        <mat-icon class="icon large" svgIcon="xml" />
+        } @else {
+        <mat-icon class="icon large" svgIcon="unknown" />
+        }
 
-      <div class="truncate">
-        {{ attachment.name }}
+        <div class="truncate">
+          {{ attachment.name }}
+        </div>
       </div>
+      } @empty {}
     </div>
-    } @empty {}
   </ng-template>
 </mat-expansion-panel>
diff --git a/src/app/components/attachments/attachments.component.scss b/src/app/components/attachments/attachments.component.scss
@@ -6,6 +6,15 @@
   padding-right: 6rem;
 }
 
+.list {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  flex-direction: row;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
 .item {
   position: relative;
   border-radius: 0.25rem;
@@ -18,6 +27,7 @@
   box-sizing: border-box;
 
   margin: 0.5rem;
+  padding: 0.5rem;
   max-width: 200px;
 
   &:hover {
@@ -32,9 +42,9 @@
 }
 
 .icon.large {
-  font-size: 3rem;
-  width: 3rem;
-  height: 3rem;
+  font-size: 5rem;
+  width: 5rem;
+  height: 5rem;
 }
 
 .truncate {