photos fix

This commit is contained in:
pacnpal
2024-11-01 01:27:11 +00:00
parent 80a9d61ca2
commit f51c8370ce
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 %}

View File

@@ -6,7 +6,8 @@
{% block content %}
<div class="container px-4 mx-auto">
<div class="max-w-3xl mx-auto">
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
<!-- Ride Form -->
<div class="p-6 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
<div class="mb-6">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">{% if is_edit %}Edit{% else %}Add{% endif %} Ride at {{ park.name }}</h1>
<a href="{% url 'parks:rides:ride_list' park.slug %}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
@@ -95,6 +96,13 @@
</div>
</form>
</div>
<!-- Photos Section (only shown on edit) -->
{% if is_edit %}
<div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800" id="photos">
{% include "media/partials/photo_manager.html" with photos=object.photos.all content_type="rides.ride" object_id=object.id %}
</div>
{% endif %}
</div>
</div>
{% endblock %}

View File

@@ -1,5 +1,6 @@
{% extends 'base/base.html' %}
{% load static %}
{% load ride_tags %}
{% block title %}
{% if park %}
@@ -76,13 +77,17 @@
<div id="rides-grid" class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{% for ride in rides %}
<div class="overflow-hidden transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1">
{% if ride.photos.exists %}
<div class="aspect-w-16 aspect-h-9">
<div class="aspect-w-16 aspect-h-9">
{% if ride.photos.exists %}
<img src="{{ ride.photos.first.image.url }}"
alt="{{ ride.name }}"
class="object-cover w-full">
</div>
{% endif %}
{% else %}
<img src="{% get_ride_placeholder_image ride.category %}"
alt="{{ ride.name }}"
class="object-cover w-full">
{% endif %}
</div>
<div class="p-4">
<h2 class="mb-2 text-xl font-bold">
<a href="{% url 'parks:rides:ride_detail' ride.park.slug ride.slug %}"