jappel/leistungsbilanz-ts
1
0
Fork 1
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Compact circuit list column headers with filter icons

Browse source 
- Replace the "Filtern" text buttons with a funnel icon next to the column
  label; an active filter is highlighted and shows its value count.
- Header labels no longer break inside words (e.g. "Bemerkung"); hyphens
  are non-breaking and a trailing unit moves to its own line, so all
  headers share one height.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Grovy311 2026-09-26 10:30:15 +02:00
parent e394ff93f4
commit d95f0bf5c0
3 changed files with 74 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/app/globals.css
View file

@ -892,24 +892,37 @@ a.kpi:hover {
white-space: nowrap;
}
/* One header row: label (sort) on the left, filter icon on the right. */
.tree-grid .header-cell {
display: flex;
flex-direction: column;
align-items: stretch;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 0.2rem;
min-width: 0;
}
.tree-grid .header-filter-btn {
display: block;
width: 100%;
border: 1px solid var(--panel-border-strong);
background: var(--panel-bg);
color: var(--text-strong);
display: inline-flex;
flex: none;
align-items: center;
gap: 0.15rem;
border: 1px solid transparent;
background: transparent;
color: var(--text-faint);
border-radius: 3px;
font-size: 0.75rem;
padding: 0.15rem 0.35rem;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
padding: 0.15rem 0.2rem;
white-space: nowrap;
cursor: pointer;
}
.tree-grid .header-filter-btn:hover,
.tree-grid .header-filter-btn:focus-visible {
border-color: var(--panel-border-strong);
color: var(--text-strong);
}
.tree-grid .header-sort-btn {
@ -927,7 +940,10 @@ a.kpi:hover {
font-size: 0.78rem;
font-weight: 600;
line-height: 1.15;
overflow-wrap: anywhere;
/* Break only between words; never inside a word such as "Bemerkung". */
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
white-space: normal;
text-align: left;
cursor: pointer;
@ -967,6 +983,18 @@ a.kpi:hover {
font-size: 0.78rem;
}
.tree-grid .header-cell .header-sort-btn {
flex: 1 1 auto;
width: auto;
align-items: flex-start;
}
.tree-grid .header-unit {
display: block;
font-weight: 500;
color: var(--text-faint);
}
.tree-grid .header-sort-btn:hover span:first-child,
.tree-grid .header-sort-btn:focus-visible span:first-child {
text-decoration: underline;
@ -983,6 +1011,11 @@ a.kpi:hover {
background: var(--accent-blue-soft-bg);
}
.tree-grid .header-filter-count {
min-width: 0.7rem;
text-align: center;
}
.tree-grid .header-filter-menu {
position: absolute;
z-index: 7;