refactor: use v-bind css function for gridColumnNumber

elk-zone · Apr 12, 2024 · f2e5e6e · f2e5e6e
1 parent 5b2d75f
commit f2e5e6e
Showing 1 changed file with 4 additions and 13 deletions.
diff --git a/components/status/StatusMedia.vue b/components/status/StatusMedia.vue
@@ -19,7 +19,7 @@ const gridColumnNumber = computed(() => {
 </script>
 
 <template>
-  <div class="status-media-container" :class="`status-media-container-${gridColumnNumber}`">
+  <div class="status-media-container">
     <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
       <StatusAttachment
         :attachment="attachment"
@@ -35,21 +35,12 @@ const gridColumnNumber = computed(() => {
 
 <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: repeat(2, 1fr);
-}
-.status-media-container-3 {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
 </style>