Remove mobile filter chip bar from repertoire page

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

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;

View File

@@ -107,49 +107,9 @@ foreach ($filterColumns as $col) {
));
}
// ── Active filter chips ─────────────────────────────────────────────────────
// Build a flat list of {dim, label, value, url} for every active filter entry.
$activeChips = [];
$dimLabels = [
'years' => 'Année',
'ap' => 'AP',
'or' => 'Orientation',
'fi' => 'Finalité',
'kw' => 'Mot-clé',
];
foreach (['years', 'ap', 'or', 'fi', 'kw'] as $dim) {
foreach ($activeSets[$dim] as $val) {
$activeChips[] = [
'dim' => $dim,
'label' => $dimLabels[$dim],
'value' => $val,
'url' => repToggleUrl($activeSets, $dim, $val),
];
}
}
?>
<div id="repertoire-index" class="repertoire-index">
<?php if ($anyActive): ?>
<!-- Active filter chips bar -->
<div class="rep-chip-bar" role="status" aria-label="Filtres actifs">
<span class="rep-chip-bar__label">Filtres&nbsp;:</span>
<?php foreach ($activeChips as $chip): ?>
<button type="button" class="rep-chip"
hx-get="<?= htmlspecialchars($chip['url']) ?>"
hx-target="#repertoire-index"
hx-swap="outerHTML"
hx-push-url="true"
hx-indicator="#rep-indicator"
aria-label="Retirer le filtre <?= htmlspecialchars($chip['label']) ?> : <?= htmlspecialchars($chip['value']) ?>">
<span class="rep-chip__dim"><?= htmlspecialchars($chip['label']) ?></span>
<span class="rep-chip__value"><?= htmlspecialchars($chip['value']) ?></span>
<span class="rep-chip__remove" aria-hidden="true">×</span>
</button>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php
// Render filter columns in the correct left-to-right order.
// Students column (non-filter) is inserted between keywords and AP/or/fi/years.