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

Refactor add ride modal to utilize Alpine.js for state management. Improved modal open/close functionality and enhanced event handling for better user experience.

Browse Source
This commit is contained in:
pacnpal
2025-09-26 14:32:10 -04:00
parent 47c435d2f5
commit 5b7b203619
1 changed files with 73 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
templates/rides/partials/add_ride_modal.html
View File

@@ -1,47 +1,79 @@
<!-- Add Ride Modal --> <script>
<div id="add-ride-modal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> document.addEventListener('alpine:init', () => {
<div class="flex items-center justify-center min-h-screen p-4"> Alpine.data('addRideModal', () => ({
<!-- Background overlay --> isOpen: false,
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true"></div>
openModal() {
this.isOpen = true;
},
closeModal() {
this.isOpen = false;
},
handleBackdropClick(event) {
if (event.target === event.currentTarget) {
this.closeModal();
}
}
}));
});
</script>
<!-- Modal panel --> <div x-data="addRideModal()">
<div class="relative w-full max-w-3xl p-6 mx-auto bg-white rounded-lg shadow-xl dark:bg-gray-800"> <!-- Add Ride Modal -->
<div class="mb-6"> <div x-show="isOpen"
<h2 class="text-2xl font-bold text-gray-900 dark:text-white"> x-transition:enter="transition ease-out duration-300"
Add Ride at {{ park.name }} x-transition:enter-start="opacity-0"
</h2> x-transition:enter-end="opacity-100"
</div> x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="handleBackdropClick($event)"
@keydown.escape.window="closeModal()"
class="fixed inset-0 z-50 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
style="display: none;">
<div class="flex items-center justify-center min-h-screen p-4">
<!-- Background overlay -->
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true"></div>
<div id="modal-content"> <!-- Modal panel -->
{% include "rides/partials/ride_form.html" with modal=True %} <div class="relative w-full max-w-3xl p-6 mx-auto bg-white rounded-lg shadow-xl dark:bg-gray-800"
x-transition:enter="transition ease-out duration-300 transform"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="transition ease-in duration-200 transform"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<div class="mb-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
Add Ride at {{ park.name }}
</h2>
<button @click="closeModal()"
class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div id="modal-content">
{% include "rides/partials/ride_form.html" with modal=True %}
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Modal Toggle Button -->
<button type="button"
@click="openModal()"
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Add Ride
</button>
</div> </div>
<!-- Modal Toggle Button -->
<button type="button"
onclick="openModal('add-ride-modal')"
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Add Ride
</button>
<script>
function openModal(modalId) {
document.getElementById(modalId).classList.remove('hidden');
}
function closeModal() {
document.getElementById('add-ride-modal').classList.add('hidden');
}
// Close modal when clicking outside
document.getElementById('add-ride-modal').addEventListener('click', function(event) {
if (event.target === this) {
closeModal();
}
});
</script>