photos fix

This commit is contained in:
pacnpal
2024-11-01 01:27:11 +00:00
parent 3cbda93094
commit 6265f82193
89 changed files with 2241 additions and 614 deletions

View File

@@ -40,27 +40,23 @@
{% if user.is_authenticated %}
<div class="flex gap-2">
<a href="{% url 'parks:rides:ride_edit' park_slug=ride.park.slug ride_slug=ride.slug %}" class="btn-secondary">
<i class="mr-2 fas fa-edit"></i>
Edit
<i class="mr-2 fas fa-edit"></i>Edit
</a>
{% if perms.media.add_photo %}
<button class="btn-secondary" @click="$dispatch('show-photo-upload')">
<i class="mr-2 fas fa-camera"></i>Upload Photo
</button>
{% endif %}
</div>
{% endif %}
</div>
</div>
<!-- Photos Grid -->
<!-- Photos -->
{% if ride.photos.exists %}
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
<div class="p-6 mb-8 bg-white rounded-lg shadow dark:bg-gray-800">
<h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Photos</h2>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
{% for photo in ride.photos.all %}
<div class="aspect-w-16 aspect-h-9">
<img src="{{ photo.image.url }}"
alt="{{ photo.caption|default:ride.name }}"
class="object-cover rounded-lg">
</div>
{% endfor %}
</div>
{% include "media/partials/photo_display.html" with photos=ride.photos.all content_type="rides.ride" object_id=ride.id %}
</div>
{% endif %}
@@ -68,12 +64,14 @@
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
<!-- Left Column - Description and Details -->
<div class="lg:col-span-2">
<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">About</h2>
<div class="prose dark:prose-invert max-w-none">
{{ ride.description|linebreaks }}
{% if ride.description %}
<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">About</h2>
<div class="prose dark:prose-invert max-w-none">
{{ ride.description|linebreaks }}
</div>
</div>
</div>
{% endif %}
{% if ride.previous_names %}
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
@@ -220,22 +218,6 @@
{% endfor %}
</div>
</div>
<!-- Photos -->
{% if ride.photos.exists %}
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
<h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Photos</h2>
<div class="grid grid-cols-2 gap-2">
{% for photo in ride.photos.all %}
<div class="aspect-w-16 aspect-h-9">
<img src="{{ photo.image.url }}"
alt="{{ photo.caption|default:ride.name }}"
class="object-cover rounded-lg">
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
@@ -276,4 +258,23 @@
{% endif %}
</div>
</div>
<!-- Photo Upload Modal -->
{% if perms.media.add_photo %}
<div x-data="{ show: false }"
@show-photo-upload.window="show = true"
x-show="show"
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
@click.self="show = false">
<div class="w-full max-w-2xl p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-gray-800">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Upload Photos</h3>
<button @click="show = false" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
<i class="text-xl fas fa-times"></i>
</button>
</div>
{% include "media/partials/photo_upload.html" with content_type="rides.ride" object_id=ride.id %}
</div>
</div>
{% endif %}
{% endblock %}