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/pages.css
+32
View File
@@ -374,6 +374,38 @@ ul.cal {
.cal .calbody.other-month, .cal .calbody.nwday:not(.other-month) { background-color: var(--md-sys-color-surface-container-low); }
.cal .calbody.today .day-value { color: var(--md-sys-color-on-primary); }
/* Month bar: ‹ [month] [year] › then Apply / Clear / Save. The arrows and the selects live
in separate containers, so those dissolve into one flex row. */
body.controller-calendars #query_form_with_buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 16px; } /* p.buttons had it */
body.controller-calendars #query_form_content { flex: 1 1 100%; }
body.controller-calendars :is(#query_form_with_buttons > .pagination, #query_form_with_buttons > .pagination ul, #query_form_with_buttons > p.buttons) { display: contents; }
body.controller-calendars p.buttons label { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; }
body.controller-calendars .pagination li { margin: 0; }
body.controller-calendars .pagination li.next { order: 1; }
body.controller-calendars p.buttons a { order: 2; }
/* Previous / next month: icon buttons; the month name stays as the accessible text */
body.controller-calendars .pagination li a {
display: block;
inline-size: 40px;
block-size: 40px;
padding: 0;
border: 0;
border-radius: var(--md-sys-shape-corner-full);
font-size: 0;
color: var(--md-sys-color-on-surface-variant);
}
body.controller-calendars .pagination li a:hover { background-image: var(--nm-state-hover); }
body.controller-calendars .pagination li a::before {
content: '';
display: block;
block-size: 100%;
background-color: currentColor;
mask: url(../images/chevron-left-idnt.svg) center / 24px no-repeat;
}
body.controller-calendars .pagination li.next a::before,
html[dir="rtl"] body.controller-calendars .pagination li.previous a::before { transform: scaleX(-1); }
html[dir="rtl"] body.controller-calendars .pagination li.next a::before { transform: none; }
/***** Gantt (gantt.css loads after the theme, hence the `html` prefix) *****/
/*
* Geometry is set inline by Redmine: rows every 20px, each with a 16px text line whose top is