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

docs/2024-02-14/changes.md

@@ -22,6 +22,28 @@
 - Added proper CORS and CSRF configurations for development
 - Improved authentication backend configuration
 
+## Park Detail Page Layout Updates
+- Moved Quick Facts section from right column into header section for better information visibility
+- Relocated map from left column to right column to improve content flow
+- Added ride counts (Total Rides and Roller Coasters) to the header status badges
+- Made the Location map card dynamically square, matching height to width
+- Adjusted grid layout to maintain responsive design
+- Added resize handling to ensure map stays square when browser window is resized
+
+### Technical Details
+- Modified templates/parks/park_detail.html
+- Restructured grid layout classes
+- Added JavaScript to maintain square aspect ratio for map
+- Added window resize event handler for map container
+- Reorganized content sections for better user experience
+
+### Rationale
+- Quick Facts are now more immediately visible to users in the header
+- Map placement in right column provides better content hierarchy
+- Square map provides better visual balance and consistency
+- Ride counts in header give immediate overview of park size
+- Changes improve overall page readability and information accessibility
+
 ## How to Run Development Environment
 1. Ensure PostgreSQL is running and database is created
 2. Set up your ***REMOVED*** file with necessary environment variables

static/css/tailwind.css

@@ -2547,6 +2547,10 @@ select {
   cursor: pointer;
 }
 
+.resize {
+  resize: both;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -2856,6 +2860,11 @@ select {
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
 }
 
+.bg-purple-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -3156,6 +3165,11 @@ select {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
+.text-purple-800 {
+  --tw-text-opacity: 1;
+  color: rgb(107 33 168 / var(--tw-text-opacity));
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -3555,6 +3569,11 @@ select {
   background-color: rgb(113 63 18 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-purple-700:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
+}
+
 .dark\:from-gray-950:is(.dark *) {
   --tw-gradient-from: #030712 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(3 7 18 / 0) var(--tw-gradient-to-position);
@@ -3670,6 +3689,11 @@ select {
   color: rgb(254 252 232 / var(--tw-text-opacity));
 }
 
+.dark\:text-purple-50:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(250 245 255 / var(--tw-text-opacity));
+}
+
 .dark\:ring-1:is(.dark *) {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3806,6 +3830,18 @@ select {
     grid-column: span 2 / span 2;
   }
 
+  .lg\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .lg\:mr-6 {
+    margin-right: 1.5rem;
+  }
+
+  .lg\:mt-0 {
+    margin-top: 0px;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -3814,6 +3850,14 @@ select {
     display: none;
   }
 
+  .lg\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .lg\:flex-1 {
+    flex: 1 1 0%;
+  }
+
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -3822,6 +3866,18 @@ select {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
+  .lg\:items-start {
+    align-items: flex-start;
+  }
+
+  .lg\:justify-between {
+    justify-content: space-between;
+  }
+
   .lg\:text-6xl {
     font-size: 3.75rem;
     line-height: 1;

templates/parks/park_detail.html

@@ -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">
+            <!-- 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">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>
+                    <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>
-                            <dt class="text-gray-500">Website</dt>
-                            <dd class="font-medium text-gray-900 dark:text-white">
+                <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="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                       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">
-                                    {{ park.website }}
+                        <i class="mr-2 fas fa-external-link-alt"></i>
+                        Official Website
                     </a>
-                            </dd>
                 </div>
             {% endif %}
-                </dl>
-            </div>
 
             <!-- 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 %}