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/tables.css
+34 -1
View File
@@ -149,7 +149,40 @@ a.issue.closed, a.issue.closed:link, a.issue.closed:visited { color: var(--md-sy
#filters-table .filter .field { display: flex; align-items: center; gap: 8px; min-block-size: 40px; }
#filters-table .filter .field input[type="checkbox"] { margin: 0; }
#filters-table .filter .values { display: flex; align-items: center; min-block-size: 40px; flex-wrap: wrap; gap: 4px 8px; }
.add-filter { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* "Add filter" is an M3 tonal button, not one more outlined field. A select has no
placeholder, so the label lies over it in the same grid cell and lets taps through.
A zero width with a 100% minimum keeps the longest option from widening the button. */
.add-filter { display: grid; justify-content: end; margin-block-start: 4px; }
.add-filter > * { grid-area: 1 / 1; }
.add-filter select {
inline-size: 0;
min-inline-size: 100%;
block-size: 40px;
border: 0;
border-radius: var(--md-sys-shape-corner-full);
background: var(--md-sys-color-secondary-container); /* drops the dropdown arrow too */
cursor: pointer;
}
.add-filter select:hover { background-image: var(--nm-state-hover); }
.add-filter label {
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding-inline: 16px 24px;
pointer-events: none;
color: var(--md-sys-color-on-secondary-container);
font: var(--md-sys-typescale-label-large);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.add-filter label::before {
content: '';
inline-size: 18px;
block-size: 18px;
background-color: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z'/%3E%3C/svg%3E") center / 18px no-repeat;
}
/* Core fixes the operator at 120px, too narrow for "has never been" with M3 field padding */
#filters-table .filter .operator select { inline-size: 180px; }
/* All value fields share one width so the filter rows form a clean second column.