FrankandClaude Sonnet 5
ed22b81e97
- gallery thumbnails now object-fit: contain (whole image, letterboxed),
and a card links to the new detail page instead of the raw file
- /art/{id} detail page: large uncropped image, "Open full size",
"Delete" (moved here from the gallery), and "Copy image"
- clipboard Stimulus controller copies the image to the OS clipboard
(converts non-PNG via canvas) for pasting into WhatsApp etc.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
39 lines
1.7 KiB
Twig
39 lines
1.7 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}{{ art.name }} · Art · dmtools{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="d-flex justify-content-between align-items-start mb-3 gap-3 flex-wrap">
|
|
<div>
|
|
<a href="{{ path('app_art') }}" class="text-decoration-none small">← Art</a>
|
|
<h1 class="h3 mb-0">{{ art.name }}</h1>
|
|
<span class="text-body-secondary small">
|
|
{{ art.uploadedAt|date('Y-m-d H:i') }} · {{ (art.size / 1024)|round }} KB
|
|
{%- if art.originalName %} · {{ art.originalName }}{% endif %}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm"
|
|
data-controller="clipboard"
|
|
data-clipboard-url-value="{{ path('app_art_file', {id: art.id}) }}"
|
|
data-action="clipboard#copy">Copy image</button>
|
|
|
|
<a href="{{ path('app_art_file', {id: art.id}) }}" target="_blank" rel="noopener"
|
|
class="btn btn-outline-secondary btn-sm">Open full size</a>
|
|
|
|
<form method="post" action="{{ path('app_art_delete', {id: art.id}) }}"
|
|
onsubmit="return confirm('Delete “{{ art.name|e('js') }}”?')">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('delete-art-' ~ art.id) }}">
|
|
<button class="btn btn-outline-danger btn-sm">Delete</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-body text-center art-full">
|
|
<img src="{{ path('app_art_file', {id: art.id}) }}" alt="{{ art.name }}">
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|