From efe568bf6040c0af26e8d30300e6eae47dd1ab8b Mon Sep 17 00:00:00 2001
From: ro <iam@roiskinda.cool>
Date: Tue, 6 Feb 2024 15:39:19 -0600
Subject: [PATCH] Responsive Edits: Part 1

Responsive styles are non-existent so it was time to get that sorted.
This first pass was just getting a feel for what can be done with
list items since that's one of the main components of the site.

Second pass will clean this up as well as the majority of text styling
so it all smoothly adapts.

Ha, or that's the plan anyway.
---
 app/Http/Controllers/FrontIndexController.php |  2 +-
 public/assets/css/front/listing.css           | 41 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/app/Http/Controllers/FrontIndexController.php b/app/Http/Controllers/FrontIndexController.php
index a523e83..869cb4c 100644
--- a/app/Http/Controllers/FrontIndexController.php
+++ b/app/Http/Controllers/FrontIndexController.php
@@ -46,7 +46,7 @@ class FrontIndexController extends Controller
         $raw       = DB::select("SELECT * FROM searchlocations(?)", [$terms]);
         $results   = [];
         foreach ($raw as $item) {
-            if (($item->block_count + $item->silence_count) > 2) {
+            if (($item->block_count + $item->silence_count) >= 2) {
                 array_push($results, $item);
             }
         }
diff --git a/public/assets/css/front/listing.css b/public/assets/css/front/listing.css
index e27ba59..ad61fa9 100644
--- a/public/assets/css/front/listing.css
+++ b/public/assets/css/front/listing.css
@@ -50,6 +50,7 @@ a.list-link > .item-rating {
   color: var(--white);
   font-weight: 500;
   padding: 10px;
+  position: relative;
 }
 
 a.list-link > .item-name {
@@ -59,6 +60,7 @@ a.list-link > .item-name {
   font-weight: 400;
   padding: 9px 5px;
   cursor: pointer;
+  position: relative;
 }
 
 a.list-link > .item-silence {
@@ -67,6 +69,7 @@ a.list-link > .item-silence {
   color: var(--black);
   font-weight: 500;
   padding: 10px;
+  position: relative;
 }
 
 a.list-link > .item-block {
@@ -75,6 +78,7 @@ a.list-link > .item-block {
   color: var(--black);
   font-weight: 500;
   padding: 10px;
+  position: relative;
 }
 
 a.list-link > .item-silence > .item-icon,
@@ -82,3 +86,40 @@ a.list-link > .item-block > .item-icon {
   width: 30px;
   vertical-align: top;
 }
+
+/*
+    responsive
+ */
+
+@media only screen and (max-width: 800px) {
+  a.list-link {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 100% 100px 30px 30px;
+    gap: 5px;
+    height: auto;
+    padding-bottom: 20px;
+    cursor: pointer;
+  }
+
+  a.list-link > .item-rating {
+    grid-row: 3;
+    grid-column: 1/4;
+    height: 100%;
+  }
+
+  a.list-link > .item-name {
+    grid-row: 2/3;
+    grid-column: 1/6;
+  }
+
+  a.list-link > .item-silence {
+    grid-row: 3/4;
+    height: 100%;
+  }
+
+  a.list-link > .item-block {
+    grid-row: 3/4;
+    height: 100%;
+  }
+}