#1680 Improved display of the search bar

This commit is contained in:
Massedil
2025-02-14 13:21:14 +01:00
parent c808708911
commit c154ff9ba8

View File

@@ -1,27 +1,28 @@
<template> <template>
<form <form
id="short-search" id="short-search"
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-wrap flex-col sm:flex-row items-stretch gap-2 justify-center dark:text-slate-100"
role="search" role="search"
@submit.prevent="submit" @submit.prevent="submit"
> >
<label class="sr-only" for="short_search_field_input">{{ <label class="sr-only" for="short_search_field_input">{{
t("Keyword, event title, group name, etc.") t("Keyword, event title, group name, etc.")
}}</label> }}</label>
<o-input <div class="flex-auto sm:max-w-xl">
v-model="search" <o-input
:placeholder="t('Keyword, event title, group name, etc.')" v-model="search"
class="max-w-md" :placeholder="t('Keyword, event title, group name, etc.')"
id="short_search_field_input" id="short_search_field_input"
autofocus autofocus
autocapitalize="off" autocapitalize="off"
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
maxlength="1024" maxlength="1024"
expanded expanded
/> />
</div>
<o-button <o-button
class="search-Event min-w-40 mr-1 mb-1" class="search-Event min-w-40 sm:w-auto"
native-type="submit" native-type="submit"
icon-left="magnify" icon-left="magnify"
> >