feat: support more than 4 media attachments with 3 columns grid (#2802)
parent
e4c7124d28
commit
c1f8e3efb5
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue