48 lines
1 KiB
Vue
48 lines
1 KiB
Vue
<script setup lang="ts">
|
|
import type { mastodon } from 'masto'
|
|
|
|
const { status } = defineProps<{
|
|
status: mastodon.v1.Status | mastodon.v1.StatusEdit
|
|
fullSize?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="status-media-container" :class="`status-media-container-${status.mediaAttachments.length}`">
|
|
<template v-for="attachment of status.mediaAttachments" :key="attachment.id">
|
|
<StatusAttachment
|
|
:attachment="attachment"
|
|
:attachments="status.mediaAttachments"
|
|
:full-size="fullSize"
|
|
w-full
|
|
h-full
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="postcss">
|
|
.status-media-container {
|
|
--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>
|