Skip to content

Commit ec4bbb8

Browse files
rappasoftrappasoft
committed
Fix tailwind filter dropdown
1 parent 628eaef commit ec4bbb8

File tree

3 files changed

+82
-78
lines changed

3 files changed

+82
-78
lines changed

‎resources/views/tailwind/datatable.blade.php

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,26 @@
1414
>
1515
@include('livewire-tables::tailwind.includes.offline')
1616

17-
<div class="flex-col space-y-4">
17+
<div class="flex-col">
1818
@include('livewire-tables::tailwind.includes.sorting-pills')
1919
@include('livewire-tables::tailwind.includes.filter-pills')
2020

21-
<div class="md:flex md:justify-between p-6 md:p-0">
22-
<div class="w-full mb-4 md:mb-0 md:w-2/4 md:flex space-y-4 md:space-y-0 md:space-x-4">
23-
@include('livewire-tables::tailwind.includes.search')
24-
@include('livewire-tables::tailwind.includes.filters')
25-
</div>
21+
<div class="space-y-4">
22+
<div class="md:flex md:justify-between p-6 md:p-0">
23+
<div class="w-full mb-4 md:mb-0 md:w-2/4 md:flex space-y-4 md:space-y-0 md:space-x-4">
24+
@include('livewire-tables::tailwind.includes.search')
25+
@include('livewire-tables::tailwind.includes.filters')
26+
</div>
2627

27-
<div class="md:space-x-2 md:flex md:items-center">
28-
@include('livewire-tables::tailwind.includes.bulk-actions')
29-
@include('livewire-tables::tailwind.includes.per-page')
28+
<div class="md:space-x-2 md:flex md:items-center">
29+
@include('livewire-tables::tailwind.includes.bulk-actions')
30+
@include('livewire-tables::tailwind.includes.per-page')
31+
</div>
3032
</div>
31-
</div>
3233

33-
@include('livewire-tables::tailwind.includes.table')
34-
@include('livewire-tables::tailwind.includes.pagination')
34+
@include('livewire-tables::tailwind.includes.table')
35+
@include('livewire-tables::tailwind.includes.pagination')
36+
</div>
3537
</div>
3638
</div>
3739

‎resources/views/tailwind/includes/filter-pills.blade.php

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
11
<div>
2-
@if ($showFilters && count($this->getFiltersWithoutSearch()))
3-
<div class="p-6 md:p-0">
4-
<small class="text-gray-700">@lang('Applied Filters'):</small>
2+
@if ($showFilters && count($this->getFiltersWithoutSearch()))
3+
<div class="mb-4 p-6 md:p-0">
4+
<small class="text-gray-700">@lang('Applied Filters'):</small>
55

6-
@foreach($filters as $key => $value)
7-
@if ($key !== 'search' && strlen($value))
8-
<span
9-
wire:key="filter-pill-{{ $key }}"
10-
class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700"
11-
>
12-
{{ $filterNames[$key] ?? collect($this->columns())->pluck('text', 'column')->get($key, ucwords(strtr($key, ['_' => ' ', '-' => ' ']))) }}:
13-
@if(isset($customFilters[$key]) && method_exists($customFilters[$key], 'options'))
14-
{{ $customFilters[$key]->options()[$value] ?? $value }}
15-
@else
16-
{{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}
17-
@endif
18-
19-
<button
20-
wire:click="removeFilter('{{ $key }}')"
21-
type="button"
22-
class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
6+
@foreach($filters as $key => $value)
7+
@if ($key !== 'search' && strlen($value))
8+
<span
9+
wire:key="filter-pill-{{ $key }}"
10+
class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700"
2311
>
24-
<span class="sr-only">@lang('Remove filter option')</span>
25-
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
26-
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
27-
</svg>
28-
</button>
29-
</span>
30-
@endif
31-
@endforeach
12+
{{ $filterNames[$key] ?? collect($this->columns())->pluck('text', 'column')->get($key, ucwords(strtr($key, ['_' => ' ', '-' => ' ']))) }}:
13+
@if(isset($customFilters[$key]) && method_exists($customFilters[$key], 'options'))
14+
{{ $customFilters[$key]->options()[$value] ?? $value }}
15+
@else
16+
{{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}
17+
@endif
3218

33-
<button class="focus:outline-none active:outline-none" wire:click.prevent="resetFilters">
34-
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
35-
@lang('Clear')
36-
</span>
37-
</button>
38-
</div>
39-
@endif
19+
<button
20+
wire:click="removeFilter('{{ $key }}')"
21+
type="button"
22+
class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
23+
>
24+
<span class="sr-only">@lang('Remove filter option')</span>
25+
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
26+
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
27+
</svg>
28+
</button>
29+
</span>
30+
@endif
31+
@endforeach
32+
33+
<button class="focus:outline-none active:outline-none" wire:click.prevent="resetFilters">
34+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
35+
@lang('Clear')
36+
</span>
37+
</button>
38+
</div>
39+
@endif
4040
</div>

‎resources/views/tailwind/includes/sorting-pills.blade.php

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,36 @@
1-
@if ($showSorting && count($sorts))
2-
<div class="p-6 md:p-0">
3-
<small class="text-gray-700">@lang('Applied Sorting'):</small>
1+
<div>
2+
@if ($showSorting && count($sorts))
3+
<div class="mb-4 p-6 md:p-0">
4+
<small class="text-gray-700">@lang('Applied Sorting'):</small>
45

5-
@foreach($sorts as $col => $dir)
6-
<span
7-
wire:key="sorting-pill-{{ $col }}"
8-
class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700"
9-
>
10-
{{ $sortNames[$col] ?? collect($this->columns())->pluck('text', 'column')->get($col, ucwords(strtr($col, ['_' => ' ', '-' => ' ']))) }}: {{ $dir === 'asc' ? ($sortDirectionNames[$col]['asc'] ?? 'A-Z') : ($sortDirectionNames[$col]['desc'] ?? 'Z-A') }}
11-
12-
<button
13-
wire:click="removeSort('{{ $col }}')"
14-
type="button"
15-
class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
6+
@foreach($sorts as $col => $dir)
7+
<span
8+
wire:key="sorting-pill-{{ $col }}"
9+
class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700"
1610
>
17-
<span class="sr-only">@lang('Remove sort option')</span>
18-
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
19-
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
20-
</svg>
21-
</button>
22-
</span>
23-
@endforeach
11+
{{ $sortNames[$col] ?? collect($this->columns())->pluck('text', 'column')->get($col, ucwords(strtr($col, ['_' => ' ', '-' => ' ']))) }}: {{ $dir === 'asc' ? ($sortDirectionNames[$col]['asc'] ?? 'A-Z') : ($sortDirectionNames[$col]['desc'] ?? 'Z-A') }}
2412

25-
<button
26-
wire:click.prevent="resetSorts"
27-
class="focus:outline-none active:outline-none"
28-
>
29-
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
30-
@lang('Clear')
31-
</span>
32-
</button>
33-
</div>
34-
@endif
13+
<button
14+
wire:click="removeSort('{{ $col }}')"
15+
type="button"
16+
class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
17+
>
18+
<span class="sr-only">@lang('Remove sort option')</span>
19+
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
20+
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
21+
</svg>
22+
</button>
23+
</span>
24+
@endforeach
25+
26+
<button
27+
wire:click.prevent="resetSorts"
28+
class="focus:outline-none active:outline-none"
29+
>
30+
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
31+
@lang('Clear')
32+
</span>
33+
</button>
34+
</div>
35+
@endif
36+
</div>

0 commit comments

Comments
 (0)