From 26a26ba9f7eca0e2352048e61fda20aacb58021b Mon Sep 17 00:00:00 2001 From: patak <matias.capeletto@gmail.com> Date: Tue, 27 Dec 2022 22:41:44 +0100 Subject: [PATCH] feat: search on small screens (#585) --- components/nav/NavBottom.vue | 30 +++++++++++++++++------------- components/nav/NavSide.vue | 6 +++++- components/search/SearchWidget.vue | 2 +- locales/cs-CZ.json | 1 + locales/de-DE.json | 2 +- locales/en-US.json | 2 +- locales/es-ES.json | 2 +- locales/fr-FR.json | 2 +- locales/ja-JP.json | 2 +- locales/zh-CN.json | 2 +- pages/search.vue | 21 +++++++++++++++++++++ 11 files changed, 51 insertions(+), 21 deletions(-) create mode 100644 pages/search.vue diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue index e179e307..24b4543a 100644 --- a/components/nav/NavBottom.vue +++ b/components/nav/NavBottom.vue @@ -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" diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue index 48e58070..6ffe6e53 100644 --- a/components/nav/NavSide.vue +++ b/components/nav/NavSide.vue @@ -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 /> diff --git a/components/search/SearchWidget.vue b/components/search/SearchWidget.vue index 53f7967c..2a3801a0 100644 --- a/components/search/SearchWidget.vue +++ b/components/search/SearchWidget.vue @@ -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)" diff --git a/locales/cs-CZ.json b/locales/cs-CZ.json index fa349f93..52586dcf 100644 --- a/locales/cs-CZ.json +++ b/locales/cs-CZ.json @@ -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", diff --git a/locales/de-DE.json b/locales/de-DE.json index 961f9374..62cea2be 100644 --- a/locales/de-DE.json +++ b/locales/de-DE.json @@ -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", diff --git a/locales/en-US.json b/locales/en-US.json index c60a2d3f..6cff0541 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -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", diff --git a/locales/es-ES.json b/locales/es-ES.json index eb7f4757..cd1ccfd9 100644 --- a/locales/es-ES.json +++ b/locales/es-ES.json @@ -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", diff --git a/locales/fr-FR.json b/locales/fr-FR.json index 71afec0b..f8471524 100644 --- a/locales/fr-FR.json +++ b/locales/fr-FR.json @@ -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", diff --git a/locales/ja-JP.json b/locales/ja-JP.json index 6d45c40d..22dab26c 100644 --- a/locales/ja-JP.json +++ b/locales/ja-JP.json @@ -52,7 +52,7 @@ "local": "ローカル", "notifications": "通知", "profile": "プロフィール", - "search": "検索 {0}", + "search": "検索", "select_feature_flags": "実験的機能を切り替え", "select_language": "言語を選択", "toggle_theme": "テーマを切り替え", diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 0591e4ee..cbbfcd47 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -133,7 +133,7 @@ "local": "本地", "notifications": "通知", "profile": "个人资料", - "search": "搜索 {0}", + "search": "搜索", "select_feature_flags": "功能开关", "select_font_size": "字体大小", "select_language": "选择语言", diff --git a/pages/search.vue b/pages/search.vue new file mode 100644 index 00000000..fcf944dc --- /dev/null +++ b/pages/search.vue @@ -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>