From eb49973242cb7c22e42b4367e6aaee2b74cfefe0 Mon Sep 17 00:00:00 2001
From: Jeder <jeder+git@jeder.pl>
Date: Wed, 30 Oct 2024 15:41:04 +0100
Subject: [PATCH] [frontend/components] Update note attachments styling

---
 .../Components/AttachmentComponent.razor.css  | 13 +++---
 .../Components/Note/NoteAttachments.razor     |  2 +-
 .../Components/Note/NoteAttachments.razor.css | 43 ++++++++++++++++++-
 3 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/AttachmentComponent.razor.css b/Iceshrimp.Frontend/Components/AttachmentComponent.razor.css
index eea86ab6..92c49f1d 100644
--- a/Iceshrimp.Frontend/Components/AttachmentComponent.razor.css
+++ b/Iceshrimp.Frontend/Components/AttachmentComponent.razor.css
@@ -1,8 +1,8 @@
 .attachment {
     max-width: 100%;
     object-fit: contain;
-    max-height: 25rem;
-    border-radius: 0.5rem;
+    max-height: 30rem;
+    aspect-ratio: 3/2;
 }
 
 audio.attachment {
@@ -27,10 +27,11 @@ audio.attachment {
 }
 
 .wrapper {
-    flex: 1 1 48%;
-    margin-right: 0.2em;
-    margin-left: 0.2em;
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    overflow: clip;
+    background: var(--background-color);
+    border-radius: 0.5rem;
 }
 
 .blur-image {
diff --git a/Iceshrimp.Frontend/Components/Note/NoteAttachments.razor b/Iceshrimp.Frontend/Components/Note/NoteAttachments.razor
index 75494604..d68c6919 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteAttachments.razor
+++ b/Iceshrimp.Frontend/Components/Note/NoteAttachments.razor
@@ -1,5 +1,5 @@
 @using Iceshrimp.Shared.Schemas.Web
-<div class="attachment-container">
+<div class="attachment-container" data-count="@Attachments.Count">
     @foreach (var element in Attachments)
     {
         <AttachmentComponent Attachment="element" OnOpen="Open"/>
diff --git a/Iceshrimp.Frontend/Components/Note/NoteAttachments.razor.css b/Iceshrimp.Frontend/Components/Note/NoteAttachments.razor.css
index 93e81957..fbd696b9 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteAttachments.razor.css
+++ b/Iceshrimp.Frontend/Components/Note/NoteAttachments.razor.css
@@ -1,4 +1,43 @@
 .attachment-container {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    width: 100%;
+    gap: 0.5em;
 }
+
+.attachment-container:not(:is([data-count="1"])) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}
+
+.attachment-container:not(:is([data-count="3"])) {
+    > .wrapper:last-of-type:is(:nth-child(odd)) {
+        grid-column: 1 / -1;
+    }
+}
+
+.attachment-container[data-count="1"] {
+    grid-template-columns: 1fr;
+    gap: 0;
+    
+    .wrapper > .attachment {
+        aspect-ratio: unset;
+    }
+}
+
+.attachment-container[data-count="2"] {
+    > .wrapper:nth-of-type(1) {
+        grid-area: 1 / 1 / 3 / 2;
+    }
+}
+
+.attachment-container[data-count="2"] {
+    > .wrapper:nth-of-type(2) {
+        grid-area: 1 / 2 / 3 / 3;
+    }
+}
+
+.attachment-container[data-count="3"] {
+    > .wrapper:nth-of-type(1) { 
+        grid-area: 1 / 1 / 3 / 2; 
+    }
+}
\ No newline at end of file