feat: support more than 4 media attachments with 3 columns grid (elk-…

…zone#2802)
joshfisidi · Apr 14, 2024 · c1f8e3e · c1f8e3e
1 parent e4c7124
commit c1f8e3e
Showing 1 changed file with 14 additions and 17 deletions.
diff --git 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>