CloudToys/elk
1
0
Fork 0
Code

feat: put search field on right for desktop

Browse Source
This commit is contained in:
Michel EDIGHOFFER 2023-01-18 12:48:57 +01:00
parent e343b0a61a
commit 6381bcfb4a
3 changed files with 9 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/nav/NavSide.vue
View File

@ -3,16 +3,6 @@ const { command } = defineProps<{
command?: boolean
}>()
const search = ref<HTMLInputElement>()
const route = useRoute()
const isExploreRoute = () => route.path.includes('explore')
watchEffect(() => {
if (isExploreRoute() && search.value)
search.value.focus()
})
const { notifications } = useNotifications()
</script>
@ -36,10 +26,7 @@ const { notifications } = useNotifications()
<NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
<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" />
<SearchWidget v-else-if="!isExtraLargeScreen" 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.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :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.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />

14
components/search/SearchWidget.vue
View File

@ -1,4 +1,8 @@
<script setup lang="ts">
const { position } = defineProps<{
position?: 'top' | 'bottom'
}>()
const query = ref('')
const { accounts, hashtags, loading, statuses } = useSearch(query)
const index = ref(0)
@ -9,14 +13,6 @@ const input = ref<HTMLInputElement>()
const router = useRouter()
const { focused } = useFocusWithin(el)
const focus = () => {
input.value?.focus()
}
defineExpose({
focus,
})
const results = computed(() => {
if (query.value.length === 0)
return []
@ -84,7 +80,7 @@ const activate = () => {
>
</div>
<!-- Results -->
<div left-0 top-12 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
<div top-12 left-0 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
<div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
<span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
{{ t('search.search_desc') }}

5
layouts/default.vue
View File

@ -17,7 +17,7 @@ const isGrayscale = usePreferences('grayscaleMode')
<template>
<div h-full :data-mode="isHydrated && isGrayscale ? 'grayscale' : ''">
<main flex w-full mxa lg:max-w-80rem>
<aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
<aside class="justify-end hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 xl:me-4 zen-hide" relative>
<div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
<slot name="left">
<div flex="~ col" overflow-y-auto justify-between h-full max-w-full mt-5>
@ -58,9 +58,10 @@ const isGrayscale = usePreferences('grayscaleMode')
<NavBottom v-if="isHydrated" sm:hidden />
</div>
</div>
<aside v-if="isHydrated && !wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
<aside v-if="isHydrated && !wideLayout" class="hidden w-1/4 sm:none lg:block zen-hide">
<div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
<slot name="right">
<SearchWidget v-if="!isExtraLargeScreen" mt-6 ms-2 position="top" />
<div flex-auto />
<PwaPrompt />
<NavFooter />