mirrors/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-12-18 00:51:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix: restore search page for mobile

Browse source 
next step: show search bar on title without rediction
This commit is contained in:
Michel EDIGHOFFER 2023-02-10 20:06:01 +01:00
parent 0eefcfa281
commit 9acaf7b03a
3 changed files with 19 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/nav/NavBottom.vue
View file

@ -14,7 +14,7 @@ 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="isHydrated ? `/${currentServer}/explore` : '/explore'" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop"> <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 /> <div i-ri:search-line />
</NuxtLink> </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">

16
pages/[[server]]/explore.vue
View file

@ -3,17 +3,6 @@ import type { CommonRouteTabOption } from '~/components/common/CommonRouteTabs.v
const { t } = useI18n() const { t } = useI18n()
const search = $ref<{ input?: HTMLInputElement }>()
const route = useRoute()
watchEffect(() => {
if (isMediumOrLargeScreen && route.name === 'explore' && search?.input)
search?.input?.focus()
})
onActivated(() =>
search?.input?.focus(),
)
onDeactivated(() => search?.input?.blur())
const tabs = $computed<CommonRouteTabOption[]>(() => [ const tabs = $computed<CommonRouteTabOption[]>(() => [
{ {
to: isHydrated.value ? `/${currentServer.value}/explore` : '/explore', to: isHydrated.value ? `/${currentServer.value}/explore` : '/explore',
@ -38,15 +27,12 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
<template> <template>
<MainContent :no-overflow-hidden="isExtraLargeScreen" :back-on-small-screen="isExtraLargeScreen"> <MainContent :no-overflow-hidden="isExtraLargeScreen" :back-on-small-screen="isExtraLargeScreen">
<template v-if="!isExtraLargeScreen" #title> <template #title>
<span timeline-title-style flex items-center gap-2 cursor-pointer @click="$scrollToTop"> <span timeline-title-style flex items-center gap-2 cursor-pointer @click="$scrollToTop">
<div i-ri:hashtag /> <div i-ri:hashtag />
<span>{{ t('nav.explore') }}</span> <span>{{ t('nav.explore') }}</span>
</span> </span>
</template> </template>
<template v-else #title>
<SearchWidget v-if="isHydrated" ref="search" class="m-1" />
</template>
<template #header> <template #header>
<CommonRouteTabs replace :options="tabs" /> <CommonRouteTabs replace :options="tabs" />

17
pages/search.vue Normal file
View file

@ -0,0 +1,17 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
useHeadFixed({
title: () => t('nav.search'),
})
</script>
<template>
<MainContent no-overflow-hidden>
<template v-if="isHydrated" #title>
<SearchWidget w-full m-1 />
</template>
<!-- TODO: put search result here -->
</MainContent>
</template>