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

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
Show stats 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>

6
components/preferences/profile/image-uploader.vue
View file

@ -6,7 +6,7 @@
variant="ghost"
class="h-fit w-fit p-0 m-0 relative group border overflow-hidden"
>
<Avatar size="lg" :src="image" :name="displayName" />
<Avatar class="size-32" :src="image" :name="displayName" />
<div
class="absolute inset-0 bg-background/80 flex group-hover:opacity-100 opacity-0 duration-200 items-center justify-center"
>
@ -88,7 +88,7 @@
<Label>{{
m.witty_honest_wallaby_support()
}}</Label>
<Avatar size="lg" :src="gravatarUrl" />
<Avatar class="size-32" :src="gravatarUrl" />
</div>
</FormItem>
</FormField>
@ -114,7 +114,7 @@
<Label>{{
m.witty_honest_wallaby_support()
}}</Label>
<Avatar size="lg" :src="value" />
<Avatar class="size-32" :src="value" />
</div>
</FormItem>
</FormField>

2
components/profiles/avatar.vue
View file

@ -1,5 +1,5 @@
<template>
<Avatar :class="shape.value === 'square' && 'rounded-md'">
<Avatar :class="[shape.value === 'square' && 'rounded-md', 'bg-secondary']">
<AvatarFallback v-if="name">
{{ getInitials(name) }}
</AvatarFallback>

3
components/profiles/profile-header.vue
View file

@ -16,8 +16,7 @@
class="absolute bottom-0 translate-y-1/3 left-4 flex flex-row items-start gap-2"
>
<Avatar
size="lg"
class="border"
class="size-32 border"
:src="avatar"
:name="displayName"
/>

6
components/profiles/profile.vue
View file

@ -30,7 +30,7 @@
</Button>
</ProfileActions>
</div>
<div class="flex flex-col -mt-1 gap-2 justify-center">
<div class="flex flex-col -mt-1 gap-1 justify-center">
<CardTitle class="" v-render-emojis="account.emojis">
{{ account.display_name }}
</CardTitle>
@ -45,10 +45,10 @@
>
</CopyableText>
</div>
<ProfileBadges :account="account" />
<ProfileBadges :account="account" class="my-2" />
<ProfileContent :content="account.note" :emojis="account.emojis" />
</CardContent>
<CardFooter>
<CardFooter class="flex-col *:w-full gap-4">
<ProfileStats
:creation-date="new Date(account.created_at || 0)"
:follower-count="account.followers_count"

8
nuxt.config.ts
View file

@ -33,7 +33,13 @@ export default defineNuxtConfig({
},
fonts: {
families: [
{ name: "Inter", provider: "local", weights: [400, 500, 600, 700, 800], styles: ["normal", "italic"], display: "swap" },
{
name: "Inter",
provider: "local",
weights: [400, 500, 600, 700, 800],
styles: ["normal", "italic"],
display: "swap",
},
],
},
pwa: {