From 30997cb615a5329291e7880e986a9b76659afc15 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Mon, 22 Sep 2025 14:40:47 +0000
Subject: [PATCH] Improve park detail page layout and ride display

Adds responsive grid column classes to Tailwind CSS and updates the park detail template to use a new custom component for displaying rides, removing direct links for property owner names.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0bdea3fb-49ea-4863-b501-fa6f5af0cbf0
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
---
 .replit                          |  4 ++++
 static/css/tailwind.css          | 15 +++++++++++++++
 templates/parks/park_detail.html | 23 +++++------------------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/.replit b/.replit
index 3520ba63..31acaadd 100644
--- a/.replit
+++ b/.replit
@@ -54,6 +54,10 @@ outputType = "webview"
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 35687
+externalPort = 3002
+
 [[ports]]
 localPort = 41923
 externalPort = 3000
diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index a9f01a54..3c371762 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -3228,6 +3228,11 @@
       flex: 1;
     }
   }
+  .sm\:grid-cols-1 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3474,6 +3479,11 @@
       max-width: var(--container-2xl);
     }
   }
+  .lg\:grid-cols-1 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
   .lg\:grid-cols-2 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3610,6 +3620,11 @@
       max-height: calc(100vh - 2rem);
     }
   }
+  .xl\:grid-cols-2 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .xl\:grid-cols-3 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
diff --git a/templates/parks/park_detail.html b/templates/parks/park_detail.html
index 976ce337..96086821 100644
--- a/templates/parks/park_detail.html
+++ b/templates/parks/park_detail.html
@@ -1,6 +1,7 @@
 {% extends "base/base.html" %}
 {% load static %}
 {% load park_tags %}
+{% load cotton %}
 
 {% block title %}{{ park.name }} - ThrillWiki{% endblock %}
 
@@ -77,10 +78,9 @@
             <div class="text-center">
                 <dt class="text-sm font-semibold text-gray-900 dark:text-white">Property Owner</dt>
                 <dd class="mt-1">
-                    <a href="{% url 'property_owners:property_owner_detail' park.property_owner.slug %}"
-                       class="text-sm font-bold text-sky-900 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-300">
+                    <span class="text-sm font-bold text-sky-900 dark:text-sky-400">
                         {{ park.property_owner.name }}
-                    </a>
+                    </span>
                 </dd>
             </div>
         </div>
@@ -169,22 +169,9 @@
                     </a>
                 </div>
                 {% if park.rides.exists %}
-                    <div class="grid gap-4 md:grid-cols-2">
+                    <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
                         {% for ride in park.rides.all|slice:":6" %}
-                            <div class="p-4 transition-colors rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
-                                <a href="{% url 'parks:rides:ride_detail' park.slug ride.slug %}" class="block">
-                                    <h3 class="mb-1 font-semibold text-gray-900 dark:text-white">{{ ride.name }}</h3>
-                                    <span class="text-blue-800 bg-blue-100 status-badge dark:bg-blue-700 dark:text-blue-50">
-                                        {{ ride.get_category_display }}
-                                    </span>
-                                    {% if ride.average_rating %}
-                                        <span class="flex items-center text-yellow-800 bg-yellow-100 status-badge dark:bg-yellow-600 dark:text-yellow-50">
-                                            <span class="mr-1 text-yellow-500 dark:text-yellow-200">★</span>
-                                            {{ ride.average_rating|floatformat:1 }}/10
-                                        </span>
-                                    {% endif %}
-                                </a>
-                            </div>
+                            <c-ride_card ride=ride url_variant="park" />
                         {% endfor %}
                     </div>
                 {% else %}