forge-joniko/ldc-doux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Header - Change searchbar style

Browse source
This commit is contained in:
Sebastien Hattry 2022-03-11 10:55:58 +01:00
parent eb31177af7
commit 0f95a3b7ea
4 changed files with 41 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/css/preload-front.css vendored
View file

@ -4984,11 +4984,23 @@ h3:not(.item__title, .product-card__title){
.secondmenu .search-form{
display:none;
position:absolute;
width:240px;
right:0;
top:40px;
padding:15px 10px 10px;
border:none;
border-radius:5px;
box-shadow:1px 1px 5px 2px #333;
background-color:#fff;
}
.secondmenu .search-form.is-visible{
display:initial;
}
.secondmenu .search-form .search-form__input{
width:100%;
border:none;
border-bottom:1px solid #000;
}
@media screen and (max-width: 799px){
.secondmenu{

13
resources/sass/frontend/_menu.scss vendored
View file

@ -186,10 +186,23 @@
.search-form {
display: none;
position: absolute;
width: 240px;
right: 0;
top: 40px;
padding: 15px 10px 10px;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 5px 2px #333;
background-color: #fff;
&.is-visible {
display: initial;
}
.search-form__input {
width: 100%;
border: none;
border-bottom: 1px solid #000;
}
}
}

16
resources/views/front/news.blade.php
View file

@ -104,17 +104,19 @@
</div>
<p class="h2">Nous travaillons toujours pour améliorer nos recettes et proposer des produits de meilleure qualité</p>
@if (isset($products_home))
<div id="carrousel2">
@foreach ($products_home as $product)
<div class="item is-flex">
<div class="item__image"><img src="{{ asset('assets/images/big-doux.jpg') }}" alt="photo"></div>
</div>
<div class="item is-flex">
<div class="item__image"><img src="{{ asset('assets/images/big-doux.jpg') }}" alt="photo"></div>
</div>
<div class="item is-flex">
<div class="item__image"><img src="{{ asset('assets/images/big-doux.jpg') }}" alt="photo"></div>
<div class="item__image">
<a href="{{ route($routeprefixer . 'product.show', ['gammeSlug' => $product->gamme->slug , 'productSlug' => $product->slug]) }}">
<img src="{{ asset($product->picture) }}" alt="{{ $product->alt_text_picture}}" />
</a>
</div>
</div>
@endforeach
</div>
@endif
</div>
@endsection

14
resources/views/layouts/frontend/app-header.blade.php
View file

@ -116,12 +116,12 @@
<li class="@if(App::getLocale() == 'en') current @endif"><a href="{{ $currentUrlEN }}">en</a></li>
<li class="@if(App::getLocale() == 'es') current @endif"><a href="{{ $currentUrlES }}">es</a></li>
</ul>
<form class="form search-form" method="GET" action="{{ route($routeprefixer . 'search') }}">
<input class="search-form__input" type="search"
placeholder="{{ __("Recherchez un produit") }}"
id="search_filter" name="filter"
value="{{ $filter ?? ''}}">
</form>
<div class="search-bloc search-form">
<form class="form" method="GET" action="{{ route($routeprefixer . 'search') }}">
<label for="filter">{{ __("Recherchez un produit") }}</label>
<input class="search-form__input" type="search" id="search_filter" name="filter" value="{{ $filter ?? ''}}">
</form>
</div>
<button id="search">
{{-- <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
<path class="cls-1" d="M13.06,0h7a17.46,17.46,0,0,1,8,8v7c-5.38,8.15-9,9.37-18.37,5.94l-6.52,7c-2.49.5-3.48-.5-3-3l7-6.52C3.7,9,4.92,5.38,13.06,0ZM16.6,3.74a7.41,7.41,0,0,0-7.54,7.41,7.49,7.49,0,0,0,7.67,7.79,7.4,7.4,0,0,0,7.52-7.43A7.31,7.31,0,0,0,16.6,3.74Z" />
@ -141,7 +141,7 @@
var loupe = document.querySelector("button#search");
loupe.addEventListener("click", function () {
document.querySelector("form.search-form").classList.toggle('is-visible');
document.querySelector("div.search-form").classList.toggle('is-visible');
});
</script>
@endpush