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

fix: full-width mobile query filters and tonal "Add filter" button

Browse Source 
On mobile the filter operator and value fields span the row instead of
fixed desktop widths, and empty value rows are hidden. "Add filter"
becomes an M3 tonal button on all widths so it stands out from the
outlined filter fields.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-10-05 12:53:02 +02:00
co-authored by Claude Opus 5.5
parent 906153014b
commit d687084cf0
2 changed files with 45 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tonalmine/stylesheets/mobile.css
+11
View File
@@ -179,6 +179,17 @@
html form .attributes select:has(+ .icon-only) { inline-size: calc(100% - 36px); }
html .tabular input[type="radio"] { inline-size: auto; }
/* Query filters: operator and values run full width under the checkbox label instead of
the desktop's fixed 180px / 260px columns. A flex-basis of 0 overrides those widths, so
"between" fields split the row and a multi-select toggle keeps its spot after the field. */
html #filters-table .filter { row-gap: 8px; margin-block-end: 8px; }
html #filters-table .filter :is(.operator, .values) { flex: 1 1 100%; }
html #filters-table .filter .values:not(:has(> span:not([style*="none"]))) { display: none; } /* e.g. status "open" */
html #filters-table .filter .operator select { inline-size: 100%; }
html #filters-table .filter .values > span { display: flex; flex: 1 1 0; align-items: center; gap: 8px; }
html #filters-table .filter .values .value:not([size="3"]) { flex: 1 1 0; min-inline-size: 0; }
html .add-filter { justify-content: stretch; margin-block-start: 16px; } /* full-width button */
/* Wiki toolbar: buttons wrap instead of being cut off */
html #content .jstTabs.tabs { clear: both; block-size: auto; overflow: visible; } /* below the floated field label */
html #content .jstTabs.tabs ul { position: static; display: flex; flex-wrap: wrap; inline-size: auto; min-inline-size: 0; }