hnzio/putzliga
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: polish mobile ui and admin quick task settings

Browse Source
This commit is contained in:
Florian Heinz
2026-04-13 10:52:14 +02:00
parent 42d4f8ec8e
commit 7b53f66406
10 changed files with 559 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/__init__.py
View File

@@ -1,5 +1,7 @@
from __future__ import annotations
from pathlib import Path
from flask import Flask
from config import Config
@@ -52,9 +54,16 @@ def create_app(config_class: type[Config] = Config) -> Flask:
quick_task_form = QuickTaskForm(prefix="quick")
quick_task_config = get_quick_task_config()
quick_task_form.effort.choices = [
(key, f"{values['label']} · {values['points']} Punkte")
(key, values["label"])
for key, values in quick_task_config.items()
]
def asset_version(filename: str) -> int:
path = Path(app.static_folder) / filename
try:
return int(path.stat().st_mtime)
except FileNotFoundError:
return 1
return {
"app_name": app.config["APP_NAME"],
"nav_items": [
@@ -65,7 +74,15 @@ def create_app(config_class: type[Config] = Config) -> Flask:
("scoreboard.index", "Highscore", "trophy"),
("settings.index", "Optionen", "gear"),
],
"mobile_nav_items": [
("tasks.my_tasks", "Meine Aufgaben", "house"),
("tasks.all_tasks", "Alle Aufgaben", "list"),
("tasks.calendar_view", "Kalender", "calendar"),
("scoreboard.index", "Highscore", "trophy"),
("settings.index", "Optionen", "gear"),
],
"icon_svg": lambda name: load_icon_svg(name, app.static_folder),
"asset_version": asset_version,
"now_local": local_now(),
"quick_task_form": quick_task_form,
"quick_task_config": quick_task_config,

8
app/forms.py
View File

@@ -118,15 +118,19 @@ class QuickTaskForm(FlaskForm):
title = StringField("Titel", validators=[DataRequired(), Length(min=2, max=160)])
effort = SelectField(
"Aufwand",
choices=[(key, label) for key, label, _ in QUICK_TASK_EFFORTS],
choices=[(key, key) for key, _, _ in QUICK_TASK_EFFORTS],
validators=[DataRequired()],
)
submit = SubmitField("Schnellaufgabe speichern")
class QuickTaskConfigForm(FlaskForm):
fast_label = StringField("Bezeichnung", validators=[DataRequired(), Length(min=2, max=60)])
fast_points = IntegerField("Schnell", validators=[DataRequired(), NumberRange(min=1, max=500)])
normal_label = StringField("Bezeichnung", validators=[DataRequired(), Length(min=2, max=60)])
normal_points = IntegerField("Normal", validators=[DataRequired(), NumberRange(min=1, max=500)])
medium_label = StringField("Bezeichnung", validators=[DataRequired(), Length(min=2, max=60)])
medium_points = IntegerField("Dauert etwas", validators=[DataRequired(), NumberRange(min=1, max=500)])
heavy_label = StringField("Bezeichnung", validators=[DataRequired(), Length(min=2, max=60)])
heavy_points = IntegerField("Aufwendig", validators=[DataRequired(), NumberRange(min=1, max=500)])
submit = SubmitField("Punkte speichern")
submit = SubmitField("Aufwand speichern")

9
app/models.py
View File

@@ -89,7 +89,14 @@ class TaskTemplate(TimestampMixin, db.Model):
def recurrence_label(self) -> str:
if self.recurrence_interval_unit == "none" or not self.recurrence_interval_value:
return "Einmalig"
return f"Alle {self.recurrence_interval_value} {self.recurrence_interval_unit}"
units = {
"days": ("Tag", "Tage"),
"weeks": ("Woche", "Wochen"),
"months": ("Monat", "Monate"),
}
singular, plural = units.get(self.recurrence_interval_unit, (self.recurrence_interval_unit, self.recurrence_interval_unit))
unit_label = singular if self.recurrence_interval_value == 1 else plural
return f"Alle {self.recurrence_interval_value} {unit_label}"
class TaskInstance(TimestampMixin, db.Model):

20
app/routes/settings.py
View File

@@ -10,7 +10,7 @@ from werkzeug.utils import secure_filename
from ..extensions import csrf, db
from ..forms import AdminUserForm, QuickTaskConfigForm, SettingsProfileForm
from ..models import BadgeDefinition, MonthlyScoreSnapshot, NotificationLog, PushSubscription, TaskInstance, TaskTemplate, User
from ..services.app_settings import get_quick_task_config, set_setting_int
from ..services.app_settings import get_quick_task_config, set_setting_int, set_setting_str
from ..services.badges import earned_badges_for_user
from ..services.notifications import push_enabled
@@ -48,6 +48,16 @@ def index():
form = SettingsProfileForm(original_email=current_user.email, obj=current_user)
admin_form = AdminUserForm(prefix="admin")
quick_task_config_form = QuickTaskConfigForm(prefix="quickconfig")
quick_task_config = get_quick_task_config()
if request.method == "GET":
quick_task_config_form.fast_label.data = quick_task_config["fast"]["label"]
quick_task_config_form.fast_points.data = quick_task_config["fast"]["points"]
quick_task_config_form.normal_label.data = quick_task_config["normal"]["label"]
quick_task_config_form.normal_points.data = quick_task_config["normal"]["points"]
quick_task_config_form.medium_label.data = quick_task_config["medium"]["label"]
quick_task_config_form.medium_points.data = quick_task_config["medium"]["points"]
quick_task_config_form.heavy_label.data = quick_task_config["heavy"]["label"]
quick_task_config_form.heavy_points.data = quick_task_config["heavy"]["points"]
if form.validate_on_submit():
current_user.name = form.name.data.strip()
current_user.email = form.email.data.lower().strip()
@@ -67,7 +77,7 @@ def index():
form=form,
admin_form=admin_form,
quick_task_config_form=quick_task_config_form,
quick_task_config=get_quick_task_config(),
quick_task_config=quick_task_config,
users=User.query.order_by(User.is_admin.desc(), User.name.asc()).all(),
earned_badges=earned_badges_for_user(current_user.id),
push_ready=push_enabled(),
@@ -144,12 +154,16 @@ def update_quick_task_config():
flash(error, "error")
return redirect(url_for("settings.index"))
set_setting_str("quick_task_label_fast", form.fast_label.data)
set_setting_int("quick_task_points_fast", form.fast_points.data)
set_setting_str("quick_task_label_normal", form.normal_label.data)
set_setting_int("quick_task_points_normal", form.normal_points.data)
set_setting_str("quick_task_label_medium", form.medium_label.data)
set_setting_int("quick_task_points_medium", form.medium_points.data)
set_setting_str("quick_task_label_heavy", form.heavy_label.data)
set_setting_int("quick_task_points_heavy", form.heavy_points.data)
db.session.commit()
flash("Schnellaufgaben-Punkte wurden aktualisiert.", "success")
flash("Schnellaufgaben-Aufwand und Punkte wurden aktualisiert.", "success")
return redirect(url_for("settings.index"))

6
app/routes/tasks.py
View File

@@ -193,6 +193,11 @@ def calendar_view():
for task in tasks:
tasks_by_day[task.due_date.day].append(task)
mobile_day_groups = [
{"day": day, "tasks": grouped_tasks}
for day, grouped_tasks in sorted(tasks_by_day.items(), key=lambda item: item[0])
]
month_calendar = calendar.Calendar(firstweekday=0).monthdayscalendar(year, month)
return render_template(
"tasks/calendar.html",
@@ -201,6 +206,7 @@ def calendar_view():
current_label=month_label(year, month),
month_calendar=month_calendar,
tasks_by_day=tasks_by_day,
mobile_day_groups=mobile_day_groups,
view=view,
tasks=tasks,
)

38
app/services/app_settings.py
View File

@@ -5,6 +5,10 @@ from ..models import AppSetting
QUICK_TASK_DEFAULTS = {
"quick_task_label_fast": "Schnell",
"quick_task_label_normal": "Normal",
"quick_task_label_medium": "Dauert etwas",
"quick_task_label_heavy": "Aufwendig",
"quick_task_points_fast": 4,
"quick_task_points_normal": 8,
"quick_task_points_medium": 12,
@@ -12,10 +16,10 @@ QUICK_TASK_DEFAULTS = {
}
QUICK_TASK_EFFORTS = [
("fast", "Schnell", "quick_task_points_fast"),
("normal", "Normal", "quick_task_points_normal"),
("medium", "Dauert etwas", "quick_task_points_medium"),
("heavy", "Aufwendig", "quick_task_points_heavy"),
("fast", "quick_task_label_fast", "quick_task_points_fast"),
("normal", "quick_task_label_normal", "quick_task_points_normal"),
("medium", "quick_task_label_medium", "quick_task_points_medium"),
("heavy", "quick_task_label_heavy", "quick_task_points_heavy"),
]
@@ -46,12 +50,30 @@ def set_setting_int(key: str, value: int) -> None:
setting.value = str(value)
def get_setting_str(key: str, default: str) -> str:
setting = AppSetting.query.filter_by(key=key).first()
if not setting or not setting.value.strip():
return default
return setting.value.strip()
def set_setting_str(key: str, value: str) -> None:
setting = AppSetting.query.filter_by(key=key).first()
normalized = value.strip()
if not setting:
setting = AppSetting(key=key, value=normalized)
db.session.add(setting)
else:
setting.value = normalized
def get_quick_task_config() -> dict[str, dict]:
config: dict[str, dict] = {}
for effort_key, label, setting_key in QUICK_TASK_EFFORTS:
for effort_key, label_key, points_key in QUICK_TASK_EFFORTS:
config[effort_key] = {
"label": label,
"setting_key": setting_key,
"points": get_setting_int(setting_key, QUICK_TASK_DEFAULTS[setting_key]),
"label_key": label_key,
"label": get_setting_str(label_key, str(QUICK_TASK_DEFAULTS[label_key])),
"points_key": points_key,
"points": get_setting_int(points_key, int(QUICK_TASK_DEFAULTS[points_key])),
}
return config

402
app/static/css/style.css
View File

@@ -48,6 +48,7 @@
}
:root {
color-scheme: light;
--bg: #eef3ff;
--bg-accent: #d8e6ff;
--surface: rgba(255, 255, 255, 0.85);
@@ -69,6 +70,14 @@
--font-body: "InterLocal", system-ui, sans-serif;
--font-heading: "SpaceGroteskLocal", "InterLocal", sans-serif;
--safe-bottom: max(24px, env(safe-area-inset-bottom));
--body-radial-a: rgba(181, 210, 255, 0.85);
--body-radial-b: rgba(255, 221, 196, 0.48);
--body-linear-start: #f8fbff;
--body-linear-mid: #eef3ff;
--body-linear-end: #edf2ff;
--input-bg: rgba(255, 255, 255, 0.86);
--nav-bg: rgba(255, 255, 255, 0.88);
--nav-active-bg: rgba(37, 99, 235, 0.1);
}
* {
@@ -77,17 +86,19 @@
html {
min-height: 100%;
overflow-x: hidden;
}
body {
margin: 0;
min-height: 100vh;
overflow-x: hidden;
font-family: var(--font-body);
color: var(--text);
background:
radial-gradient(circle at top left, rgba(181, 210, 255, 0.85), transparent 32%),
radial-gradient(circle at top right, rgba(255, 221, 196, 0.48), transparent 32%),
linear-gradient(180deg, #f8fbff 0%, #eef3ff 42%, #edf2ff 100%);
radial-gradient(circle at top left, var(--body-radial-a), transparent 32%),
radial-gradient(circle at top right, var(--body-radial-b), transparent 32%),
linear-gradient(180deg, var(--body-linear-start) 0%, var(--body-linear-mid) 42%, var(--body-linear-end) 100%);
}
a {
@@ -167,6 +178,7 @@ p {
.content {
display: grid;
gap: 24px;
min-width: 0;
}
.panel,
@@ -266,7 +278,7 @@ p {
padding: 14px 16px;
border-radius: 16px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.94);
background: var(--surface-strong);
}
.flash--success {
@@ -287,7 +299,7 @@ p {
margin-top: 22px;
padding: 18px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.74);
background: var(--surface-soft);
border: 1px solid rgba(132, 152, 190, 0.2);
}
@@ -366,7 +378,7 @@ p {
border-radius: var(--radius-md);
color: var(--muted);
text-align: center;
background: rgba(255, 255, 255, 0.58);
background: var(--surface-soft);
}
.task-card {
@@ -396,7 +408,7 @@ p {
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.08);
background: var(--nav-active-bg);
color: var(--primary-strong);
font-weight: 700;
}
@@ -408,7 +420,7 @@ p {
width: 28px;
height: 28px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
background: var(--surface-soft);
}
.status-badge {
@@ -537,7 +549,7 @@ p {
.icon-button {
width: 48px;
padding: 0;
background: rgba(255, 255, 255, 0.74);
background: var(--surface-soft);
border: 1px solid rgba(132, 152, 190, 0.24);
}
@@ -571,7 +583,7 @@ p {
padding: 14px 16px;
border: 1px solid rgba(132, 152, 190, 0.3);
border-radius: 16px;
background: rgba(255, 255, 255, 0.86);
background: var(--input-bg);
color: var(--text);
}
@@ -612,28 +624,176 @@ p {
justify-content: space-between;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.panel--toolbar > * {
min-width: 0;
}
.segmented {
display: inline-flex;
padding: 4px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.74);
background: var(--surface-soft);
min-width: 0;
}
.segmented a {
padding: 10px 16px;
border-radius: 14px;
color: var(--muted);
min-width: 0;
}
.segmented .is-active {
background: #fff;
background: var(--surface-strong);
color: var(--text);
}
.calendar-grid {
.calendar-toolbar-mobile {
display: grid;
gap: 14px;
max-width: 100%;
overflow: hidden;
}
.calendar-toolbar-mobile__header,
.calendar-toolbar-mobile__switch {
width: 100%;
}
.calendar-toolbar-mobile__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-width: 0;
}
.calendar-toolbar-mobile__header > div:first-child {
min-width: 0;
}
.calendar-toolbar-mobile__arrows {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.calendar-nav-button {
width: 44px;
min-width: 44px;
height: 44px;
border-radius: 14px;
}
.calendar-nav-button span {
font-size: 1.7rem;
line-height: 1;
}
.calendar-toolbar-mobile__switch a {
width: 100%;
min-width: 0;
}
.calendar-toolbar-mobile__switch {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.calendar-toolbar-desktop {
display: none;
}
.calendar-mobile-strip {
padding: 14px 16px;
max-width: 100%;
overflow: hidden;
}
.calendar-mobile-strip__scroller {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
scroll-snap-type: x proximity;
max-width: 100%;
}
.calendar-mobile-pill {
flex: 0 0 auto;
min-width: 84px;
padding: 12px 14px;
border-radius: 18px;
border: 1px solid var(--border);
background: var(--surface-strong);
display: grid;
gap: 3px;
scroll-snap-align: start;
box-shadow: 0 10px 20px rgba(52, 79, 131, 0.08);
}
.calendar-mobile-pill strong {
font-size: 1rem;
line-height: 1;
}
.calendar-mobile-pill small {
color: var(--muted);
font-size: 0.74rem;
white-space: nowrap;
}
.calendar-mobile-pill.is-active {
border-color: rgba(37, 99, 235, 0.16);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(52, 211, 153, 0.1));
}
.calendar-mobile-list {
display: grid;
gap: 14px;
max-width: 100%;
}
.calendar-mobile-day {
padding: 18px;
max-width: 100%;
overflow: hidden;
}
.calendar-mobile-day__header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
margin-bottom: 14px;
}
.calendar-mobile-day__header strong {
font-size: 1.12rem;
}
.calendar-mobile-day__header span {
color: var(--muted);
font-size: 0.82rem;
white-space: nowrap;
}
.calendar-mobile-day__tasks {
display: grid;
gap: 10px;
min-width: 0;
}
.calendar-mobile-day .calendar-task {
background: var(--surface-strong);
}
.calendar-grid {
display: none;
gap: 12px;
}
@@ -666,9 +826,10 @@ p {
display: grid;
gap: 4px;
min-width: 0;
max-width: 100%;
padding: 9px 10px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
background: var(--surface-soft);
overflow: hidden;
}
@@ -762,7 +923,7 @@ p {
}
.badge-card--earned {
background: rgba(37, 99, 235, 0.03);
background: var(--nav-active-bg);
}
.badge-card__icon {
@@ -793,7 +954,7 @@ p {
gap: 10px;
padding: 6px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.7);
background: var(--surface-soft);
border: 1px solid rgba(132, 152, 190, 0.18);
box-shadow: 0 12px 30px rgba(58, 82, 128, 0.1);
}
@@ -809,7 +970,7 @@ p {
}
.settings-tab.is-active {
background: #fff;
background: var(--surface-strong);
color: var(--primary-strong);
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.08);
}
@@ -830,7 +991,7 @@ p {
gap: 14px;
padding: 18px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.76);
background: var(--surface-soft);
border: 1px solid rgba(132, 152, 190, 0.22);
}
@@ -850,7 +1011,7 @@ p {
align-items: flex-start;
padding: 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.66);
background: var(--surface-soft);
}
.push-box__state.is-disabled {
@@ -876,16 +1037,15 @@ p {
.bottom-nav {
position: fixed;
left: 50%;
transform: translateX(-50%);
width: min(calc(100vw - 52px), 560px);
left: 8px;
right: 8px;
bottom: calc(10px + env(safe-area-inset-bottom));
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 8px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.88);
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
padding: 8px 8px;
border-radius: 22px;
background: var(--nav-bg);
backdrop-filter: blur(16px);
box-shadow: 0 24px 44px rgba(58, 82, 128, 0.2);
border: 1px solid rgba(132, 152, 190, 0.22);
@@ -897,19 +1057,29 @@ p {
display: grid;
justify-items: center;
gap: 5px;
padding: 10px 4px;
min-width: 0;
padding: 10px 4px 9px;
color: var(--muted);
border-radius: 16px;
text-align: center;
font-size: 0.69rem;
font-size: 0.66rem;
font-weight: 700;
line-height: 1.1;
line-height: 1.05;
}
.bottom-nav__item span {
display: block;
width: 100%;
min-height: 2.1em;
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
}
.bottom-nav__item.is-active,
.nav-link.is-active {
color: var(--primary-strong);
background: rgba(37, 99, 235, 0.1);
background: var(--nav-active-bg);
}
.nav-icon,
@@ -934,7 +1104,7 @@ p {
width: min(460px, calc(100vw - 24px));
padding: 24px;
border-radius: 28px;
background: #fff;
background: var(--surface-strong);
box-shadow: var(--shadow);
display: grid;
gap: 18px;
@@ -962,15 +1132,15 @@ p {
.fab-quick-task {
position: fixed;
right: 18px;
bottom: calc(96px + env(safe-area-inset-bottom));
right: max(16px, env(safe-area-inset-right));
bottom: calc(72px + var(--safe-bottom));
width: 62px;
height: 62px;
border: 0;
border: 2px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;
background: linear-gradient(135deg, #2563eb, #34d399);
color: #fff;
box-shadow: 0 24px 40px rgba(37, 99, 235, 0.28);
box-shadow: 0 24px 40px rgba(37, 99, 235, 0.34);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -984,7 +1154,128 @@ p {
height: 24px;
}
@media (max-width: 759px) {
.calendar-toolbar-mobile__header {
align-items: flex-start;
}
.calendar-toolbar-mobile__header h2 {
font-size: 1.5rem;
}
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg: #0b1220;
--bg-accent: #15233d;
--surface: rgba(17, 24, 39, 0.82);
--surface-strong: rgba(15, 23, 38, 0.96);
--surface-soft: rgba(20, 30, 49, 0.92);
--text: #e5eefc;
--muted: #9eb0cc;
--border: rgba(121, 146, 191, 0.2);
--primary: #5ea8ff;
--primary-strong: #d7e7ff;
--secondary: rgba(37, 99, 235, 0.16);
--shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
--body-radial-a: rgba(37, 99, 235, 0.28);
--body-radial-b: rgba(20, 184, 166, 0.14);
--body-linear-start: #0b1220;
--body-linear-mid: #0f172a;
--body-linear-end: #131f35;
--input-bg: rgba(16, 24, 38, 0.92);
--nav-bg: rgba(15, 23, 38, 0.9);
--nav-active-bg: rgba(59, 130, 246, 0.18);
}
.hero-card {
background:
linear-gradient(135deg, rgba(16, 24, 38, 0.98), rgba(20, 30, 49, 0.92)),
linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(20, 184, 166, 0.06));
}
.hero-stats div {
background: var(--surface-soft);
}
.icon-button {
border-color: rgba(121, 146, 191, 0.24);
}
.flash--success {
color: #7df1c7;
}
.flash--error {
color: #ff94b0;
}
.status-badge--open {
background: rgba(37, 99, 235, 0.16);
color: #8db7ff;
}
.status-badge--soon {
background: rgba(245, 158, 11, 0.18);
color: #ffd38a;
}
.status-badge--overdue {
background: rgba(225, 29, 72, 0.18);
color: #ff9cb2;
}
.status-badge--completed {
background: rgba(5, 150, 105, 0.18);
color: #8df0cb;
}
.button--ghost {
border-color: rgba(121, 146, 191, 0.24);
}
.score-row--leader {
background:
linear-gradient(135deg, rgba(18, 29, 49, 0.98), rgba(24, 39, 62, 0.94)),
linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(94, 168, 255, 0.08));
border-color: rgba(94, 168, 255, 0.2);
}
.score-row--leader .rank-badge,
.score-row--leader .earned-badge {
background: rgba(94, 168, 255, 0.16);
color: var(--primary-strong);
}
.score-row--leader .earned-badge__icon {
background: rgba(10, 18, 32, 0.56);
}
.score-row__points span,
.archive-row__right span {
color: var(--muted);
}
.sidebar {
background: rgba(10, 16, 28, 0.76);
border-right-color: rgba(121, 146, 191, 0.16);
}
.topbar-user {
border-color: rgba(121, 146, 191, 0.2);
}
}
@media (min-width: 760px) {
.calendar-toolbar-mobile {
display: none;
}
.calendar-toolbar-desktop {
display: flex;
}
.page-shell {
padding: 28px 28px 32px;
}
@@ -1005,8 +1296,15 @@ p {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.calendar-mobile-strip,
.calendar-mobile-list {
display: none;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
.calendar-grid__weekdays {
@@ -1026,6 +1324,34 @@ p {
background: transparent;
border: 0;
}
.calendar-day {
display: flex;
flex-direction: column;
min-height: 152px;
padding: 12px 10px;
}
.calendar-day__tasks {
gap: 6px;
max-height: 100%;
overflow: auto;
padding-right: 2px;
}
.calendar-task {
padding: 8px 9px;
border-radius: 12px;
}
.calendar-task__title {
font-size: 0.82rem;
line-height: 1.18;
}
.calendar-task__person {
font-size: 0.7rem;
}
}
@media (min-width: 1100px) {
@@ -1043,7 +1369,7 @@ p {
height: 100vh;
padding: 28px 20px;
border-right: 1px solid rgba(132, 152, 190, 0.2);
background: rgba(248, 251, 255, 0.72);
background: var(--surface-soft);
backdrop-filter: blur(12px);
}
@@ -1070,7 +1396,7 @@ p {
gap: 10px;
padding: 8px 10px 8px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
background: var(--nav-bg);
border: 1px solid rgba(132, 152, 190, 0.2);
}

10
app/templates/base.html
View File

@@ -3,7 +3,9 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#f5f7ff">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f5f7ff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#101826">
<meta name="color-scheme" content="light dark">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="{{ app_name }}">
@@ -12,7 +14,7 @@
<link rel="manifest" href="{{ url_for('main.manifest') }}">
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='images/favicon.svg') }}">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css', v=asset_version('css/style.css')) }}">
</head>
<body data-push-key="{{ config['VAPID_PUBLIC_KEY'] if current_user.is_authenticated else '' }}">
{% from "partials/macros.html" import nav_icon %}
@@ -89,7 +91,7 @@
{% if current_user.is_authenticated %}
<nav class="bottom-nav" aria-label="Mobile Navigation">
{% for endpoint, label, icon in nav_items %}
{% for endpoint, label, icon in mobile_nav_items %}
<a href="{{ url_for(endpoint) }}" class="bottom-nav__item {% if request.endpoint == endpoint %}is-active{% endif %}">
{{ nav_icon(icon) }}
<span>{{ label }}</span>
@@ -142,6 +144,6 @@
</form>
{% endif %}
<script src="{{ url_for('static', filename='js/app.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/app.js', v=asset_version('js/app.js')) }}" defer></script>
</body>
</html>

44
app/templates/settings/index.html
View File

@@ -166,48 +166,64 @@
<section class="panel">
<p class="eyebrow">Admin</p>
<h2>Schnellaufgabe-Punkte</h2>
<p class="muted">Diese Werte erscheinen direkt im Schnellaufgaben-Dialog hinter den Aufwand-Stufen.</p>
<h2>Schnellaufgabe-Aufwand</h2>
<p class="muted">Hier definierst du die sichtbaren Aufwand-Stufen und die dazugehörigen Punkte. Im Schnellaufgaben-Dialog wird nur die Bezeichnung angezeigt.</p>
<form method="post" action="{{ url_for('settings.update_quick_task_config') }}" class="badge-settings">
{{ quick_task_config_form.hidden_tag() }}
<div class="badge-setting-card">
<div>
<strong>Schnell</strong>
<strong>Slot 1</strong>
<p class="muted">Kleine Sache für zwischendurch.</p>
</div>
<div class="field">
{{ quick_task_config_form.fast_points.label }}
{{ quick_task_config_form.fast_points(value=quick_task_config['fast']['points']) }}
{{ quick_task_config_form.fast_label.label }}
{{ quick_task_config_form.fast_label() }}
</div>
<div class="field">
<label for="{{ quick_task_config_form.fast_points.id }}">Punkte</label>
{{ quick_task_config_form.fast_points() }}
</div>
</div>
<div class="badge-setting-card">
<div>
<strong>Normal</strong>
<strong>Slot 2</strong>
<p class="muted">Typische Alltagssache.</p>
</div>
<div class="field">
{{ quick_task_config_form.normal_points.label }}
{{ quick_task_config_form.normal_points(value=quick_task_config['normal']['points']) }}
{{ quick_task_config_form.normal_label.label }}
{{ quick_task_config_form.normal_label() }}
</div>
<div class="field">
<label for="{{ quick_task_config_form.normal_points.id }}">Punkte</label>
{{ quick_task_config_form.normal_points() }}
</div>
</div>
<div class="badge-setting-card">
<div>
<strong>Dauert etwas</strong>
<strong>Slot 3</strong>
<p class="muted">Braucht etwas mehr Zeit oder Konzentration.</p>
</div>
<div class="field">
{{ quick_task_config_form.medium_points.label }}
{{ quick_task_config_form.medium_points(value=quick_task_config['medium']['points']) }}
{{ quick_task_config_form.medium_label.label }}
{{ quick_task_config_form.medium_label() }}
</div>
<div class="field">
<label for="{{ quick_task_config_form.medium_points.id }}">Punkte</label>
{{ quick_task_config_form.medium_points() }}
</div>
</div>
<div class="badge-setting-card">
<div>
<strong>Aufwendig</strong>
<strong>Slot 4</strong>
<p class="muted">Spürbarer Aufwand mit mehr Punkten.</p>
</div>
<div class="field">
{{ quick_task_config_form.heavy_points.label }}
{{ quick_task_config_form.heavy_points(value=quick_task_config['heavy']['points']) }}
{{ quick_task_config_form.heavy_label.label }}
{{ quick_task_config_form.heavy_label() }}
</div>
<div class="field">
<label for="{{ quick_task_config_form.heavy_points.id }}">Punkte</label>
{{ quick_task_config_form.heavy_points() }}
</div>
</div>
<div class="field field--full">

77
app/templates/tasks/calendar.html
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 %}