zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: scroll to top (#237)

zio/stable
Shinigami 2022-11-29 21:15:53 +01:00 committed by GitHub
parent cf225e2005
commit 0e7076b991
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/nav/NavBottom.vue
View File

@ -5,24 +5,24 @@
<template> <template>
<nav h-14 fixed bottom-0 left-0 right-0 z-10 border="t base" bg-base flex flex-row> <nav h-14 fixed bottom-0 left-0 right-0 z-10 border="t base" bg-base flex flex-row>
<template v-if="currentUser"> <template v-if="currentUser">
<NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1> <NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:home-5-line /> <div i-ri:home-5-line />
</NuxtLink> </NuxtLink>
<NuxtLink to="/notifications" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1> <NuxtLink to="/notifications" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:notification-4-line /> <div i-ri:notification-4-line />
</NuxtLink> </NuxtLink>
</template> </template>
<NuxtLink to="/explore" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1> <NuxtLink to="/explore" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:hashtag /> <div i-ri:hashtag />
</NuxtLink> </NuxtLink>
<NuxtLink group to="/public/local" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1> <NuxtLink group to="/public/local" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:group-2-line /> <div i-ri:group-2-line />
</NuxtLink> </NuxtLink>
<NuxtLink to="/public" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1> <NuxtLink to="/public" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:earth-line /> <div i-ri:earth-line />
</NuxtLink> </NuxtLink>
<template v-if="currentUser"> <template v-if="currentUser">
<NuxtLink to="/conversations" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1> <NuxtLink to="/conversations" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:at-line /> <div i-ri:at-line />
</NuxtLink> </NuxtLink>
</template> </template>

2
components/nav/NavSideItem.vue
View File

@ -25,7 +25,7 @@ useCommand({
</script> </script>
<template> <template>
<NuxtLink :to="to" active-class="text-primary" group focus:outline-none> <NuxtLink :to="to" active-class="text-primary" group focus:outline-none @click="$scrollToTop">
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current"> <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current">
<slot name="icon"> <slot name="icon">
<div :class="icon" /> <div :class="icon" />

5
pages/bookmarks.vue
View File

@ -15,7 +15,10 @@ useHead({
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<span text-lg font-bold>{{ t('nav_side.bookmarks') }}</span> <NuxtLink to="/bookmarks" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:bookmark-line />
<span>{{ t('nav_side.bookmarks') }}</span>
</NuxtLink>
</template> </template>
<slot> <slot>

5
pages/conversations.vue
View File

@ -15,7 +15,10 @@ useHead({
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<span text-lg font-bold>{{ t('nav_side.conversations') }}</span> <NuxtLink to="/conversations" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:at-line />
<span>{{ t('nav_side.conversations') }}</span>
</NuxtLink>
</template> </template>
<slot> <slot>

5
pages/explore.vue
View File

@ -11,7 +11,10 @@ useHead({
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<div i-ri:hashtag h-6 mr-1 /><span>{{ t('nav_side.explore') }}</span> <NuxtLink to="/explore" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:hashtag />
<span>{{ t('nav_side.explore') }}</span>
</NuxtLink>
</template> </template>
<slot> <slot>

5
pages/favourites.vue
View File

@ -14,7 +14,10 @@ useHead({
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<span text-lg font-bold>{{ t('nav_side.favourites') }}</span> <NuxtLink to="/favourites" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:heart-3-line />
<span>{{ t('nav_side.favourites') }}</span>
</NuxtLink>
</template> </template>
<slot> <slot>
<TimelinePaginator :paginator="paginator" /> <TimelinePaginator :paginator="paginator" />

5
pages/home.vue
View File

@ -24,7 +24,10 @@ useHead({
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<span text-lg font-bold>{{ $t('nav_side.home') }}</span> <NuxtLink to="/home" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:home-5-line />
<span>{{ $t('nav_side.home') }}</span>
</NuxtLink>
</template> </template>
<slot> <slot>
<PublishWidget draft-key="home" border="b base" /> <PublishWidget draft-key="home" border="b base" />

5
pages/notifications.vue
View File

@ -22,7 +22,10 @@ useHead({
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<span text-lg font-bold>{{ t('nav_side.notifications') }}</span> <NuxtLink to="/notifications" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:notification-4-line />
<span>{{ t('nav_side.notifications') }}</span>
</NuxtLink>
</template> </template>
<template #header> <template #header>

5
pages/public/index.vue
View File

@ -13,7 +13,10 @@ useHead({
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<span text-lg font-bold>{{ t('title.federated_timeline') }}</span> <NuxtLink to="/public" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:group-2-line />
<span>{{ t('title.federated_timeline') }}</span>
</NuxtLink>
</template> </template>
<slot> <slot>

5
pages/public/local.vue
View File

@ -13,7 +13,10 @@ useHead({
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<span text-lg font-bold>{{ t('title.local_timeline') }}</span> <NuxtLink to="/public/local" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:group-2-line />
<span>{{ t('title.local_timeline') }}</span>
</NuxtLink>
</template> </template>
<slot> <slot>

9
plugins/scroll-to-top.ts 100644
View File

@ -0,0 +1,9 @@
export default defineNuxtPlugin(() => {
return {
provide: {
scrollToTop: () => {
document.body.scrollTo(0, 0)
},
},
}
})