versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: 🐛 Fix various layout issues from previous update
Some checks failed
CodeQL / Analyze (javascript) (push) Failing after 0s
Details
Deploy to GitHub Pages / build (push) Failing after 0s
Details
Deploy to GitHub Pages / deploy (push) Has been skipped
Details
Docker / build (push) Failing after 0s
Details
Mirror to Codeberg / Mirror (push) Failing after 0s
Details

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-04-15 23:31:50 +02:00
parent ba0b5bf4ad
commit e0204e234b
No known key found for this signature in database
6 changed files with 45 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

58
components/notes/attachment.vue
View file

@ -1,6 +1,6 @@
<template>
<Dialog>
<Card class="w-full h-full overflow-hidden relative">
<Card class="w-full h-full overflow-hidden relative p-0">
<DialogTrigger v-if="attachment.type === 'image'" :as-child="true">
<img :src="attachment.url" :alt="attachment.description ?? undefined"
class="w-full h-full object-contain bg-muted/20" />
@ -30,36 +30,38 @@
</Popover>
</Card>
<DialogContent :hide-close="true"
class="fixed inset-0 z-50 w-screen h-screen p-6 duration-200 bg-transparent border-none grid grid-rows-[auto_1fr_auto] overflow-hidden translate-x-0 translate-y-0 max-w-full !animate-none gap-6">
<div class="flex flex-row gap-2 w-full">
<DialogTitle class="sr-only">{{ attachment.type }}</DialogTitle>
<Button as="a" :href="attachment?.url" target="_blank" :download="true" variant="ghost" size="icon"
class="[&_svg]:size-6 ml-auto">
<Download />
</Button>
<DialogClose :as-child="true">
<Button variant="ghost" size="icon" class="[&_svg]:size-6">
<X />
class="p-6 duration-200 bg-transparent border-none overflow-hidden !animate-none gap-6 w-screen h-screen !max-w-none">
<div class="grid grid-rows-[auto_1fr_auto]">
<div class="flex flex-row gap-2 w-full">
<DialogTitle class="sr-only">{{ attachment.type }}</DialogTitle>
<Button as="a" :href="attachment?.url" target="_blank" :download="true" variant="ghost" size="icon"
class="[&_svg]:size-6 ml-auto">
<Download />
</Button>
</DialogClose>
</div>
<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"
:alt="attachment.description ?? ''" class="object-cover" controls />
<audio v-else-if="attachment.type === 'audio'" :src="attachment.url" :alt="attachment.description ?? ''"
class="object-cover" controls />
<div v-else class="flex flex-col items-center justify-center">
<File class="size-12" />
<span class="text-sm"></span>
<DialogClose :as-child="true">
<Button variant="ghost" size="icon" class="[&_svg]:size-6">
<X />
</Button>
</DialogClose>
</div>
<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"
:alt="attachment.description ?? ''" class="object-cover" controls />
<audio v-else-if="attachment.type === 'audio'" :src="attachment.url"
:alt="attachment.description ?? ''" class="object-cover" controls />
<div v-else class="flex flex-col items-center justify-center">
<File class="size-12" />
<span class="text-sm"></span>
</div>
</div>
<DialogDescription class="flex items-center justify-center">
<Card v-if="attachment.description" class="p-4 max-w-md max-h-48 overflow-auto">
<p class="text-sm">{{ attachment.description }}</p>
</Card>
</DialogDescription>
</div>
<DialogDescription class="flex items-center justify-center">
<Card v-if="attachment.description" class="p-4 max-w-md max-h-48 overflow-auto">
<p class="text-sm">{{ attachment.description }}</p>
</Card>
</DialogDescription>
</DialogContent>
</Dialog>
</template>