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

refactor: 💄 Add slight "frosted glass" effect to some cards, improve color variety, make avatars smaller

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

2
app.vue
View file

@ -91,6 +91,6 @@ body {
html.theme-changing * {
/* Stroke and fill aren't animatable */
transition: background 1s ease, border 1s ease, color 1s ease, box-shadow 1s ease !important;
transition: background-color 1s ease, border 1s ease, color 1s ease, box-shadow 1s ease !important;
}
</style>

2
components/composer/dialog.vue
View file

@ -67,7 +67,7 @@ const relation = ref(
}
}">
<DialogContent :hide-close="true"
class="sm:max-w-xl max-w-full w-full grid-rows-[minmax(0,1fr)_auto] max-h-[90dvh] p-5 pt-6 top-0 sm:top-1/2 translate-y-0 sm:-translate-y-1/2">
class="sm:max-w-xl max-w-full w-[calc(100%-2*0.5rem)] grid-rows-[minmax(0,1fr)_auto] max-h-[90dvh] p-5 pt-6 top-2 sm:top-1/2 translate-y-0 sm:-translate-y-1/2 rounded">
<DialogTitle class="sr-only">
{{ relation?.type === "reply" ? m.loved_busy_mantis_slide() : relation?.type === "quote" ? "Quote" :
m.chunky_dull_marlin_trip() }}

4
components/notes/header.vue
View file

@ -6,8 +6,8 @@
}
}" :open-delay="2000">
<HoverCardTrigger :as-child="true">
<NuxtLink :href="urlAsPath" :class="cn('relative size-14', smallLayout && 'size-8')">
<Avatar :class="cn('size-14 border border-card', smallLayout && 'size-8')" :src="author.avatar"
<NuxtLink :href="urlAsPath" :class="cn('relative size-12', smallLayout && 'size-8')">
<Avatar :class="cn('size-12 border border-card', smallLayout && 'size-8')" :src="author.avatar"
:name="author.display_name" />
<Avatar v-if="cornerAvatar" class="size-6 border absolute -bottom-1 -right-1" :src="cornerAvatar" />
</NuxtLink>

4
components/notes/note.vue
View file

@ -7,8 +7,8 @@
:corner-avatar="note.reblog ? note.account.avatar : undefined" :note-url="url"
:visibility="noteToUse.visibility" :created-at="new Date(noteToUse.created_at)"
:small-layout="smallLayout" class="z-[1]" />
<div v-if="topAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute top-0 h-7 left-[3.25rem]')"></div>
<div v-if="bottomAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute bottom-0 h-[calc(100%-1.5rem)] left-[3.25rem]')"></div>
<div v-if="topAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute top-0 h-7 left-[3rem]')"></div>
<div v-if="bottomAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute bottom-0 h-[calc(100%-1.5rem)] left-[3rem]')"></div>
</CardHeader>
<!-- Simply offset by the size of avatar + 0.75rem (the gap) -->
<CardContent :class="contentUnderUsername && (smallLayout ? 'ml-11' : 'ml-[4.25rem]')">

2
components/ui/card/Card.vue
View file

@ -17,7 +17,7 @@ const props = withDefaults(
:as-child="props.asChild"
:class="
cn(
'rounded-lg border bg-card text-card-foreground shadow-sm',
'rounded-lg border bg-card/20 backdrop-blur-xl text-card-foreground shadow-sm',
props.class,
)
"

17
components/ui/dialog/DialogContent.vue
View file

@ -32,22 +32,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
/>
<DialogContent
v-bind="forwarded"
:class="
cn(
class="fixed inset-0 z-50 bg-black/80 backdrop-blur data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
<DialogContent v-bind="forwarded" :class="cn(
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
props.class,
)"
>
)">
<slot />
<DialogClose
v-if="!props.hideClose"
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
>
<DialogClose v-if="!props.hideClose"
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X class="size-4" />
<span class="sr-only">Close</span>
</DialogClose>

4
styles/index.css
View file

@ -15,7 +15,7 @@
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card: 241 10% 99%;
--card-foreground: 240 10% 3.9%;
--border: 240 5.9% 90%;
@ -60,7 +60,7 @@
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card: 240 10% 5%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;