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

fix: mobile search

Browse source
This commit is contained in:
Michel EDIGHOFFER 2023-01-17 22:33:00 +01:00
parent 4d30e80751
commit 72dc3617dd
4 changed files with 6 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/main/MainContent.vue
View file

@ -4,6 +4,7 @@ defineProps<{
backOnSmallScreen?: boolean backOnSmallScreen?: boolean
/** Show the back button on both small and big screens */ /** Show the back button on both small and big screens */
back?: boolean back?: boolean
noOverflowHidden?: boolean
}>() }>()
</script> </script>
@ -15,7 +16,7 @@ defineProps<{
border="b base" bg="[rgba(var(--rbg-bg-base),0.7)]" border="b base" bg="[rgba(var(--rbg-bg-base),0.7)]"
> >
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }"> <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }">
<div flex gap-3 items-center overflow-hidden py2> <div flex gap-3 items-center :overflow-hidden="!noOverflowHidden" py2>
<NuxtLink <NuxtLink
v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
:aria-label="$t('nav.back')" :aria-label="$t('nav.back')"
@ -23,7 +24,7 @@ defineProps<{
> >
<div i-ri:arrow-left-line class="rtl-flip" /> <div i-ri:arrow-left-line class="rtl-flip" />
</NuxtLink> </NuxtLink>
<div truncate> <div :truncate="!noOverflowHidden">
<slot name="title" /> <slot name="title" />
</div> </div>
<div h-7 w-1px /> <div h-7 w-1px />

2
components/nav/NavSide.vue
View file

@ -37,7 +37,7 @@ const { notifications } = useNotifications()
<div shrink hidden sm:block mt-4 /> <div shrink hidden sm:block mt-4 />
<NavSideItem v-if="!isExploreRoute()" :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" hidden xl:block :command="command" /> <NavSideItem v-if="!isExploreRoute()" :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" hidden xl:block :command="command" />
<SearchWidget v-else ref="search" lg:ms-1 lg:me-5 lg:mb-1 hidden xl:block /> <SearchWidget v-else-if="!isSmallScreen" ref="search" lg:ms-1 lg:me-5 lg:mb-1 hidden xl:block />
<NavSideItem :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" xl:hidden :command="command" /> <NavSideItem :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" xl:hidden :command="command" />
<NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" /> <NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />

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

@ -24,11 +24,9 @@ const tabs = $computed(() => [
</script> </script>
<template> <template>
<MainContent> <MainContent no-overflow-hidden>
<template #title> <template #title>
<span timeline-title-style flex @click="$scrollToTop"> <SearchWidget ref="search" flex-grow class="m-1" />
<SearchWidget ref="search" />
</span>
</template> </template>
<template #header> <template #header>

23
pages/search.vue
View file

@ -1,23 +0,0 @@
<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" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
<div i-ri:search-line class="rtl-flip" />
<span>{{ $t('nav.search') }}</span>
</NuxtLink>
</template>
<div px2 mt3>
<SearchWidget v-if="isHydrated" />
</div>
</MainContent>
</template>