mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 08:09:18 +02:00
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:
@@ -29,77 +29,6 @@
|
|||||||
height: 100%;
|
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) ---- */
|
/* ---- Accordion: visible only on mobile (≤ 640px) ---- */
|
||||||
|
|
||||||
/* Desktop: heading-text visible, toggle hidden */
|
/* Desktop: heading-text visible, toggle hidden */
|
||||||
@@ -157,7 +86,7 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- Responsive (≤ 1025px): accordion mode, chip bar, students as results ---- */
|
/* ---- Responsive (≤ 1025px): accordion mode, students as results ---- */
|
||||||
@media (max-width: 1025px) {
|
@media (max-width: 1025px) {
|
||||||
.repertoire-index {
|
.repertoire-index {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -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">
|
<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 :</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
|
<?php
|
||||||
// Render filter columns in the correct left-to-right order.
|
// Render filter columns in the correct left-to-right order.
|
||||||
// Students column (non-filter) is inserted between keywords and AP/or/fi/years.
|
// Students column (non-filter) is inserted between keywords and AP/or/fi/years.
|
||||||
|
|||||||
Reference in New Issue
Block a user