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

series of tests added with built-in django test support

Browse Source
This commit is contained in:
pacnpal
2024-11-05 18:40:39 +00:00
parent ba226c861a
commit 2e8a725933
60 changed files with 2108 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
templates/media/partials/photo_display.html
View File

@@ -6,7 +6,9 @@
{
id: {{ photo.id }},
url: '{{ photo.image.url }}',
caption: '{{ photo.caption|default:""|escapejs }}'
caption: '{{ photo.caption|default:""|escapejs }}',
date_taken: '{{ photo.date_taken|date:"F j, Y g:i A"|default:""|escapejs }}',
uploaded_by: '{{ photo.uploaded_by.username|default:""|escapejs }}'
}{% if not forloop.last %},{% endif %}
{% endfor %}
],
@@ -90,15 +92,35 @@
<i class="text-2xl fas fa-times"></i>
</button>
<!-- Photo -->
<img :src="fullscreenPhoto?.url"
:alt="fullscreenPhoto?.caption || ''"
class="max-h-[90vh] w-auto mx-auto rounded-lg">
<!-- Photo Container -->
<div class="relative">
<img :src="fullscreenPhoto?.url"
:alt="fullscreenPhoto?.caption || ''"
class="max-h-[90vh] w-auto mx-auto rounded-lg">
<!-- Caption -->
<div x-show="fullscreenPhoto?.caption"
class="mt-4 text-center text-white"
x-text="fullscreenPhoto?.caption">
<!-- Photo Info Overlay -->
<div class="absolute bottom-0 left-0 right-0 p-4 text-white bg-black bg-opacity-50 rounded-b-lg">
<!-- Caption -->
<div x-show="fullscreenPhoto?.caption"
class="mb-2 text-lg font-medium"
x-text="fullscreenPhoto?.caption">
</div>
<!-- Photo Details -->
<div class="flex flex-wrap gap-4 text-sm">
<!-- Uploaded By -->
<div x-show="fullscreenPhoto?.uploaded_by" class="flex items-center">
<i class="mr-2 fas fa-user"></i>
<span x-text="fullscreenPhoto?.uploaded_by"></span>
</div>
<!-- Date Taken -->
<div x-show="fullscreenPhoto?.date_taken" class="flex items-center">
<i class="mr-2 fas fa-calendar"></i>
<span x-text="fullscreenPhoto?.date_taken"></span>
</div>
</div>
</div>
</div>
<!-- Actions -->