Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

add clear search input button

Browse source
This commit is contained in:
isUnknown 2024-04-09 18:58:31 +02:00
parent 2f8ceb831e
commit 53b72e85b9
3 changed files with 21 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

16
assets/css/src/nav.css
View file

@ -70,8 +70,10 @@
padding-top: calc(var(--unit--vertical) * 5); padding-top: calc(var(--unit--vertical) * 5);
} }
.search__input { .search__input {
all: unset;
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
padding: 0;
padding-bottom: calc(var(--unit--vertical) / 4); padding-bottom: calc(var(--unit--vertical) / 4);
border: none; border: none;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
@ -84,11 +86,17 @@
letter-spacing: 1px; letter-spacing: 1px;
} }
.search__icon { .search__icon {
all: unset;
position: absolute; position: absolute;
width: 1.1rem; width: 1.2rem;
height: 1.1rem; height: 1.2rem;
bottom: calc(var(--unit--vertical) / 4); padding: 0.5rem;
right: calc(var(--unit--horizontal) / 2); bottom: 0;
right: calc(var(--unit--horizontal) / 6);
transform: translateX(0.5rem);
}
button.search__icon {
cursor: pointer;
} }
.panel__items { .panel__items {

1
assets/images/icons/close.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff"><path d="M10.5859 12L2.79297 4.20706L4.20718 2.79285L12.0001 10.5857L19.793 2.79285L21.2072 4.20706L13.4143 12L21.2072 19.7928L19.793 21.2071L12.0001 13.4142L4.20718 21.2071L2.79297 19.7928L10.5859 12Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 288 B

8
site/snippets/nav.php
View file

@ -22,10 +22,18 @@
x-model="search" x-model="search"
> >
<img <img
x-show="search.length === 0"
src="<?= url('assets/images/icons/search.svg') ?>" src="<?= url('assets/images/icons/search.svg') ?>"
class="search__icon" class="search__icon"
alt="Icône loupe indiquant le champ de recherche." alt="Icône loupe indiquant le champ de recherche."
> >
<button
x-show="search.length > 0"
@click="search = ''"
class="search__icon"
>
<img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
</button>
</div> </div>
<ul class="panel__items"> <ul class="panel__items">
<?php foreach($kirby->collection('years') as $year): ?> <?php foreach($kirby->collection('years') as $year): ?>