pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-22 00:31:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Park_detail updates, making the map smaller, merging "Quick Facts" into the header.

Browse Source
This commit is contained in:
pacnpal
2024-11-03 18:28:14 +00:00
parent 61c5bb7367
commit fa0214e249
3 changed files with 161 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
templates/parks/park_detail.html
View File

@@ -5,10 +5,10 @@
{% block content %}
<div class="container px-4 mx-auto">
<!-- Header -->
<!-- Header with Quick Facts -->
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
<div class="flex items-start justify-between">
<div>
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between">
<div class="mb-6 lg:mb-0 lg:mr-6 lg:flex-1">
<h1 class="mb-2 text-3xl font-bold text-gray-900 dark:text-white">{{ park.name }}</h1>
{% if park.city or park.state or park.country %}
<p class="mb-2 text-gray-600 dark:text-gray-400">
@@ -34,10 +34,56 @@
{{ park.average_rating|floatformat:1 }}/10
</span>
{% endif %}
{% if park.total_rides %}
<span class="text-blue-800 bg-blue-100 status-badge dark:bg-blue-700 dark:text-blue-50">
{{ park.total_rides }} Rides
</span>
{% endif %}
{% if park.total_roller_coasters %}
<span class="text-purple-800 bg-purple-100 status-badge dark:bg-purple-700 dark:text-purple-50">
{{ park.total_roller_coasters }} Roller Coasters
</span>
{% endif %}
</div>
</div>
<!-- Quick Facts in Header -->
<div class="lg:w-1/3">
<dl class="grid grid-cols-2 gap-4">
{% if park.owner %}
<div>
<dt class="text-sm text-gray-500">Owner/Operator</dt>
<dd class="font-medium text-gray-900 dark:text-white">
<a href="{% url 'companies:company_detail' park.owner.slug %}"
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
{{ park.owner.name }}
</a>
</dd>
</div>
{% endif %}
{% if park.opening_date %}
<div>
<dt class="text-sm text-gray-500">Opening Date</dt>
<dd class="font-medium text-gray-900 dark:text-white">{{ park.opening_date }}</dd>
</div>
{% endif %}
{% if park.operating_season %}
<div>
<dt class="text-sm text-gray-500">Operating Season</dt>
<dd class="font-medium text-gray-900 dark:text-white">{{ park.operating_season }}</dd>
</div>
{% endif %}
{% if park.size_acres %}
<div>
<dt class="text-sm text-gray-500">Size</dt>
<dd class="font-medium text-gray-900 dark:text-white">{{ park.size_acres }} acres</dd>
</div>
{% endif %}
</dl>
</div>
{% if user.is_authenticated %}
<div class="flex gap-2">
<div class="flex gap-2 mt-6 lg:mt-0">
<a href="{% url 'parks:park_update' park.slug %}" class="btn-secondary">
<i class="mr-2 fas fa-edit"></i>Edit
</a>
@@ -61,7 +107,7 @@
<!-- Main Content Grid -->
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
<!-- Left Column - Description and Details -->
<!-- Left Column - Description and Rides -->
<div class="lg:col-span-2">
{% if park.description %}
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
@@ -72,14 +118,6 @@
</div>
{% endif %}
<!-- Location Map -->
{% if park.latitude and park.longitude %}
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
<h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Location</h2>
<div id="map" class="relative h-[400px] rounded-lg" style="z-index: 0;"></div>
</div>
{% endif %}
<!-- Rides and Attractions -->
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
<div class="flex items-center justify-between mb-4">
@@ -113,72 +151,27 @@
</div>
</div>
<!-- Right Column - Quick Facts -->
<!-- Right Column - Map and Additional Info -->
<div class="lg:col-span-1">
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
<h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Quick Facts</h2>
<dl class="space-y-4">
{% if park.owner %}
<div>
<dt class="text-gray-500">Owner/Operator</dt>
<dd class="font-medium text-gray-900 dark:text-white">
<a href="{% url 'companies:company_detail' park.owner.slug %}"
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
{{ park.owner.name }}
</a>
</dd>
</div>
{% endif %}
{% if park.opening_date %}
<div>
<dt class="text-gray-500">Opening Date</dt>
<dd class="font-medium text-gray-900 dark:text-white">{{ park.opening_date }}</dd>
</div>
{% endif %}
{% if park.closing_date %}
<div>
<dt class="text-gray-500">Closing Date</dt>
<dd class="font-medium text-gray-900 dark:text-white">{{ park.closing_date }}</dd>
</div>
{% endif %}
{% if park.operating_season %}
<div>
<dt class="text-gray-500">Operating Season</dt>
<dd class="font-medium text-gray-900 dark:text-white">{{ park.operating_season }}</dd>
</div>
{% endif %}
{% if park.size_acres %}
<div>
<dt class="text-gray-500">Size</dt>
<dd class="font-medium text-gray-900 dark:text-white">{{ park.size_acres }} acres</dd>
</div>
{% endif %}
{% if park.total_rides %}
<div>
<dt class="text-gray-500">Total Rides</dt>
<dd class="font-medium text-gray-900 dark:text-white">{{ park.total_rides }}</dd>
</div>
{% endif %}
{% if park.total_roller_coasters %}
<div>
<dt class="text-gray-500">Roller Coasters</dt>
<dd class="font-medium text-gray-900 dark:text-white">{{ park.total_roller_coasters }}</dd>
</div>
{% endif %}
{% if park.website %}
<div>
<dt class="text-gray-500">Website</dt>
<dd class="font-medium text-gray-900 dark:text-white">
<a href="{{ park.website }}"
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
target="_blank" rel="noopener noreferrer">
{{ park.website }}
</a>
</dd>
</div>
{% endif %}
</dl>
</div>
<!-- Location Map -->
{% if park.latitude and park.longitude %}
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
<h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Location</h2>
<div id="map" class="relative rounded-lg" style="z-index: 0;"></div>
</div>
{% endif %}
{% if park.website %}
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
<h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Links</h2>
<a href="{{ park.website }}"
class="inline-flex items-center text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
target="_blank" rel="noopener noreferrer">
<i class="mr-2 fas fa-external-link-alt"></i>
Official Website
</a>
</div>
{% endif %}
<!-- History Panel -->
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
@@ -234,6 +227,11 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Make map container square based on its width
const mapContainer = document.getElementById('map');
const width = mapContainer.offsetWidth;
mapContainer.style.height = width + 'px';
const map = L.map('map').setView([{{ park.latitude }}, {{ park.longitude }}], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -243,6 +241,13 @@
L.marker([{{ park.latitude }}, {{ park.longitude }}])
.addTo(map)
.bindPopup("{{ park.name }}");
// Update map size when window is resized
window.addEventListener('resize', function() {
const width = mapContainer.offsetWidth;
mapContainer.style.height = width + 'px';
map.invalidateSize();
});
});
</script>
{% endblock %}