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 refactoring

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-11 19:26:29 -10:00
parent 5c416ce793
commit 1840526649
No known key found for this signature in database
10 changed files with 77 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

27
components/headers/greeting.vue Normal file
View file

@ -0,0 +1,27 @@
<template>
<ClientOnly>
<div v-if="me" class="bg-dark-800 p-6 my-5 rounded ring-1 ring-white/5">
<div class="sm:flex sm:items-center sm:justify-between">
<div class="sm:flex sm:space-x-5">
<AvatarsCentered :url="me.avatar"
class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10" />
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
<p class="text-sm font-medium text-gray-300">Welcome back,</p>
<p class="text-xl font-bold text-gray-50 sm:text-2xl"
v-html="useParsedContent(me.display_name, []).value"></p>
<p class="text-sm font-medium text-gray-500">@{{ me.acct }}</p>
</div>
</div>
<div class="mt-5 flex justify-center sm:mt-0">
<ButtonsSecondary @click="useEvent('composer:open')">
Compose
</ButtonsSecondary>
</div>
</div>
</div>
</ClientOnly>
</template>
<script lang="ts" setup>
const me = useMe();
</script>

34
components/sidebars/collapsible-aside.vue
View file

@ -1,18 +1,16 @@
<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']">
<OverlayScrollbarsComponent :defer="true"
class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
<slot />
</OverlayScrollbarsComponent>
<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 v-bind="$props"
:class="['flex max-h-dvh overflow-hidden duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
<OverlayScrollbarsComponent :defer="true"
class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
<slot />
</OverlayScrollbarsComponent>
<button @click="open = !open"
class="h-full bg-dark-700 hover:bg-dark-400 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>
</aside>
</template>
@ -33,9 +31,11 @@ const props = withDefaults(defineProps<Props>(), {
const leaveClass = computed(() =>
props.direction === "left"
? "-translate-x-[calc(100%-1rem)]"
: "translate-x-[calc(100%-1rem)]",
? "-left-[calc(28rem-6rem)]"
: "-right-[calc(28rem-1rem)]",
);
const enterClass = computed(() =>
props.direction === "left" ? "left-0" : "right-0",
);
const enterClass = "translate-x-0";
const open = ref(props.initial);
</script>