fix(woche): Wochenansicht aus dem schmalen Inhaltsrahmen befreien
Der Fehler fiel erst im aufgenommenen Bild auf: Bei sieben Spalten plus Aufgabenliste war der Sonntag abgeschnitten — der Inhaltsrahmen von 64rem ist für eine Wochenansicht zu eng. Genau diese eine Seite bricht jetzt aus und nimmt bis zu 100rem, mittig und mit demselben Seitenabstand wie überall. Die anderen Seiten bleiben bei ihrer Lesebreite; eine Aufgabenliste über 100rem zu ziehen wäre keine Verbesserung. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Florian Wilde
co-authored by
Claude Opus 5
Claude Opus 5
parent
0974695d93
commit
0b967d4a33
@@ -106,100 +106,108 @@ export default async function WocheSeite({
|
|||||||
const sonntag = raster.spalten[6]?.tagesBeginn ?? zeitpunkt
|
const sonntag = raster.spalten[6]?.tagesBeginn ?? zeitpunkt
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-6">
|
/*
|
||||||
<header className="flex flex-wrap items-start justify-between gap-4">
|
Die Wochenansicht braucht mehr Breite als der Inhaltsrahmen von 64rem
|
||||||
<div>
|
hergibt – bei sieben Spalten plus Aufgabenliste wäre sonst der Sonntag
|
||||||
<h1 className="flex items-center gap-2 text-2xl font-semibold tracking-tight">
|
abgeschnitten. Deshalb bricht genau diese Seite aus und nimmt bis zu
|
||||||
<CalendarRange className="size-6" aria-hidden />
|
100rem, mittig und mit demselben Seitenabstand wie überall.
|
||||||
Woche
|
*/
|
||||||
</h1>
|
<div className="relative left-1/2 w-screen max-w-[100rem] -translate-x-1/2 px-4 sm:px-6">
|
||||||
<p className="text-gedaempft-vordergrund mt-1 text-sm">
|
<div className="flex flex-col gap-6">
|
||||||
{alsDatum(montag)} bis {alsDatum(sonntag)}
|
<header className="flex flex-wrap items-start justify-between gap-4">
|
||||||
{konto ? ` · schreibt nach ${konto.anzeigename}` : ''}
|
<div>
|
||||||
</p>
|
<h1 className="flex items-center gap-2 text-2xl font-semibold tracking-tight">
|
||||||
</div>
|
<CalendarRange className="size-6" aria-hidden />
|
||||||
|
Woche
|
||||||
|
</h1>
|
||||||
|
<p className="text-gedaempft-vordergrund mt-1 text-sm">
|
||||||
|
{alsDatum(montag)} bis {alsDatum(sonntag)}
|
||||||
|
{konto ? ` · schreibt nach ${konto.anzeigename}` : ''}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<nav className="flex items-center gap-2" aria-label="Woche wechseln">
|
<nav className="flex items-center gap-2" aria-label="Woche wechseln">
|
||||||
<Link
|
|
||||||
href={`/woche?versatz=${sichereWochen - 1}`}
|
|
||||||
className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
|
|
||||||
>
|
|
||||||
Zurück
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="/woche"
|
|
||||||
className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
|
|
||||||
>
|
|
||||||
Diese Woche
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href={`/woche?versatz=${sichereWochen + 1}`}
|
|
||||||
className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
|
|
||||||
>
|
|
||||||
Weiter
|
|
||||||
</Link>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{!konto && (
|
|
||||||
<Card>
|
|
||||||
<CardInhalt className="py-4 text-sm">
|
|
||||||
Noch kein Kalender verbunden. Zeitblöcke landen erst dann im Kalender —{' '}
|
|
||||||
<Link
|
<Link
|
||||||
href="/kalenderkonten"
|
href={`/woche?versatz=${sichereWochen - 1}`}
|
||||||
className="text-betont underline underline-offset-4"
|
className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
|
||||||
>
|
>
|
||||||
jetzt verbinden
|
Zurück
|
||||||
</Link>
|
</Link>
|
||||||
.
|
<Link
|
||||||
</CardInhalt>
|
href="/woche"
|
||||||
</Card>
|
className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
|
||||||
)}
|
>
|
||||||
|
Diese Woche
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href={`/woche?versatz=${sichereWochen + 1}`}
|
||||||
|
className="border-rand hover:bg-gedaempft rounded-md border px-3 py-1.5 text-sm"
|
||||||
|
>
|
||||||
|
Weiter
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
<Wochenraster
|
{!konto && (
|
||||||
spalten={spalten}
|
<Card>
|
||||||
zeilen={raster.zeilen}
|
<CardInhalt className="py-4 text-sm">
|
||||||
vonMinute={raster.vonMinute}
|
Noch kein Kalender verbunden. Zeitblöcke landen erst dann im Kalender —{' '}
|
||||||
bisMinute={raster.bisMinute}
|
<Link
|
||||||
kalenderkontoId={konto?.id ?? null}
|
href="/kalenderkonten"
|
||||||
zeitbloecke={daten.zeitbloecke.map((z) => ({
|
className="text-betont underline underline-offset-4"
|
||||||
id: z.id,
|
>
|
||||||
beginnMs: z.beginn.getTime(),
|
jetzt verbinden
|
||||||
endeMs: z.ende.getTime(),
|
</Link>
|
||||||
titel: z.titel,
|
.
|
||||||
bereichFarbe: z.bereichFarbe,
|
</CardInhalt>
|
||||||
kalenderName: z.kalenderName,
|
</Card>
|
||||||
letzterFehler: z.letzterFehler,
|
)}
|
||||||
offen: z.offen,
|
|
||||||
}))}
|
|
||||||
termine={daten.termine.map((t) => ({
|
|
||||||
id: t.id,
|
|
||||||
beginnMs: t.beginn.getTime(),
|
|
||||||
endeMs: t.ende.getTime(),
|
|
||||||
betreff: t.betreff,
|
|
||||||
ganztaegig: t.ganztaegig,
|
|
||||||
frei: t.zeigtAls === 'FREI',
|
|
||||||
kalenderName: t.kalenderName,
|
|
||||||
}))}
|
|
||||||
aufgaben={aufgaben.map((a) => ({
|
|
||||||
id: a.id,
|
|
||||||
titel: a.titel,
|
|
||||||
aufwandMinuten: a.aufwandMinuten,
|
|
||||||
bereichName: a.bereich?.name ?? null,
|
|
||||||
bereichFarbe: a.bereich?.farbe ?? null,
|
|
||||||
faelligText: a.faelligAm
|
|
||||||
? faelligkeitText(faelligkeitEinordnen(a.faelligAm, heute))
|
|
||||||
: null,
|
|
||||||
ueberfaellig: istUeberfaellig(a.faelligAm, a.status, heute),
|
|
||||||
bereitsGeplant: a._count.zeitbloecke,
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p className="text-gedaempft-vordergrund text-xs">
|
<Wochenraster
|
||||||
Aufgabe aus der linken Spalte in ein Zeitfenster ziehen, um sie einzuplanen. Ein
|
spalten={spalten}
|
||||||
Zeitblock lässt sich am Griff verschieben; das Kreuz plant ihn wieder aus. Graue
|
zeilen={raster.zeilen}
|
||||||
Balken sind Termine aus dem Kalender — sie lassen sich hier nicht verschieben.
|
vonMinute={raster.vonMinute}
|
||||||
</p>
|
bisMinute={raster.bisMinute}
|
||||||
|
kalenderkontoId={konto?.id ?? null}
|
||||||
|
zeitbloecke={daten.zeitbloecke.map((z) => ({
|
||||||
|
id: z.id,
|
||||||
|
beginnMs: z.beginn.getTime(),
|
||||||
|
endeMs: z.ende.getTime(),
|
||||||
|
titel: z.titel,
|
||||||
|
bereichFarbe: z.bereichFarbe,
|
||||||
|
kalenderName: z.kalenderName,
|
||||||
|
letzterFehler: z.letzterFehler,
|
||||||
|
offen: z.offen,
|
||||||
|
}))}
|
||||||
|
termine={daten.termine.map((t) => ({
|
||||||
|
id: t.id,
|
||||||
|
beginnMs: t.beginn.getTime(),
|
||||||
|
endeMs: t.ende.getTime(),
|
||||||
|
betreff: t.betreff,
|
||||||
|
ganztaegig: t.ganztaegig,
|
||||||
|
frei: t.zeigtAls === 'FREI',
|
||||||
|
kalenderName: t.kalenderName,
|
||||||
|
}))}
|
||||||
|
aufgaben={aufgaben.map((a) => ({
|
||||||
|
id: a.id,
|
||||||
|
titel: a.titel,
|
||||||
|
aufwandMinuten: a.aufwandMinuten,
|
||||||
|
bereichName: a.bereich?.name ?? null,
|
||||||
|
bereichFarbe: a.bereich?.farbe ?? null,
|
||||||
|
faelligText: a.faelligAm
|
||||||
|
? faelligkeitText(faelligkeitEinordnen(a.faelligAm, heute))
|
||||||
|
: null,
|
||||||
|
ueberfaellig: istUeberfaellig(a.faelligAm, a.status, heute),
|
||||||
|
bereitsGeplant: a._count.zeitbloecke,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p className="text-gedaempft-vordergrund text-xs">
|
||||||
|
Aufgabe aus der linken Spalte in ein Zeitfenster ziehen, um sie einzuplanen. Ein
|
||||||
|
Zeitblock lässt sich am Griff verschieben; das Kreuz plant ihn wieder aus. Graue
|
||||||
|
Balken sind Termine aus dem Kalender — sie lassen sich hier nicht verschieben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user