jacobh2/F-r-ldraledigplannerare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redraw the calendar as an almanac: gridless cells, typed bands

Browse Source 
Day cells lose their borders and fills; red days, klämdagar and
Saturdays are told apart by the numeral's ink with a 12px R/K mark,
today is a filled circle, overrides and exclusions mark the numeral.
Bands carry their funding type by fill, ink and hatching and their
owner by a left cap. The preset rail becomes a chip row, the legend a
help popover, the period popover's three delete buttons fold behind
one "Ta bort…", and solo users pick a type directly in the day modal.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XBRLomdLK9jF7wU7a8AA6H
This commit is contained in:
Jacob Hagstedt
2026-09-19 19:02:02 +02:00
parent d14f86478a
commit dbef997da4
28 changed files with 1486 additions and 1109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/responsive.css
+24 -37
View File
@@ -147,6 +147,13 @@
min-width: 0;
}
/* The footer stacks bottom-up here (column-reverse above), so the
* revealed delete scopes sort FIRST to land at the bottom, directly under
* the "Ta bort…" button that opened them. */
.period-popover__delete-group {
order: -10;
}
/* Lists */
.dashboard__break-item {
flex-direction: column;
@@ -160,56 +167,36 @@
min-height: 200px;
}
/* Calendar responsiveness */
.calendar__grid {
font-size: var(--fs-sm);
/* Calendar — cells are ~48px wide at 390px, so the padding tightens and
* the numeral keeps its 24px box flush to the top-left. */
.calendar__weekday {
padding: 0 var(--sp-1) var(--sp-2);
}
.calendar__weekday,
.calendar-day {
padding: var(--sp-2);
min-height: 64px;
padding: var(--sp-1) var(--sp-1) calc(var(--sp-1) + var(--band-reserved-height, 0px));
}
.calendar-day__number {
font-size: var(--fs-sm);
.calendar__week-number {
padding-top: var(--sp-1);
}
/* At 390px the month/year selects plus the two prev/next icon buttons are
* tight against the header's title size; one step down keeps the whole
* row inside the viewport. */
.calendar__month-select,
.calendar__year-select {
font-size: var(--fs-lg);
.calendar-band__label {
padding: 0 var(--sp-1);
}
/* The fixed-width preset rail sits beside the month grid on desktop; on
* mobile the layout stacks and the rail goes full-width below the grid.
* `align-items: stretch` overrides the base rule's `flex-start` — without
* it a column-direction flex item is sized by its own shrink-to-fit
* content width, which is what once let `.calendar__main` grow past the
* viewport. */
.calendar__layout {
flex-direction: column;
align-items: stretch;
}
.preset-rail {
width: 100%;
}
/* A horizontally-scrollable row of presets, not a stack — keeps the rail
* from pushing the month grid far down the page on a short viewport. */
.preset-rail__buttons {
flex-direction: row;
/* The preset chips scroll sideways in one row instead of wrapping, so the
* grid is never pushed down the page. */
.preset-chips__row {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: var(--sp-1);
}
.preset-rail__button {
flex: 0 0 auto;
min-width: 65vw;
scroll-snap-align: start;
.preset-chips__row::-webkit-scrollbar {
display: none;
}
/* Footer — same side gutter as .layout__main at this width. */