From cc8accfb5af119296da7c240db5aba64d96a43f7 Mon Sep 17 00:00:00 2001
From: "waffle.lord" <waffle.lord@hotmail.com>
Date: Mon, 12 Aug 2024 14:42:28 -0400
Subject: [PATCH] handle mobile and light theme

---
 resources/views/livewire/mod-index.blade.php | 57 +++++++++++++-------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/resources/views/livewire/mod-index.blade.php b/resources/views/livewire/mod-index.blade.php
index 8e5c84c..21d39d9 100644
--- a/resources/views/livewire/mod-index.blade.php
+++ b/resources/views/livewire/mod-index.blade.php
@@ -1,14 +1,4 @@
 <div>
-    {{--
-    TODO:
-    [X] search bar for mods
-    [X] spt version filter
-        - ratings not in yet, otherwise ready
-    [ ] tags filter
-    [ ] small / mobile display handling
-    [ ] light mode theme handling
-    --}}
-
     {{-- page links --}}
     <div class="m-6">
         {{ $mods->links() }}
@@ -17,7 +7,7 @@
     {{-- grid layout --}}
     <div class="grid gap-6 grid-cols-1 lg:grid-cols-4 m-4">
 
-        {{-- search / section filters, mods --}}
+        {{-- column 1 --}}
         <div class="col-span-3">
             {{-- mods serach bar --}}
             <div>
@@ -25,10 +15,21 @@
                     <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M771-593 630-734l-85 84-85-84 113-114q12-12 27-17.5t30-5.5q16 0 30.5 5.5T686-848l85 85q18 17 26.5 39.5T806-678q0 23-8.5 45T771-593ZM220-409q-18-18-18-42.5t18-42.5l98-99 85 85-99 99q-17 18-41.5 18T220-409Zm-43 297q-11-12-17-26.5t-6-30.5q0-16 5.5-30.5T177-226l283-282-127-128q-18-17-18-41.5t18-42.5q17-18 42-18t43 18l127 127 57-57 112 114q12 12 12 28t-12 28q-12 12-28 12t-28-12L290-112q-12 12-26.5 17.5T234-89q-15 0-30-6t-27-17Z"/></svg>
                     </div>
-                    <input wire:model.live="modSearch" class="w-1/3 rounded-md border-0 bg-white dark:bg-gray-700 py-1.5 pl-10 pr-3 text-gray-900 dark:text-gray-300 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 dark:focus:bg-gray-200 dark:focus:text-black dark:focus:ring-0 sm:text-sm sm:leading-6" placeholder="Search Mods ..." />
+                    <input wire:model.live="modSearch" class="sm:w-1/3 w-full rounded-md border-0 bg-white dark:bg-gray-700 py-1.5 pl-10 pr-3 text-gray-900 dark:text-gray-300 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 dark:focus:bg-gray-200 dark:focus:text-black dark:focus:ring-0 sm:text-sm sm:leading-6" placeholder="Search Mods ..." />
                 </search>
             </div>
 
+            {{-- mobile section filters --}}
+            <div class="flex flex-col sm:hidden my-4">
+                <select wire:model.live="sectionFilter" class="block w-full rounded-md dark:text-white bg-gray-100 dark:bg-gray-950 border-gray-300 dark:border-gray-700 focus:border-grey-500 dark:focus:border-grey-600 focus:ring-grey-500 dark:focus:ring-grey-600">
+                    <option value="featured">{{__('Featured')}}</option>
+                    <option value="new">{{__('New')}}</option>
+                    <option value="recently_updated">{{__('Recently Updated')}}</option>
+                    <option value="most_downloaded">{{__('Most Downloaded')}}</option>
+                    <option value="top_rated">{{__('Top Rated')}}</option>
+                </select>
+            </div>
+
             {{-- section filters --}}
             <div class="hidden sm:block my-4">
                 <nav class="isolate flex divide-x divide-gray-200 dark:divide-gray-800 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl" aria-label="Tabs">
@@ -55,6 +56,21 @@
                 </nav>
             </div>
 
+            {{-- mobile version filters --}}
+            <div class="flex flex-col lg:hidden my-4">
+                <select wire:model.live="versionFilter" class="rounded-md dark:text-white bg-gray-100 dark:bg-gray-950 border-gray-300 dark:border-gray-700 focus:border-grey-500 dark:focus:border-grey-600 focus:ring-grey-500 dark:focus:ring-grey-600">
+                    <option value="-1">Any Version</option>
+                    @foreach($sptVersions as $version)
+                        <option value="{{ $version->id }}">{{ $version->version }}</option>
+                    @endforeach
+                </select>
+            </div>
+
+            {{-- mobile tags filters --}}
+            <div class="flex flex-col lg:hidden my-4">
+                <p class="text-gray-700 dark:text-gray-200">tags filters here when ready :)</p>
+            </div>
+
             {{-- mod cards --}}
             <div class="grid gap-6 grid-cols-2">
                 @foreach($mods as $mod)
@@ -63,13 +79,13 @@
             </div>
         </div>
 
-        {{-- version filters, tags --}}
-        <div class="flex flex-col col-span-1 gap-4">
+        {{-- column 2 --}}
+        <div class="flex flex-col col-span-1 gap-4 hidden lg:flex">
             {{-- spt version filters --}}
-            <div class="flex flex-col text-gray-700 bg-gray-300 dark:text-gray-200 dark:bg-gray-950 p-4 rounded-xl">
+            <div class="flex flex-col drop-shadow-2xl text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-950 p-4 rounded-xl">
                 <h2>SPT Version</h2>
                 <select wire:model.live="versionFilter" class="rounded-md dark:text-white bg-gray-100 dark:bg-gray-950 border-gray-300 dark:border-gray-700 focus:border-grey-500 dark:focus:border-grey-600 focus:ring-grey-500 dark:focus:ring-grey-600">
-                    <option disabled value="-1">Select a version</option>
+                    <option value="-1">Any Version</option>
                     @foreach($sptVersions as $version)
                         <option value="{{ $version->id }}">{{ $version->version }}</option>
                     @endforeach
@@ -77,22 +93,23 @@
             </div>
 
             {{-- tag filters --}}
-            <div class="flex flex-col text-gray-700 bg-gray-300 dark:text-gray-200 dark:bg-gray-950 p-4 rounded-xl gap-2">
+            <div class="flex flex-col drop-shadow-2xl text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-950 p-4 rounded-xl gap-2">
                 <h2>Tags</h2>
-                <button class="flex justify-between bg-gray-700 rounded-md border-gray-200 p-2">
+                <button class="flex justify-between text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-md p-2">
                     <span>Placeholder</span>
                     <span>2501</span>
                 </button>
-                <button class="flex justify-between bg-gray-700 rounded-md border-gray-200 p-2">
+                <button class="flex justify-between text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-md p-2">
                     <span>Stuff</span>
                     <span>420</span>
                 </button>
-                <button class="flex justify-between bg-gray-700 rounded-md border-gray-200 p-2">
+                <button class="flex justify-between text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-md p-2">
                     <span>Here</span>
                     <span>69</span>
                 </button>
             </div>
         </div>
+
     </div>
     {{-- page links --}}
     <div class="m-6">