kai/pingu-concerts
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix two-column badge layout and descriptions

Browse Source
This commit is contained in:
MetalCircle Codex Bot
2026-09-15 14:20:34 +02:00
parent 2a803036b5
commit d43a12acf3
4 changed files with 67 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/profile.html
+9 -6
View File
@@ -26,17 +26,20 @@
.kutte::before, .kutte::after { content: ""; position: absolute; top: 0; width: 30%; height: 62px; background: #111; border-bottom: 3px solid #404040; }
.kutte::before { left: 0; border-radius: 24px 0 45% 0; }
.kutte::after { right: 0; border-radius: 0 24px 0 45%; }
.patch-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; align-items: flex-start; }
.patch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; gap: 14px; align-items: start; }
.patch-grid > p { grid-column: 1 / -1; }
.patch-button { display: flex; width: 100%; min-width: 0; justify-content: center; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }
.patch { padding: 5px; display: grid; place-items: center; text-align: center; background: #242424; border: 2px dashed #78716c; border-radius: 9px; color: #f8fafc; }
.patch-image-frame { width: fit-content; height: fit-content; }
.patch-image-frame { width: 100%; height: 140px; }
.patch-icon-frame { width: 105px; height: 105px; }
.patch-icon { font-size: 2.5rem; }
.patch-image { width: auto; height: auto; max-width: 140px; max-height: 140px; object-fit: contain; display: block; }
.patch-image { width: 100%; height: 100%; 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-description { line-height:1.55; }
.patch-dialog-reason { padding-top:10px; border-top:1px solid var(--border); color:var(--muted); }
.patch-dialog-preview { max-width:150px; max-height:150px; object-fit:contain; }
.patch-dialog-close { float:right; margin:0; }
.profile-edit { margin-top: 24px; }
@@ -150,9 +153,9 @@
<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 | t }}">{% else %}<div class="patch-icon">{{ badge.icon }}</div>{% endif %}
<h3>{{ badge.name | t }}</h3><p>{{ badge.description | t }}</p>
<h3>{{ badge.name | t }}</h3><p class="patch-dialog-description">{{ badge.long_description | t }}</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 | t }}</p>{% endif %}
{% if badge.trigger_concert %}<p class="patch-dialog-reason"><strong>{{ _('Ausgelöst durch:') }}</strong> <a href="/concerts/{{ badge.trigger_concert.id }}">{{ badge.trigger_concert.artist }} · {{ badge.trigger_concert.date }}</a></p>{% else %}<p class="patch-dialog-reason"><strong>{{ _('Grund:') }}</strong> {{ badge.description | t }}</p>{% endif %}
</dialog>
{% endif %}
{% endfor %}