add small screen control

also fix dropdown text colors
This commit is contained in:
IsWaffle 2024-09-27 08:57:11 -04:00
parent 4ea50fb0ef
commit 96a0b82695
2 changed files with 10 additions and 2 deletions

View File

@ -2,7 +2,7 @@
<a href="#{{ $filter }}" <a href="#{{ $filter }}"
@click.prevent="$wire.set('{{ $filterName }}', '{{ $filter }}')" @click.prevent="$wire.set('{{ $filterName }}', '{{ $filter }}')"
class="flex items-center gap-2 bg-slate-100 px-4 py-2 text-sm text-slate-700 hover:bg-slate-800/5 hover:text-black focus-visible:bg-slate-800/10 focus-visible:text-black focus-visible:outline-none dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-100/5 dark:hover:text-white dark:focus-visible:bg-slate-100/10 dark:focus-visible:text-white {{ strval($filter) === strval($currentFilter) ? "font-bold text-cyan-500 dark:text-cyan-500" : "" }}" class="flex items-center gap-2 bg-slate-100 px-4 py-2 text-sm hover:bg-slate-800/5 focus-visible:bg-slate-800/10 focus-visible:text-black focus-visible:outline-none dark:bg-slate-800 dark:hover:bg-slate-100/5 dark:focus-visible:bg-slate-100/10 dark:focus-visible:text-white {{ strval($filter) === strval($currentFilter) ? "font-bold text-cyan-500 dark:text-cyan-500 hover:text-cyan-400 dark:hover:text-cyan-400" : "text-slate-700 dark:text-slate-300 hover:text-black dark:hover:text-white" }}"
role="menuitem" tabindex="-1"> role="menuitem" tabindex="-1">
{{ $slot }} {{ $slot }}
</a> </a>

View File

@ -103,12 +103,20 @@
{{-- Results Per Page Dropdown --}} {{-- Results Per Page Dropdown --}}
<div class="relative inline-block" x-data="{ isResultsPerPageOpen: false }" @click.away="isResultsPerPageOpen = false"> <div class="relative inline-block" x-data="{ isResultsPerPageOpen: false }" @click.away="isResultsPerPageOpen = false">
<div class="flex"> <div class="flex">
<button type="button" @click="isResultsPerPageOpen = !isResultsPerPageOpen" class="group inline-flex justify-center text-sm font-medium text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100" id="menu-button" :aria-expanded="isResultsPerPageOpen.toString()" aria-haspopup="true"> {{-- Large display can show full text --}}
<button type="button" @click="isResultsPerPageOpen = !isResultsPerPageOpen" class="hidden lg:flex group inline-flex justify-center text-sm font-medium text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100" id="menu-button" :aria-expanded="isResultsPerPageOpen.toString()" aria-haspopup="true">
{{ __('Results Per Page') }} {{ __('Results Per Page') }}
<svg class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <svg class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg> </svg>
</button> </button>
{{-- Only show selected number on smaller screens --}}
<button type="button" @click="isResultsPerPageOpen = !isResultsPerPageOpen" class="lg:hidden group inline-flex justify-center text-sm font-medium text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100" id="menu-button" :aria-expanded="isResultsPerPageOpen.toString()" aria-haspopup="true">
{{ $resultsPerPage }}
<svg class="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
</div> </div>
<div x-cloak <div x-cloak
x-show="isResultsPerPageOpen" x-show="isResultsPerPageOpen"