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

feat: search on small screens (#585)

Browse source
This commit is contained in:
patak 2022-12-27 22:41:44 +01:00 committed by GitHub
parent ff0ad77676
commit 26a26ba9f7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 51 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
components/nav/NavBottom.vue
View file

@ -14,26 +14,30 @@ const moreMenuVisible = ref(false)
<NuxtLink to="/home" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:home-5-line />
</NuxtLink>
<NuxtLink to="/search" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:search-line />
</NuxtLink>
<NuxtLink to="/notifications" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:notification-4-line />
</NuxtLink>
</template>
<NuxtLink :to="`/${currentServer}/explore`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:hashtag />
</NuxtLink>
<NuxtLink group :to="`/${currentServer}/public/local`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:group-2-line />
</NuxtLink>
<template v-if="!isMastoInitialised || !currentUser">
<NuxtLink :to="`/${currentServer}/public`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:earth-line />
</NuxtLink>
</template>
<template v-if="isMastoInitialised && currentUser">
<NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:at-line />
</NuxtLink>
</template>
<template v-if="isMastoInitialised && !currentUser">
<NuxtLink :to="`/${currentServer}/explore`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:hashtag />
</NuxtLink>
<NuxtLink to="/search" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:search-line />
</NuxtLink>
<NuxtLink group :to="`/${currentServer}/public/local`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:group-2-line />
</NuxtLink>
<NuxtLink :to="`/${currentServer}/public`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:earth-line />
</NuxtLink>
</template>
<NavBottomMoreMenu v-slot="{ changeShow, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
<label
flex items-center place-content-center h-full flex-1 class="select-none"

6
components/nav/NavSide.vue
View file

@ -15,7 +15,11 @@ const { notifications } = useNotifications()
</div>
</template>
</NavSideItem>
<NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" />
<!-- Use Search for small screens once the right sidebar is collapsed -->
<NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" lg:hidden />
<NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" hidden lg:block />
<NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " />
<NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" />
<NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only />

2
components/search/SearchWidget.vue
View file

@ -66,7 +66,7 @@ const activate = () => {
outline="focus:none"
pr-4
rtl-pl-4
:placeholder="t('nav.search', ['Elk'])"
:placeholder="t('nav.search')"
pb="1px"
placeholder-text-secondary
@keydown.down.prevent="shift(1)"

1
locales/cs-CZ.json
View file

@ -119,6 +119,7 @@
"local": "Lokální",
"notifications": "Upozornění",
"profile": "Profil",
"search": "Vyhledávání",
"select_feature_flags": "Zapnout funkce",
"select_language": "Vybrat jazyk",
"show_intro": "Zobrazit více informací o aplikaci",

2
locales/de-DE.json
View file

@ -119,7 +119,7 @@
"local": "Lokal",
"notifications": "Mitteilungen",
"profile": "Profil",
"search": "Durchsuche {0}",
"search": "Durchsuche",
"select_feature_flags": "Feature-Flags aktivieren",
"select_language": "Sprache auswählen",
"show_intro": "Intro anzeigen",

2
locales/en-US.json
View file

@ -142,7 +142,7 @@
"local": "Local",
"notifications": "Notifications",
"profile": "Profile",
"search": "Search {0}",
"search": "Search",
"select_feature_flags": "Toggle Feature Flags",
"select_font_size": "Select Font Size",
"select_language": "Select Language",

2
locales/es-ES.json
View file

@ -138,7 +138,7 @@
"local": "Local",
"notifications": "Notificaciones",
"profile": "Perfil",
"search": "Buscar {0}",
"search": "Buscar",
"select_feature_flags": "Cambiar marcadores de funcionalidades",
"select_font_size": "Cambiar tamaño de letra",
"select_language": "Cambiar idioma",

2
locales/fr-FR.json
View file

@ -137,7 +137,7 @@
"local": "Local",
"notifications": "Notifications",
"profile": "Profil",
"search": "Rechercher {0}",
"search": "Rechercher",
"select_feature_flags": "Activer/Désactiver Feature Flags",
"select_language": "Selectionner langue",
"show_intro": "Ré-afficher l'introduction",

2
locales/ja-JP.json
View file

@ -52,7 +52,7 @@
"local": "ローカル",
"notifications": "通知",
"profile": "プロフィール",
"search": "検索 {0}",
"search": "検索",
"select_feature_flags": "実験的機能を切り替え",
"select_language": "言語を選択",
"toggle_theme": "テーマを切り替え",

2
locales/zh-CN.json
View file

@ -133,7 +133,7 @@
"local": "本地",
"notifications": "通知",
"profile": "个人资料",
"search": "搜索 {0}",
"search": "搜索",
"select_feature_flags": "功能开关",
"select_font_size": "字体大小",
"select_language": "选择语言",

21
pages/search.vue Normal file
View file

@ -0,0 +1,21 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
useHeadFixed({
title: () => t('nav.search'),
})
</script>
<template>
<MainContent>
<template #title>
<NuxtLink to="/search" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:search-line />
<span>{{ $t('nav.search') }}</span>
</NuxtLink>
</template>
<SearchWidget v-if="isMastoInitialised" mt3 />
</MainContent>
</template>