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

feat: 💄 UI changes, new collapsible sidebars

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-08 02:15:21 -10:00
parent 45eb8c6309
commit d8c7558bcb
No known key found for this signature in database
14 changed files with 222 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/avatars/Centered.vue Normal file
View file

@ -0,0 +1,18 @@
<template>
<div v-bind="$props" class="bg-dark-700 overflow-hidden flex items-center justify-center">
<Skeleton :enabled="!url" class="!h-full !w-full">
<img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="url" :alt="alt" />
</Skeleton>
</div>
</template>
<script lang="ts" setup>
import type { HTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ HTMLAttributes {
url?: string;
alt?: string;
}
defineProps<Props>();
</script>

2
components/composer/modal.vue
View file

@ -14,7 +14,7 @@
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<HeadlessDialogPanel
class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-white/10 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
<Composer v-if="instance" :instance="instance" />
</HeadlessDialogPanel>
</HeadlessTransitionChild>

39
components/sidebars/collapsible-aside.vue Normal file
View file

@ -0,0 +1,39 @@
<template>
<aside v-bind="$props" class="overflow-hidden">
<div
:class="['flex max-h-dvh overflow-hidden w-full duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
<div class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
<slot />
</div>
<button @click="open = !open"
class="h-full bg-dark-700/50 hover:bg-dark-400/50 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
<Icon name="tabler:chevron-right"
:class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
aria-hidden="true" />
</button>
</div>
</aside>
</template>
<script lang="ts" setup>
// slides in and out from the left or right
import type { HTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ HTMLAttributes {
direction?: "left" | "right";
initial?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
direction: "left",
initial: false,
});
const leaveClass = computed(() =>
props.direction === "left"
? "-translate-x-[calc(100%-1rem)]"
: "translate-x-[calc(100%-1rem)]",
);
const enterClass = "translate-x-0";
const open = ref(props.initial);
</script>

60
components/sidebars/navigation.vue
View file

@ -64,13 +64,15 @@
</template>
<template #items>
<HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href" :href="timeline.href">
<NuxtLink>
<ButtonsDropdownElement :icon="timeline.icon" class="w-full">
{{ timeline.name }}
</ButtonsDropdownElement>
</NuxtLink>
</HeadlessMenuItem>
<ClientOnly>
<HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href" :href="timeline.href">
<NuxtLink>
<ButtonsDropdownElement :icon="timeline.icon" class="w-full">
{{ timeline.name }}
</ButtonsDropdownElement>
</NuxtLink>
</HeadlessMenuItem>
</ClientOnly>
</template>
</DropdownsAdaptiveDropdown>
<NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
@ -86,25 +88,27 @@
</template>
<template #items>
<HeadlessMenuItem v-if="tokenData">
<ButtonsDropdownElement icon="tabler:logout" class="w-full"
@click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
Sign Out
</ButtonsDropdownElement>
</HeadlessMenuItem>
<HeadlessMenuItem v-if="!tokenData">
<ButtonsDropdownElement icon="tabler:login" class="w-full"
@click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
Sign In
</ButtonsDropdownElement>
</HeadlessMenuItem>
<HeadlessMenuItem v-if="!tokenData">
<NuxtLink href="/register">
<ButtonsDropdownElement icon="tabler:certificate" class="w-full">
Register
<ClientOnly>
<HeadlessMenuItem v-if="tokenData">
<ButtonsDropdownElement icon="tabler:logout" class="w-full"
@click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
Sign Out
</ButtonsDropdownElement>
</NuxtLink>
</HeadlessMenuItem>
</HeadlessMenuItem>
<HeadlessMenuItem v-if="!tokenData">
<ButtonsDropdownElement icon="tabler:login" class="w-full"
@click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
Sign In
</ButtonsDropdownElement>
</HeadlessMenuItem>
<HeadlessMenuItem v-if="!tokenData">
<NuxtLink href="/register">
<ButtonsDropdownElement icon="tabler:certificate" class="w-full">
Register
</ButtonsDropdownElement>
</NuxtLink>
</HeadlessMenuItem>
</ClientOnly>
</template>
</DropdownsAdaptiveDropdown>
<button @click="compose" v-if="tokenData"
@ -133,6 +137,12 @@ const timelines = ref([
name: "Local",
icon: "tabler:home",
},
{
href: "/notifications",
name: "Notifications",
icon: "tabler:bell",
requiresAuth: true,
},
]);
const visibleTimelines = computed(() =>

20
components/social-elements/notes/header.vue
View file

@ -1,11 +1,9 @@
<template>
<div v-if="small" class="flex flex-row">
<Skeleton :enabled="!note" shape="rect" class="!h-6 w-6">
<NuxtLink :href="accountUrl" class="shrink-0">
<img class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0" :src="note?.account.avatar"
:alt="`${note?.account.acct}'s avatar`" />
</NuxtLink>
</Skeleton>
<NuxtLink :href="accountUrl" class="shrink-0">
<AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
class="h-6 w-6 rounded ring-1 ring-white/5" />
</NuxtLink>
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
<div class="flex flex-row text-sm items-center justify-between w-full">
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
@ -23,12 +21,10 @@
</div>
</div>
<div v-else class="flex flex-row">
<Skeleton :enabled="!note" shape="rect" class="!h-12 w-12">
<NuxtLink :href="accountUrl" class="shrink-0">
<img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
:alt="`${note?.account.acct}'s avatar`" />
</NuxtLink>
</Skeleton>
<NuxtLink :href="accountUrl" class="shrink-0">
<AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
class="h-12 w-12 rounded ring-1 ring-white/5" />
</NuxtLink>
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
<div class="flex flex-row items-center justify-between w-full">
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">

2
components/social-elements/notes/note.vue
View file

@ -42,7 +42,7 @@
</div>
<Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
<div v-if="showInteractions"
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 disabled:*:cursor-not-allowed relative justify-between text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 *:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
<button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn">
<Icon name="tabler:arrow-back-up"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />

18
components/social-elements/users/Account.vue
View file

@ -1,20 +1,12 @@
<template>
<ClientOnly>
<div class="w-full rounded ring-1 ring-white/10 pb-10">
<Skeleton :enabled="skeleton" class="!w-full !h-full !aspect-[8/3]">
<div class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700">
<img v-if="account?.header" :src="account.header"
class="object-cover w-full h-full" :alt="`${account.acct}'s header image'`" />
</div>
</Skeleton>
<div class="w-full ring-1 ring-inset ring-white/5 pb-10">
<AvatarsCentered :url="account?.header" :alt="`${account?.acct}'s header image'`"
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700" />
<div class="flex items-start justify-between px-4 py-3">
<div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded shrink-0 overflow-hidden">
<Skeleton :enabled="skeleton" class="!h-full !w-full">
<img class="cursor-pointer bg-dark-700 ring-1 ring-white/10"
:src="account?.avatar" :alt="`${account?.acct}'s avatar'`" />
</Skeleton>
</div>
<AvatarsCentered :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
<ClientOnly>
<ButtonsSecondary v-if="account && account?.id === me?.id">Edit Profile