ayo/elk
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: add some vertical gap

Browse source
This commit is contained in:
userquin 2025-01-01 19:28:07 +01:00
parent 63c614d9a4
commit baaf271eeb
13 changed files with 98 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/nav/button/Bookmark.vue
View file

@ -9,8 +9,16 @@ const hideLabel = useHideBottomNavigationLabel()
</script>
<template>
<NuxtLink to="/bookmarks" :aria-label="$t('nav.bookmarks')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:bookmark-line />
<NuxtLink
to="/bookmarks"
:aria-label="$t('nav.bookmarks')"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div aria-hidden="true" i-ri:bookmark-line />
<span v-if="!hideLabel" text-xs>{{ $t('nav.bookmarks') }}</span>
</NuxtLink>
</template>

12
components/nav/button/Compose.vue
View file

@ -7,8 +7,16 @@ const hideLabel = useHideBottomNavigationLabel()
</script>
<template>
<NuxtLink to="/compose" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:quill-pen-line />
<NuxtLink
to="/compose"
:aria-label="$t('nav.favourites')"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div aria-hidden="true" i-ri:quill-pen-line />
<span v-if="!hideLabel" text-xs>{{ $t('nav.favourites') }}</span>
</NuxtLink>
</template>

3
components/nav/button/Explore.vue
View file

@ -17,9 +17,10 @@ const hideLabel = computed(() => getPreferences(userSettings.value, 'hideBottomN
:aria-label="$t('nav.explore')"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div i-ri:compass-3-line />
<div aria-hidden="true" i-ri:compass-3-line />
<span v-if="!hideLabel" text-xs>{{ $t('nav.explore') }}</span>
</NuxtLink>
</template>

12
components/nav/button/Favorite.vue
View file

@ -7,8 +7,16 @@ const hideLabel = useHideBottomNavigationLabel()
</script>
<template>
<NuxtLink to="/favourites" :aria-label="$t('nav.favourites')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:heart-line />
<NuxtLink
to="/favourites"
:aria-label="$t('nav.favourites')"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div aria-hidden="true" i-ri:heart-line />
<span v-if="!hideLabel" text-xs>{{ $t('nav.favourites') }}</span>
</NuxtLink>
</template>

12
components/nav/button/Federated.vue
View file

@ -9,8 +9,16 @@ const hideLabel = useHideBottomNavigationLabel()
</script>
<template>
<NuxtLink :to="`/${currentServer}/public`" :aria-label="$t('nav.federated')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:earth-line />
<NuxtLink
:to="`/${currentServer}/public`"
:aria-label="$t('nav.federated')"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div aria-hidden="true" i-ri:earth-line />
<span v-if="!hideLabel" text-xs>{{ $t('nav.federated') }}</span>
</NuxtLink>
</template>

12
components/nav/button/Hashtag.vue
View file

@ -7,8 +7,16 @@ const hideLabel = useHideBottomNavigationLabel()
</script>
<template>
<NuxtLink to="/hashtags" :aria-label="$t('nav.hashtags')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:hashtag />
<NuxtLink
to="/hashtags"
:aria-label="$t('nav.hashtags')"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div aria-hidden="true" i-ri:hashtag />
<span v-if="!hideLabel" text-xs>{{ $t('nav.hashtags') }}</span>
</NuxtLink>
</template>

12
components/nav/button/Home.vue
View file

@ -7,8 +7,16 @@ const hideLabel = useHideBottomNavigationLabel()
</script>
<template>
<NuxtLink to="/home" :aria-label="$t('nav.home')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:home-5-line />
<NuxtLink
to="/home"
:aria-label="$t('nav.home')"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div aria-hidden="true" i-ri:home-5-line />
<span v-if="!hideLabel" text-xs>{{ $t('nav.home') }}</span>
</NuxtLink>
</template>

6
components/nav/button/List.vue
View file

@ -14,9 +14,11 @@ const hideLabel = useHideBottomNavigationLabel()
:aria-label="$t('nav.lists')"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none" @click="$scrollToTop"
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div i-ri:list-check />
<div aria-hidden="true" i-ri:list-check />
<span v-if="!hideLabel" text-xs>{{ $t('nav.lists') }}</span>
</NuxtLink>
</template>

6
components/nav/button/Local.vue
View file

@ -11,10 +11,12 @@ const hideLabel = useHideBottomNavigationLabel()
group
:to="`/${currentServer}/public/local`"
:aria-label="$t('nav.local')" :active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div i-ri:group-2-line />
<div aria-hidden="true" i-ri:group-2-line />
<span v-if="!hideLabel" text-xs>{{ $t('nav.local') }}</span>
</NuxtLink>
</template>

7
components/nav/button/Mention.vue
View file

@ -10,10 +10,13 @@ const hideLabel = useHideBottomNavigationLabel()
<NuxtLink
to="/conversations"
:aria-label="$t('nav.conversations')"
:active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div i-ri:at-line />
<div aria-hidden="true" i-ri:at-line />
<span v-if="!hideLabel" text-xs>{{ $t('nav.conversations') }}</span>
</NuxtLink>
</template>

5
components/nav/button/MoreMenu.vue
View file

@ -10,8 +10,9 @@ const hideLabel = useHideBottomNavigationLabel()
place-content-center h-full flex-1 cursor-pointer
>
<button
flex flex-col items-center place-content-center h-full flex-1 class="select-none"
:class="show ? '!text-primary' : ''"
flex flex-col items-center place-content-center h-full flex-1
class="select-none"
:class="[show ? '!text-primary' : null, hideLabel ? null : 'gap-1'].filter(Boolean).join(' ')"
:aria-label="$t('nav.more_menu')"
@click="toggleVisible"
>

12
components/nav/button/Notification.vue
View file

@ -12,9 +12,17 @@ const hideLabel = useHideBottomNavigationLabel()
</script>
<template>
<NuxtLink :to="`/notifications/${lastAccessedNotificationRoute}`" :aria-label="$t('nav.notifications')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<NuxtLink
:to="`/notifications/${lastAccessedNotificationRoute}`"
:aria-label="$t('nav.notifications')"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div flex relative>
<div class="i-ri:notification-4-line" text-xl />
<div aria-hidden="true" class="i-ri:notification-4-line" text-xl />
<div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
{{ notifications < 10 ? notifications : '•' }}
</div>

12
components/nav/button/Search.vue
View file

@ -7,8 +7,16 @@ const hideLabel = useHideBottomNavigationLabel()
</script>
<template>
<NuxtLink to="/search" :aria-label="$t('nav.search')" :active-class="activeClass" flex flex-col items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:search-line />
<NuxtLink
to="/search"
:aria-label="$t('nav.search')"
:active-class="activeClass"
flex flex-col items-center place-content-center h-full flex-1
class="coarse-pointer:select-none"
:class="hideLabel ? null : 'gap-1'"
@click="$scrollToTop"
>
<div aria-hidden="true" i-ri:search-line />
<span v-if="!hideLabel" text-xs>{{ $t('nav.search') }}</span>
</NuxtLink>
</template>