Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(search): add times icon to delete current search text

Browse source
This commit is contained in:
Valentin Kaelin 2020-08-25 15:15:20 +02:00
parent bc65363bec
commit 85d485bfdc
2 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
client/src/components/Form/SearchForm.vue
View file

@ -11,16 +11,6 @@
class="fixed inset-0 z-20 bg-gray-900" class="fixed inset-0 z-20 bg-gray-900"
></div> ></div>
<div class="relative w-full"> <div class="relative w-full">
<button
v-if="homepage"
ref="submit"
class="absolute right-0 z-40 w-12 h-full hover:text-teal-200"
type="submit"
>
<svg class="absolute w-4 h-4 vertical-center horizontal-center">
<use xlink:href="#search" />
</svg>
</button>
<input <input
v-if="homepage" v-if="homepage"
ref="input" ref="input"
@ -32,6 +22,16 @@
type="text" type="text"
placeholder="Search summoner" placeholder="Search summoner"
/> />
<button
v-if="homepage"
ref="submit"
class="absolute right-0 z-40 w-12 h-full hover:text-teal-200"
type="submit"
>
<svg class="absolute w-4 h-4 vertical-center horizontal-center">
<use xlink:href="#search" />
</svg>
</button>
<button <button
v-if="!homepage" v-if="!homepage"
@click="open = true" @click="open = true"

14
client/src/components/Form/SearchFormDropdown.vue
View file

@ -6,7 +6,7 @@
<div class="shadow"> <div class="shadow">
<div class="pt-3"> <div class="pt-3">
<div v-if="!homepage" class="relative px-3 bypass-click"> <div v-if="!homepage" class="relative px-3 bypass-click">
<button class="absolute w-12 h-full text-blue-300 hover:text-white" type="submit"> <button class="absolute w-12 h-full text-blue-200 hover:text-white" type="submit">
<svg class="absolute w-4 h-4 vertical-center horizontal-center"> <svg class="absolute w-4 h-4 vertical-center horizontal-center">
<use xlink:href="#search" /> <use xlink:href="#search" />
</svg> </svg>
@ -15,11 +15,21 @@
ref="input" ref="input"
@input="$emit('input', $event.target.value)" @input="$emit('input', $event.target.value)"
:value="value" :value="value"
class="w-full px-12 py-2 pr-4 placeholder-blue-200 placeholder-opacity-75 bg-blue-700 border border-blue-500 rounded-md outline-none focus:bg-blue-760 summoner-input" class="w-full py-2 pl-12 pr-32 placeholder-blue-200 placeholder-opacity-75 bg-blue-700 border border-blue-500 rounded-md outline-none focus:bg-blue-760 summoner-input"
type="text" type="text"
placeholder="Search summoner" placeholder="Search summoner"
spellcheck="false" spellcheck="false"
/> />
<button
v-if="!homepage && value.length"
@click="$emit('input', '')"
class="absolute right-0 flex items-center justify-center p-1 mr-24 text-blue-200 rounded-full vertical-center hover:text-white"
type="button"
>
<svg class="w-4 h-4">
<use xlink:href="#times" />
</svg>
</button>
<div v-if="!homepage" ref="region-dropdown"> <div v-if="!homepage" ref="region-dropdown">
<SearchFormRegion @toggle="toggle" :dropdown="dropdown" :homepage="homepage" /> <SearchFormRegion @toggle="toggle" :dropdown="dropdown" :homepage="homepage" />
</div> </div>