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

fix: organize admin patches and profile menu layering

Browse Source
This commit is contained in:
kai
2026-08-28 14:50:54 +02:00
parent f0d40f5fd4
commit d79e303396
4 changed files with 50 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/admin_patches.html
+23 -12
View File
@@ -8,6 +8,10 @@
<link rel="stylesheet" href="/static/css/style.css">
<style>
.patch-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.patch-admin-groups { display:grid; gap:12px; }
.patch-admin-group { padding:12px; background:#0b0b0b; border:1px solid var(--border); border-radius:10px; }
.patch-admin-group > summary { color:#fca5a5; cursor:pointer; font-size:1.05rem; font-weight:700; }
.patch-admin-group .patch-admin-grid { margin-top:14px; }
.patch-admin-card { display: grid; gap: 12px; align-content: start; }
.patch-preview { width: 140px; height: 140px; object-fit: contain; padding: 4px; background: #242424; border: 2px dashed #78716c; border-radius: 12px; }
.patch-placeholder { display: grid; place-items: center; font-size: 2.5rem; }
@@ -21,18 +25,25 @@
<div class="page-title"><h1>🧵 Patch-Bilder</h1><p>Grafiken für die Patches auf der virtuellen Kutte verwalten.</p></div>
{% set admin_section = 'patches' %}{% include '_admin_nav.html' %}
<section class="admin-section">
<div class="patch-admin-grid">
{% for patch in patches %}
<article class="admin-row patch-admin-card">
{% if patch.image_path %}<img class="patch-preview" src="{{ patch.image_path }}" alt="{{ patch.name }}">{% else %}<div class="patch-preview patch-placeholder">{{ patch.icon }}</div>{% endif %}
<div><strong>{{ patch.name }}</strong><div class="admin-meta">{{ patch.description }} · {{ patch.code }}</div></div>
<form class="patch-upload" method="post" action="/admin/patches/{{ patch.code }}" enctype="multipart/form-data">
<input type="file" name="image" accept="image/jpeg,image/png,image/webp" required>
<span class="patch-upload-status">Das Bild wird vor dem Upload automatisch optimiert.</span>
<button class="button" type="submit">{% if patch.image_path %}Bild ersetzen{% else %}Bild hochladen{% endif %}</button>
</form>
{% if patch.image_path %}<form method="post" action="/admin/patches/{{ patch.code }}/delete" onsubmit="return confirm('Patch-Bild entfernen und wieder das Symbol verwenden?');"><button class="admin-danger" type="submit">Bild entfernen</button></form>{% endif %}
</article>
<div class="patch-admin-groups">
{% for group in patch_groups %}
<details class="patch-admin-group">
<summary>{{ group.label }} · {{ group.patches|length }}</summary>
<div class="patch-admin-grid">
{% for patch in group.patches %}
<article class="admin-row patch-admin-card">
{% if patch.image_path %}<img class="patch-preview" src="{{ patch.image_path }}" alt="{{ patch.name }}">{% else %}<div class="patch-preview patch-placeholder">{{ patch.icon }}</div>{% endif %}
<div><strong>{{ patch.name }}</strong><div class="admin-meta">{{ patch.description }} · {{ patch.code }}</div></div>
<form class="patch-upload" method="post" action="/admin/patches/{{ patch.code }}" enctype="multipart/form-data">
<input type="file" name="image" accept="image/jpeg,image/png,image/webp" required>
<span class="patch-upload-status">Das Bild wird vor dem Upload automatisch optimiert.</span>
<button class="button" type="submit">{% if patch.image_path %}Bild ersetzen{% else %}Bild hochladen{% endif %}</button>
</form>
{% if patch.image_path %}<form method="post" action="/admin/patches/{{ patch.code }}/delete" onsubmit="return confirm('Patch-Bild entfernen und wieder das Symbol verwenden?');"><button class="admin-danger" type="submit">Bild entfernen</button></form>{% endif %}
</article>
{% endfor %}
</div>
</details>
{% endfor %}
</div>
</section>
app/templates/profile.html
+12 -21
View File
@@ -26,10 +26,6 @@
.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-categories { display:grid; gap:10px; }
.patch-category { padding:10px 12px; background:rgba(5,5,5,.55); border:1px solid #44403c; border-radius:10px; }
.patch-category > summary { color:#fca5a5; cursor:pointer; font-weight:700; }
.patch-category .patch-grid { margin-top:14px; }
.patch-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; align-items: flex-start; }
.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; }
@@ -126,27 +122,22 @@
</section>
<section class="badges-card">
<h2>🥋 Virtuelle Kutte</h2>
<p>Deine freigeschalteten Patches nach Kategorien. Besuchs-Patches werden jeweils durch die höchste Stufe ersetzt.</p>
<p>Deine freigeschalteten Patches. Besuchs-Patches werden jeweils durch die höchste Stufe ersetzt.</p>
<div class="kutte">
<div class="patch-categories">
{% for group in badge_groups %}
<details class="patch-category">
<summary>{{ group.label }} · {{ group.badges|length }}</summary>
<div class="patch-grid">
{% for badge in group.badges %}
<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 }}">
{% 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>
{% endfor %}
<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 }}">
{% 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>
</details>
{% endif %}
{% endfor %}
{% if not badge_groups %}
{% if not profile.earned_codes %}
<p>Noch keine Patches – dein erstes Konzert wartet!</p>
{% endif %}
</div>