From 96a0b82695d21fabd23cf6fb9acd435b550b177b Mon Sep 17 00:00:00 2001
From: "waffle.lord" <waffle.lord@hotmail.com>
Date: Fri, 27 Sep 2024 08:57:11 -0400
Subject: [PATCH] add small screen control

also fix dropdown text colors
---
 resources/views/components/filter-menu-item.blade.php |  2 +-
 resources/views/livewire/mod/listing.blade.php        | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/filter-menu-item.blade.php b/resources/views/components/filter-menu-item.blade.php
index b933a8d..f355ef0 100644
--- a/resources/views/components/filter-menu-item.blade.php
+++ b/resources/views/components/filter-menu-item.blade.php
@@ -2,7 +2,7 @@
 
 <a href="#{{ $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">
     {{ $slot }}
 </a>
diff --git a/resources/views/livewire/mod/listing.blade.php b/resources/views/livewire/mod/listing.blade.php
index 5da9d3b..820b3dc 100644
--- a/resources/views/livewire/mod/listing.blade.php
+++ b/resources/views/livewire/mod/listing.blade.php
@@ -103,12 +103,20 @@
                     {{-- Results Per Page Dropdown --}}
                     <div class="relative inline-block" x-data="{ isResultsPerPageOpen: false }" @click.away="isResultsPerPageOpen = false">
                         <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') }}
                                 <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>
+                            {{-- 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 x-cloak
                              x-show="isResultsPerPageOpen"