mirror/mobilizon
1
0
Fork 0
mirror of https://framagit.org/framasoft/mobilizon.git synced 2025-03-12 17:42:53 +00:00
Code Issues Releases Wiki Activity

Improves the displaying of the search zone in /search page and home page

Browse source 
Solves #1679
This commit is contained in:
Massedil 2025-02-13 20:01:49 +01:00
parent def786b99e
commit c808708911
2 changed files with 70 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/Home/SearchFields.vue
View file

@ -1,14 +1,16 @@
<template> <template>
<form <form
id="search-anchor" id="search-anchor"
class="container mx-auto my-3 px-2 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 text-center justify-center dark:text-slate-100" class="container mx-auto p-2 flex flex-col flex-wrap items-stretch gap-2 justify-center dark:text-slate-100"
role="search" role="search"
@submit.prevent="submit" @submit.prevent="submit"
> >
<div class="flex flex-col flex-wrap sm:flex-row gap-2 justify-center">
<label class="sr-only" for="search_field_input">{{ <label class="sr-only" for="search_field_input">{{
t("Keyword, event title, group name, etc.") t("Keyword, event title, group name, etc.")
}}</label> }}</label>
<o-input <o-input
class="min-w-48"
v-if="search != null" v-if="search != null"
v-model="search" v-model="search"
:placeholder="t('Keyword, event title, group name, etc.')" :placeholder="t('Keyword, event title, group name, etc.')"
@ -47,20 +49,17 @@
/> />
</o-dropdown> </o-dropdown>
</full-address-auto-complete> </full-address-auto-complete>
</div>
<div class="flex flex-col flex-wrap sm:flex-row gap-2 justify-center">
<o-button <o-button
:class=" :class="'search-Event min-w-40 ' + select_button_class('EVENTS')"
'search-Event min-w-40 mr-1 mb-1 ' + select_button_class('EVENTS')
"
native-type="submit" native-type="submit"
icon-left="calendar" icon-left="calendar"
> >
{{ t("Events") + number_result("EVENTS") }} {{ t("Events") + number_result("EVENTS") }}
</o-button> </o-button>
<o-button <o-button
:class=" :class="'search-Activity min-w-40 ' + select_button_class('LONGEVENTS')"
'search-Activity min-w-40 mr-1 mb-1 ' +
select_button_class('LONGEVENTS')
"
native-type="submit" native-type="submit"
icon-left="calendar-star" icon-left="calendar-star"
v-if="isLongEvents" v-if="isLongEvents"
@ -68,14 +67,13 @@
{{ t("Activities") + number_result("LONGEVENTS") }} {{ t("Activities") + number_result("LONGEVENTS") }}
</o-button> </o-button>
<o-button <o-button
:class=" :class="'search-Group min-w-40 ' + select_button_class('GROUPS')"
'search-Group min-w-40 mr-1 mb-1 ' + select_button_class('GROUPS')
"
native-type="submit" native-type="submit"
icon-left="account-multiple" icon-left="account-multiple"
> >
{{ t("Groups") + number_result("GROUPS") }} {{ t("Groups") + number_result("GROUPS") }}
</o-button> </o-button>
</div>
</form> </form>
</template> </template>

1
src/views/SearchView.vue
View file

@ -1,7 +1,6 @@
<template> <template>
<div class="max-w-4xl mx-auto"> <div class="max-w-4xl mx-auto">
<search-fields <search-fields
class="md:ml-10 mr-2"
v-model:search="search" v-model:search="search"
v-model:address="address" v-model:address="address"
v-model:distance="radius" v-model:distance="radius"