M4: PWA + Mobile-UX – Manifest/Service-Worker + Icons, Auf/Ab-Reorder, FAB, Touch-Targets + Safe-Area, Nav-Entdupidung, Heute-Highlight, Aktions-Trennung (Abhaken vs. Bearbeiten/Löschen), OIDC-Fixes + PWA-Tests
This commit is contained in:
@@ -3,49 +3,98 @@
|
||||
eingebunden und als htmx-Fragment von den CheckOff/Uncheck-Endpunkten
|
||||
zurückgeliefert (htmx ersetzt per hx-swap="outerHTML" genau diese <li>).
|
||||
|
||||
@param MahlzeitResponse m
|
||||
@param bool sortierbar optional: zeigt Drag-Handle + data-id (Planungsliste)
|
||||
#}
|
||||
<li class="item" id="mahlzeit-{{ m.id }}"
|
||||
@param MahlzeitResponse m
|
||||
@param bool sortierbar optional: zeigt Drag-Handle + Auf/Ab-Buttons + data-id (Planungsliste)
|
||||
#}
|
||||
<li class="item {{ m.status.value == 'gegessen' ? 'item-gegessen' : '' }}" id="mahlzeit-{{ m.id }}"
|
||||
{% if sortierbar is defined and sortierbar %}data-id="{{ m.id }}"{% endif %}>
|
||||
<div>
|
||||
<div class="item-main">
|
||||
{% if sortierbar is defined and sortierbar %}
|
||||
<span class="drag-handle" title="Ziehen zum Sortieren">⋮</span>
|
||||
<span class="drag-handle" title="Ziehen zum Sortieren" aria-hidden="true">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
|
||||
<circle cx="5.5" cy="3" r="1.4"/><circle cx="10.5" cy="3" r="1.4"/>
|
||||
<circle cx="5.5" cy="8" r="1.4"/><circle cx="10.5" cy="8" r="1.4"/>
|
||||
<circle cx="5.5" cy="13" r="1.4"/><circle cx="10.5" cy="13" r="1.4"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="updown">
|
||||
<button type="button" class="updown-btn" data-dir="-1" aria-label="Nach oben verschieben">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="m6 15 6-6 6 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="updown-btn" data-dir="1" aria-label="Nach unten verschieben">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="m6 9 6 6 6-6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
{% endif %}
|
||||
<strong>{{ m.name }}</strong>
|
||||
{% if m.notiz != '' %}
|
||||
<div class="muted">{{ m.notiz }}</div>
|
||||
{% endif %}
|
||||
{% if m.wochentage|length > 0 %}
|
||||
<div class="tags">
|
||||
{% for tag in m.wochentage %}
|
||||
<span class="tag">{{ tag.name }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<span class="status {{ m.status.value == 'gegessen' ? 'status-gegessen' : '' }}">
|
||||
{{ m.status.value == 'gegessen' ? 'gegessen' : 'geplant' }}
|
||||
{% if m.status.value == 'gegessen' and m.gegessenAm %}
|
||||
· {{ m.gegessenAm|date('d.m.Y H:i') }}
|
||||
<div class="item-name">
|
||||
<strong>{{ m.name }}</strong>
|
||||
{% if m.notiz != '' %}
|
||||
<div class="notiz">{{ m.notiz }}</div>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if m.wochentage|length > 0 %}
|
||||
<div class="tags">
|
||||
{% for tag in m.wochentage %}
|
||||
<span class="tag tag-{{ tag.value }}">{{ tag.name }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<span class="status {{ m.status.value == 'gegessen' ? 'status-gegessen' : '' }}">
|
||||
{{ m.status.value == 'gegessen' ? 'gegessen' : 'geplant' }}
|
||||
{% if m.status.value == 'gegessen' and m.gegessenAm %}
|
||||
· {{ m.gegessenAm|date('d.m.Y H:i') }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
{% if m.status.value == 'geplant' %}
|
||||
<button type="button" class="btn"
|
||||
hx-post="{{ path('mahlzeiten_checkoff', { id: m.id }) }}"
|
||||
hx-target="#mahlzeit-{{ m.id }}"
|
||||
hx-swap="outerHTML">Abhaken</button>
|
||||
{% else %}
|
||||
<button type="button" class="btn btn-link"
|
||||
hx-post="{{ path('mahlzeiten_uncheck', { id: m.id }) }}"
|
||||
hx-target="#mahlzeit-{{ m.id }}"
|
||||
hx-swap="outerHTML">Aufheben</button>
|
||||
{% endif %}
|
||||
<a class="btn btn-link" href="{{ path('mahlzeiten_bearbeiten', { id: m.id }) }}">Bearbeiten</a>
|
||||
<form method="post" action="{{ path('mahlzeiten_loeschen', { id: m.id }) }}"
|
||||
onsubmit="return confirm('Mahlzeit „{{ m.name }}“ wirklich löschen?');">
|
||||
<button type="submit" class="btn btn-danger">Löschen</button>
|
||||
</form>
|
||||
<div class="action-haupt">
|
||||
{% if m.status.value == 'geplant' %}
|
||||
<button type="button" class="btn"
|
||||
hx-post="{{ path('mahlzeiten_checkoff', { id: m.id }) }}"
|
||||
hx-target="#mahlzeit-{{ m.id }}"
|
||||
hx-swap="outerHTML">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M4.5 12.5 9.5 17.5 19.5 6.5"/>
|
||||
</svg>
|
||||
Abhaken
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="button" class="btn btn-link"
|
||||
hx-post="{{ path('mahlzeiten_uncheck', { id: m.id }) }}"
|
||||
hx-target="#mahlzeit-{{ m.id }}"
|
||||
hx-swap="outerHTML">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M9 14 4 9l5-5"/>
|
||||
<path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>
|
||||
</svg>
|
||||
Aufheben
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="action-neben">
|
||||
<a class="btn btn-link" href="{{ path('mahlzeiten_bearbeiten', { id: m.id }) }}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M12 20h9"/>
|
||||
<path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>
|
||||
</svg>
|
||||
Bearbeiten
|
||||
</a>
|
||||
<form method="post" action="{{ path('mahlzeiten_loeschen', { id: m.id }) }}"
|
||||
onsubmit="return confirm('Mahlzeit „{{ m.name }}“ wirklich löschen?');">
|
||||
<button type="submit" class="btn btn-danger">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M3 6h18"/>
|
||||
<path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
|
||||
<path d="M10 11v6M14 11v6"/>
|
||||
</svg>
|
||||
Löschen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user