PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-06-25 16:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Remove mobile filter chip bar from repertoire page

Browse Source 
The sticky chip bar added noise: users already see their active
filters highlighted in the accordion columns (with rep-entry--selected
styling and the active-count badge on each toggle). Removing chips
shifts focus back to the accordions, consistent with the expectation
that users return to the dropdowns to adjust filters.
This commit is contained in:
Pontoporeia
2026-06-24 11:20:35 +02:00
parent bb3bb80567
commit 654c884fed
2 changed files with 1 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
app/public/assets/css/repertoire.css
View File

@@ -29,77 +29,6 @@
height: 100%;
}
/* ---- Active filter chip bar ---- */
.rep-chip-bar {
display: none;
}
@media (max-width: 1025px) {
.rep-chip-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-2xs) var(--space-s);
border-bottom: 1px solid var(--border-secondary);
margin: 0;
position: sticky;
top: 0;
z-index: 10;
background: var(--bg-primary);
}
}
.rep-chip-bar__label {
font-family: var(--font-display);
font-size: var(--step--2);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
margin-right: var(--space-3xs);
white-space: nowrap;
}
.rep-chip {
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
padding: var(--space-3xs) var(--space-2xs);
background: var(--accent-muted);
border: 1px solid var(--accent-primary);
border-radius: 99px;
font-family: var(--font-body);
font-size: var(--step--2);
color: var(--accent-primary);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.rep-chip:hover {
background: var(--accent-primary);
color: var(--accent-foreground);
}
.rep-chip__dim {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.75em;
color: var(--accent-secondary);
}
.rep-chip:hover .rep-chip__dim {
color: inherit;
opacity: 0.8;
}
.rep-chip__remove {
font-size: 1.1em;
line-height: 1;
font-weight: 600;
}
/* ---- Accordion: visible only on mobile (≤ 640px) ---- */
/* Desktop: heading-text visible, toggle hidden */
@@ -157,7 +86,7 @@
padding: 0;
}
/* ---- Responsive (≤ 1025px): accordion mode, chip bar, students as results ---- */
/* ---- Responsive (≤ 1025px): accordion mode, students as results ---- */
@media (max-width: 1025px) {
.repertoire-index {
display: flex;