games: collapse non-featured game chips behind +N more; slide-only flyout animation
All checks were successful
Deploy production / deploy (push) Successful in 1m9s
All checks were successful
Deploy production / deploy (push) Successful in 1m9s
This commit is contained in:
@@ -35,7 +35,11 @@
|
|||||||
let expanded = $state<Record<string, boolean>>({});
|
let expanded = $state<Record<string, boolean>>({});
|
||||||
const visibleChildren = (group: Item) => {
|
const visibleChildren = (group: Item) => {
|
||||||
const all = group.children ?? [];
|
const all = group.children ?? [];
|
||||||
return expanded[group.name] ? all : all.filter((c) => c.featured ?? true);
|
return expanded[group.name]
|
||||||
|
? all
|
||||||
|
: all.some((c) => c.featured)
|
||||||
|
? all.filter((c) => c.featured)
|
||||||
|
: all;
|
||||||
};
|
};
|
||||||
const hiddenCount = (group: Item) =>
|
const hiddenCount = (group: Item) =>
|
||||||
(group.children?.length ?? 0) - visibleChildren(group).length;
|
(group.children?.length ?? 0) - visibleChildren(group).length;
|
||||||
|
|||||||
@@ -693,8 +693,8 @@
|
|||||||
--flyout-from: 4px;
|
--flyout-from: 4px;
|
||||||
}
|
}
|
||||||
@keyframes flyout-in {
|
@keyframes flyout-in {
|
||||||
|
/* Slide only: an opacity fade here left the flyout half see-through after hovering. */
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(var(--flyout-from));
|
transform: translateX(var(--flyout-from));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -69,7 +69,9 @@
|
|||||||
const tileChildren = (t: Group) =>
|
const tileChildren = (t: Group) =>
|
||||||
filtering || expandedGroups[t.name]
|
filtering || expandedGroups[t.name]
|
||||||
? (t.children ?? [])
|
? (t.children ?? [])
|
||||||
: (t.children ?? []).filter((c) => c.featured ?? true);
|
: (t.children ?? []).some((c) => c.featured)
|
||||||
|
? (t.children ?? []).filter((c) => c.featured)
|
||||||
|
: (t.children ?? []);
|
||||||
const hiddenChildren = (t: Group) => (t.children?.length ?? 0) - tileChildren(t).length;
|
const hiddenChildren = (t: Group) => (t.children?.length ?? 0) - tileChildren(t).length;
|
||||||
// The links filter (f) also narrows the trackers; a group stays if it or a chip matches.
|
// The links filter (f) also narrows the trackers; a group stays if it or a chip matches.
|
||||||
const shownTrackers = $derived.by(() => {
|
const shownTrackers = $derived.by(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user