noNameWEB/redmine-theme-tonalmine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: calendar month bar and mobile agenda layout

Browse Source 
The month and year selects sit between previous/next icon buttons on one
row, with Apply / Clear / Save after them, on all widths. On mobile the
calendar becomes an agenda: date column beside the issues, days of
neighbouring months hidden, empty days collapsed to one line, lighter
week headers and a highlighted today row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-10-05 13:06:00 +02:00
co-authored by Claude Opus 5.5
parent d687084cf0
commit 77040e24a8
2 changed files with 85 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tonalmine/stylesheets/mobile.css
+53 -1
View File
@@ -141,7 +141,59 @@
html .search-magnifier--flyout { inset-inline-start: 28px; }
html .flyout-menu .flyout-menu__avatar { padding-inline-start: 16px; }
html .cal .week-number { background-color: var(--md-sys-color-surface-container); border-color: var(--md-sys-color-outline-variant); }
/* Calendar month bar: the month select fills the row, Apply / Clear / Save wrap below */
html body.controller-calendars p.buttons select#month { flex: 1 1 0; min-inline-size: 0; }
html body.controller-calendars #query_form_with_buttons::after { content: ''; order: 2; flex-basis: 100%; margin-block: -4px; } /* line break */
html body.controller-calendars p.buttons a { order: 3; }
/* Calendar as an agenda: weekday column on the left, issues on the right. Days of the
neighbouring months are dropped; empty days shrink to one line. */
html .cal .week-number {
padding-block: 8px;
padding-inline: 16px;
border: 0;
border-block-start: 1px solid var(--md-sys-color-outline-variant);
background-color: var(--md-sys-color-surface-container);
color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-label-medium);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}
html .cal .week-number:first-child { border-block-start: 0; }
html .cal .calbody.other-month { display: none; }
html .cal .calbody {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
column-gap: 8px;
align-items: start;
min-block-size: 0;
padding-block: 8px;
padding-inline: 8px;
border: 0;
border-block-start: 1px solid var(--md-sys-color-outline-variant);
}
/* ponytail: the date spans 50 implicit rows (empty ones collapse to 0); a day with more
issues lets the extra ones fall under the date */
html .cal .calbody p.day-num {
grid-row: 1 / span 50;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
text-align: center;
}
html .cal .calbody .day-value { inline-size: 32px; block-size: 32px; font: var(--md-sys-typescale-title-medium); }
html .cal .calbody .abbr-day { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-small); }
html .cal .calbody div.issue, html .cal .calbody > .icon { grid-column: 2; margin-block: 0 4px; }
/* An empty day is one short line: date and weekday side by side, greyed out */
html .cal .calbody:not(:has(div.issue, > .icon)) { padding-block: 4px; }
html .cal .calbody:not(:has(div.issue, > .icon)) p.day-num { flex-direction: row; gap: 8px; color: var(--md-sys-color-on-surface-variant); }
html .cal .calbody:not(:has(div.issue, > .icon)) .day-value { flex: none; inline-size: 40px; block-size: 24px; font: var(--md-sys-typescale-label-large); }
/* Today: tinted row with a primary stripe on its leading edge */
html .cal .calbody.today {
border-inline-start: 4px solid var(--md-sys-color-primary);
padding-inline-start: 4px;
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface));
}
/* Page actions become M3 outlined buttons, like Apply / Clear. The forum topic wraps its
actions in a quote-reply controller, so core's #content > .contextual misses them. */
html #content > [data-controller="quote-reply"] > .contextual {