From c1f8e3efb5a237927f92e3ca09ae680c745673b9 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Sun, 14 Apr 2024 20:04:28 +0900
Subject: [PATCH] feat: support more than 4 media attachments with 3 columns
 grid (#2802)

---
 components/status/StatusMedia.vue | 31 ++++++++++++++-----------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/components/status/StatusMedia.vue b/components/status/StatusMedia.vue
index 182e0566..0b92183c 100644
--- a/components/status/StatusMedia.vue
+++ b/components/status/StatusMedia.vue
@@ -6,10 +6,20 @@ const { status, isPreview = false } = defineProps<{
   fullSize?: boolean
   isPreview?: boolean
 }>()
+
+const gridColumnNumber = computed(() => {
+  const num = status.mediaAttachments.length
+  if (num <= 1)
+    return 1
+  else if (num <= 4)
+    return 2
+  else
+    return 3
+})
 </script>
 
 <template>
-  <div class="status-media-container" :class="`status-media-container-${status.mediaAttachments.length}`">
+  <div class="status-media-container">
     <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
       <StatusAttachment
         :attachment="attachment"
@@ -25,25 +35,12 @@ const { status, isPreview = false } = defineProps<{
 
 <style lang="postcss">
 .status-media-container {
+  --grid-cols: v-bind(gridColumnNumber);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
   --at-apply: gap-2;
   position: relative;
   width: 100%;
   overflow: hidden;
 }
-.status-media-container-1 {
-  display: grid;
-  grid-template-columns: 1fr;
-}
-.status-media-container-2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-.status-media-container-3 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-.status-media-container-4 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
 </style>