feat: search on small screens (#585)

zio/stable
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

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"> <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 /> <div i-ri:home-5-line />
</NuxtLink> </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"> <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 /> <div i-ri:notification-4-line />
</NuxtLink> </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"> <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 /> <div i-ri:at-line />
</NuxtLink> </NuxtLink>
</template> </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> <NavBottomMoreMenu v-slot="{ changeShow, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
<label <label
flex items-center place-content-center h-full flex-1 class="select-none" flex items-center place-content-center h-full flex-1 class="select-none"

View File

@ -15,7 +15,11 @@ const { notifications } = useNotifications()
</div> </div>
</template> </template>
</NavSideItem> </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.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.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" />
<NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only /> <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only />

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

21
pages/search.vue 100644
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>