Add diary photos and linked patch history
This commit is contained in:
@@ -34,6 +34,11 @@
|
||||
.patch-image { width: auto; height: auto; max-width: 140px; max-height: 140px; object-fit: contain; display: block; }
|
||||
.patch.locked { opacity: .38; filter: grayscale(1); }
|
||||
.patch.earned { border: 0; background: transparent; box-shadow: 2px 3px 7px rgba(0,0,0,.7); }
|
||||
.patch-button { padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }
|
||||
.patch-dialog { width:min(92vw,460px); padding:24px; color:#f8fafc; background:#171717; border:1px solid var(--border); border-radius:14px; box-shadow:0 20px 60px #000; }
|
||||
.patch-dialog::backdrop { background:rgba(0,0,0,.78); }
|
||||
.patch-dialog-preview { max-width:150px; max-height:150px; object-fit:contain; }
|
||||
.patch-dialog-close { float:right; margin:0; }
|
||||
.profile-edit { margin-top: 24px; }
|
||||
.account-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
|
||||
.account-delete { flex:1; color:var(--muted); }
|
||||
@@ -127,13 +132,21 @@
|
||||
<div class="patch-grid">
|
||||
{% for badge in badges %}
|
||||
{% if badge.earned %}
|
||||
<div class="patch earned {% if badge.image_path %}patch-image-frame{% else %}patch-icon-frame{% endif %}" title="{{ badge.name }} – {{ badge.description }}" aria-label="{{ badge.name }}: {{ badge.description }}">
|
||||
<button class="patch-button" type="button" onclick="document.getElementById('patch-{{ badge.code }}').showModal()" aria-label="Details zu {{ badge.name }} anzeigen">
|
||||
<span class="patch earned {% if badge.image_path %}patch-image-frame{% else %}patch-icon-frame{% endif %}" title="{{ badge.name }} – {{ badge.description }}">
|
||||
{% if badge.image_path %}
|
||||
<img class="patch-image" src="{{ badge.image_path }}" alt="Patch {{ badge.name }}">
|
||||
{% else %}
|
||||
<span class="patch-icon">{{ badge.icon }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</span></button>
|
||||
<dialog class="patch-dialog" id="patch-{{ badge.code }}">
|
||||
<form method="dialog"><button class="button button-secondary patch-dialog-close" aria-label="Schließen">×</button></form>
|
||||
{% if badge.image_path %}<img class="patch-dialog-preview" src="{{ badge.image_path }}" alt="Patch {{ badge.name }}">{% else %}<div class="patch-icon">{{ badge.icon }}</div>{% endif %}
|
||||
<h3>{{ badge.name }}</h3><p>{{ badge.description }}</p>
|
||||
<p><strong>Erhalten am:</strong> {{ badge.awarded_at }}</p>
|
||||
{% if badge.trigger_concert %}<p><strong>Ausgelöst durch:</strong> <a href="/concerts/{{ badge.trigger_concert.id }}">{{ badge.trigger_concert.artist }} · {{ badge.trigger_concert.date }}</a></p>{% else %}<p><strong>Grund:</strong> {{ badge.description }}</p>{% endif %}
|
||||
</dialog>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user