feat: polish mobile ui and admin quick task settings

This commit is contained in:
2026-04-13 10:52:14 +02:00
parent 42d4f8ec8e
commit 7b53f66406
10 changed files with 559 additions and 74 deletions

View File

@@ -3,7 +3,36 @@
{% block title %}Kalender · Putzliga{% endblock %}
{% block page_title %}Kalender & Liste{% endblock %}
{% block content %}
<section class="panel panel--toolbar">
<section class="panel calendar-toolbar-mobile">
<div class="calendar-toolbar-mobile__header">
<div>
<p class="eyebrow">Monatsansicht</p>
<h2>{{ current_label }}</h2>
</div>
<div class="calendar-toolbar-mobile__arrows">
<a
class="icon-button calendar-nav-button"
href="{{ url_for('tasks.calendar_view', year=current_year if current_month > 1 else current_year - 1, month=current_month - 1 if current_month > 1 else 12, view=view) }}"
aria-label="Vorheriger Monat"
>
<span aria-hidden="true"></span>
</a>
<a
class="icon-button calendar-nav-button"
href="{{ url_for('tasks.calendar_view', year=current_year if current_month < 12 else current_year + 1, month=current_month + 1 if current_month < 12 else 1, view=view) }}"
aria-label="Nächster Monat"
>
<span aria-hidden="true"></span>
</a>
</div>
</div>
<div class="segmented calendar-toolbar-mobile__switch">
<a href="{{ url_for('tasks.calendar_view', year=current_year, month=current_month, view='calendar') }}" class="{% if view == 'calendar' %}is-active{% endif %}">Kalender</a>
<a href="{{ url_for('tasks.calendar_view', year=current_year, month=current_month, view='list') }}" class="{% if view == 'list' %}is-active{% endif %}">Liste</a>
</div>
</section>
<section class="panel panel--toolbar calendar-toolbar-desktop">
<div>
<p class="eyebrow">Monatsansicht</p>
<h2>{{ current_label }}</h2>
@@ -19,6 +48,48 @@
</section>
{% if view == 'calendar' %}
{% if mobile_day_groups %}
<section class="panel calendar-mobile-strip">
<div class="calendar-mobile-strip__scroller">
{% for group in mobile_day_groups %}
<a href="#day-{{ group.day }}" class="calendar-mobile-pill {% if loop.first %}is-active{% endif %}">
<strong>{{ group.day }}.</strong>
<small>{{ group.tasks|length }} Aufgabe{% if group.tasks|length != 1 %}n{% endif %}</small>
</a>
{% endfor %}
</div>
</section>
{% endif %}
<section class="calendar-mobile-list">
{% for group in mobile_day_groups %}
<article class="panel calendar-mobile-day" id="day-{{ group.day }}">
<div class="calendar-mobile-day__header">
<strong>{{ group.day }}. {{ current_month|month_name }}</strong>
<span>{{ group.tasks|length }} Aufgabe{% if group.tasks|length != 1 %}n{% endif %}</span>
</div>
<div class="calendar-mobile-day__tasks">
{% for task in group.tasks %}
<a href="{{ url_for('tasks.edit', task_id=task.id) }}" class="calendar-task calendar-task--{{ task.status }}">
<strong class="calendar-task__title">{{ task.title }}</strong>
<small class="calendar-task__person">
{% if task.completed_by_user %}
{{ task.completed_by_user.name }}
{% elif task.assigned_user %}
{{ task.assigned_user.name }}
{% else %}
Ohne Zuweisung
{% endif %}
</small>
</a>
{% endfor %}
</div>
</article>
{% else %}
<div class="empty-state">In diesem Monat sind noch keine Aufgaben hinterlegt.</div>
{% endfor %}
</section>
<section class="calendar-grid">
<div class="calendar-grid__weekdays">
{% for label in ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] %}
@@ -36,9 +107,9 @@
<strong class="calendar-task__title">{{ task.title }}</strong>
<small class="calendar-task__person">
{% if task.completed_by_user %}
Erledigt: {{ task.completed_by_user.name }}
{{ task.completed_by_user.name }}
{% elif task.assigned_user %}
Zuständig: {{ task.assigned_user.name }}
{{ task.assigned_user.name }}
{% else %}
Ohne Zuweisung
{% endif %}