1
0
mirror of https://github.com/elk-zone/elk synced 2024-12-15 15:18:00 +09:00
elk/components/status/StatusMedia.vue

48 lines
1.0 KiB
Vue
Raw Normal View History

2022-11-14 11:56:48 +09:00
<script setup lang="ts">
2023-01-06 01:48:20 +09:00
import type { Status, StatusEdit } from 'masto'
2022-11-14 11:56:48 +09:00
2022-11-14 12:33:09 +09:00
const { status } = defineProps<{
2023-01-06 01:48:20 +09:00
status: Status | StatusEdit
2022-12-14 04:26:53 +09:00
fullSize?: boolean
2022-11-14 11:56:48 +09:00
}>()
</script>
<template>
2022-11-14 12:33:09 +09:00
<div class="status-media-container" :class="`status-media-container-${status.mediaAttachments.length}`">
<template v-for="attachment of status.mediaAttachments" :key="attachment.id">
2022-11-30 12:27:19 +09:00
<StatusAttachment
:attachment="attachment"
:attachments="status.mediaAttachments"
2022-12-14 04:26:53 +09:00
:full-size="fullSize"
w-full
h-full
2022-11-30 12:27:19 +09:00
/>
2022-11-14 12:33:09 +09:00
</template>
</div>
2022-11-14 11:56:48 +09:00
</template>
2022-11-14 12:33:09 +09:00
<style lang="postcss">
.status-media-container {
--at-apply: gap-0.5;
2022-11-21 22:38:10 +09:00
position: relative;
2022-11-14 12:33:09 +09:00
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>