versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 💄 Fix a few attachment layout issues

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-31 15:28:05 +01:00
parent ff030b63ee
commit 4b67f6ab9a
No known key found for this signature in database
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/notes/attachment.vue
View file

@ -10,7 +10,7 @@
<audio v-else-if="attachment.type === 'audio'" :src="attachment.url"
:alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" controls />
<DialogTrigger v-else :as-child="true">
<div class="w-full h-full flex flex-col items-center justify-center bg-muted/20">
<div class="w-full h-full flex flex-col items-center justify-center bg-muted/20 min-h-48">
<File class="size-12" />
<span class="text-sm"></span>
</div>
@ -43,7 +43,7 @@
</Button>
</DialogClose>
</div>
<div class="flex items-center justify-center overflow-hidden *:max-h-[80vh] *:max-w-[80vh]">
<div class="flex items-center justify-center overflow-hidden *:max-h-[80vh] *:max-w-[80vw]">
<img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''"
class="object-contain" />
<video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"

2
components/notes/attachments.vue
View file

@ -1,6 +1,6 @@
<template>
<!-- [&:has(>:last-child:nth-child(1))] means "when this element has 1 child" -->
<div class="mt-4 grid gap-4 grid-cols-2 *:max-h-56 sm:[&:has(>:last-child:nth-child(1))]:grid-cols-1 sm:[&:has(>:last-child:nth-child(1))>*]:max-h-72">
<div class="mt-4 grid gap-4 grid-cols-2 *:max-h-56 [&:has(>:last-child:nth-child(1))]:grid-cols-1 sm:[&:has(>:last-child:nth-child(1))>*]:max-h-72">
<Attachment v-for="attachment in attachments" :key="attachment.id" :attachment="attachment" />
</div>
</template>