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

set responsive bo search bar

Browse source
This commit is contained in:
Alexis Gousseau 2024-03-04 12:07:48 +01:00
parent d9881c7cbf
commit eee1029fe5
3 changed files with 59 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
resources/sass/bo/base/_common.scss
View file

@ -52,6 +52,42 @@ body {
width: fit-content;
}
#search-form {
.input-group-text {
border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
border-bottom: 0;
@include media-breakpoint-up(md) {
border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius) !important;
border-bottom: var(--bs-border-width) solid var(--bs-border-color) !important;
}
}
.form-control {
@include media-breakpoint-up(md) {
width: 1% !important;
}
}
.btn {
&-primary {
border-radius: 0 0 0 var(--bs-border-radius) !important;
@include media-breakpoint-up(md) {
border-radius: 0 !important;
}
}
&-danger {
border-radius: 0 0 var(--bs-border-radius) 0 !important;
@include media-breakpoint-up(md) {
border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0 !important;
}
}
}
}
.btn-md {
height: 38px;
}

3
resources/sass/bo/utilities/_bootstrap-custom.scss
View file

@ -8,6 +8,9 @@
@include generate-bs-borders($infix, $prefix);
.w#{$infix}-fit {
width: fit-content !important;
}
.w#{$infix}-25 {
width: 25% !important;
}

49
resources/views/bo/modules/search-bar.blade.php
View file

@ -1,44 +1,35 @@
@php
$iArgs = [];
if (request()->sort_col) {
$iArgs['sort_col'] = request()->sort_col;
}
if (request()->search) {
$iArgs['search'] = request()->sort_way;
}
@endphp
<div class="row mb-3">
<div class="col-12">
<form id="searchForm" action="/{{ request()->path() }}">
<div class="input-group pt-3">
<label class="input-group-text" for="searchField">{{ $searchFields }}</label>
<form id="search-form" action="/{{ request()->path() }}">
<div class="d-flex align-items-center justify-content-center flex-column flex-md-row input-group pt-3">
<label class="input-group-text w-100 w-md-fit" for="search-field">
<span class="text-truncate">
{{ sprintf('Rechercher %s', $searchFields) }}
</span>
</label>
@if (request()->sort_col)
<input class="d-none" name="sort_col" type="text" value="{{ request()->sort_col }}">
@endif
@if (request()->sort_way)
<input class="d-none" name="sort_way" type="text" value="{{ request()->sort_way }}">
@endif
@if (request()->rangefilter)
<input class="d-none" name="rangefilter" type="text" value="{{ request()->rangefilter }}">
@endif
@if (request()->group)
<input class="d-none" name="group" type="text" value="{{ request()->group }}">
@endif
<input class="form-control" id="searchField" name="search" type="search" value="{{ request()->search }}"
<input class="form-control w-100" id="search-field" name="search" type="search" value="{{ request()->search }}"
placeholder="{{ __('crud.other.search_placeholder') }}" />
<button class="btn btn-primary" data-bs-toggle="tooltip" type="submit" title="{{ __('crud.other.search_start') }}">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-danger" id="searchDelete" data-bs-toggle="tooltip" type="button"
title="{{ __('crud.other.search_delete') }}">
<i class="fas fa-backspace"></i>
</button>
<div class="d-flex justify-content-center align-items-center input-group w-100 w-md-fit">
<button class="btn btn-primary w-50 w-md-fit" data-bs-toggle="tooltip" type="submit"
title="{{ __('crud.other.search_start') }}">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-danger w-50 w-md-fit m-0" id="searchDelete" data-bs-toggle="tooltip" type="button"
title="{{ __('crud.other.search_delete') }}">
<i class="fas fa-backspace"></i>
</button>
</div>
@push('scripts')
<script nonce="{{ $nonce }}">
document.getElementById('searchDelete').addEventListener('click', function(e) {
document.getElementById('searchField').value = '';
document.getElementById('searchForm').submit();
document.getElementById('search-field').value = '';
document.getElementById('search-form').submit();
});
</script>
@endpush