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
This commit is contained in:
pac7
2025-09-22 14:40:47 +00:00
parent 0ee6e8c820
commit 30997cb615
3 changed files with 24 additions and 18 deletions

View File

@@ -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 %}