issue#2 move the search input to the nav bar
This commit is contained in:
parent
7f77694d20
commit
6bfaf97284
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<form
|
||||
id="search-anchor"
|
||||
class="container mx-auto my-3 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 text-center items-center justify-center dark:text-slate-100"
|
||||
class="container mx-auto my-3 flex flex-wrap flex-row items-stretch gap-2 text-center items-center justify-center dark:text-slate-100"
|
||||
role="search"
|
||||
@submit.prevent="submit"
|
||||
>
|
||||
|
@ -10,7 +10,7 @@
|
|||
}}</label>
|
||||
<o-input
|
||||
v-model="search"
|
||||
:placeholder="t('Keyword, event title, group name, etc.')"
|
||||
:placeholder="t('Search')"
|
||||
id="search_field_input"
|
||||
autofocus
|
||||
autocapitalize="off"
|
||||
|
@ -19,8 +19,6 @@
|
|||
maxlength="1024"
|
||||
/>
|
||||
<o-button native-type="submit" icon-left="magnify">
|
||||
<template v-if="search">{{ t("Go!") }}</template>
|
||||
<template v-else>{{ t("Explore!") }}</template>
|
||||
</o-button>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
>
|
||||
<MobilizonLogo class="w-40" />
|
||||
</router-link>
|
||||
|
||||
<div class="flex items-center md:order-2 ml-auto" v-if="currentActor?.id">
|
||||
<o-dropdown position="bottom-left">
|
||||
<template #trigger>
|
||||
|
@ -164,34 +165,40 @@
|
|||
<ul
|
||||
class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
|
||||
>
|
||||
<li v-if="currentActor?.id">
|
||||
|
||||
<search-fields v-if="showMobileMenu" class="m-auto w-auto" v-model:search="search" v-model:location="location"/>
|
||||
|
||||
<li class="m-auto" v-if="currentActor?.id">
|
||||
<router-link
|
||||
:to="{ name: RouteName.MY_EVENTS }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("My events") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li v-if="currentActor?.id">
|
||||
<li class="m-auto" v-if="currentActor?.id">
|
||||
<router-link
|
||||
:to="{ name: RouteName.MY_GROUPS }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("My groups") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li v-if="!currentActor?.id">
|
||||
<li class="m-auto" v-if="!currentActor?.id">
|
||||
<router-link
|
||||
:to="{ name: RouteName.LOGIN }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("Login") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li v-if="!currentActor?.id && canRegister">
|
||||
<li class="m-auto" v-if="!currentActor?.id && canRegister">
|
||||
<router-link
|
||||
:to="{ name: RouteName.REGISTER }"
|
||||
class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>{{ t("Register") }}</router-link
|
||||
>
|
||||
</li>
|
||||
|
||||
<search-fields v-if="!showMobileMenu" class="m-auto w-auto" v-model:search="search" v-model:location="location"/>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -218,6 +225,7 @@ import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor";
|
|||
import { changeIdentity } from "@/utils/identity";
|
||||
import { useRegistrationConfig } from "@/composition/apollo/config";
|
||||
import { useProgrammatic } from "@oruga-ui/oruga-next";
|
||||
import SearchFields from "@/components/Home/SearchFields.vue";
|
||||
|
||||
const { currentUser } = useCurrentUserClient();
|
||||
const { currentActor } = useCurrentActorClient();
|
||||
|
@ -239,6 +247,9 @@ const canRegister = computed(() => {
|
|||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const location = ref(null);
|
||||
const search = ref("");
|
||||
|
||||
watch(identities, () => {
|
||||
// If we don't have any identities, the user has validated their account,
|
||||
// is logging for the first time but didn't create an identity somehow
|
||||
|
|
|
@ -26,7 +26,6 @@
|
|||
<!-- Unlogged introduction -->
|
||||
<unlogged-introduction :config="config" v-if="config && !isLoggedIn" />
|
||||
<!-- Search fields -->
|
||||
<search-fields v-model:search="search" v-model:location="location" />
|
||||
<!-- Categories preview
|
||||
<categories-preview /> -->
|
||||
<!-- Welcome back -->
|
||||
|
|
Loading…
Reference in a new issue