HASH a591505ce2ca
DATE 2026-05-03
SUBJECT web: dedupe CM filter band, standardize class dropdown
FILES 5 CHANGED
HASH a591505ce2ca
DATE 2026-05-03
SUBJECT web: dedupe CM filter band,
standardize class dropdown
FILES 5 CHANGED
┌─ .../components/PlayerProfile/ClassFilterSelect/ClassFilterSelect.astro ───┐
│ diff --git a/web/src/components/PlayerProfile/ClassFilterSelect/ClassFilterSelect. │
│ astro b/web/src/components/PlayerProfile/ClassFilterSelect/ClassFilterSelect.astro │
│ index 37f846a..0e1b749 100644 │
│ --- a/web/src/components/PlayerProfile/ClassFilterSelect/ClassFilterSelect.astro │
│ +++ b/web/src/components/PlayerProfile/ClassFilterSelect/ClassFilterSelect.astro │
│ @@ -1,5 +1,6 @@ │
│ --- │
│ -import "./ClassFilterSelect.scss"; │
│ +// Reuses the global `.filter-group` styling (see _utilities.scss) so this │
│ +// dropdown matches the season/region selects in the same filter band. │
│ │
│ interface Props { │
│ currentClass?: string; │
│ @@ -23,8 +24,8 @@ const classes = [ │
│ ]; │
│ --- │
│ │
│ -<div class="class-filter"> │
│ - <label for="class-filter">Class:</label> │
│ +<div class="filter-group"> │
│ + <label for="class-filter">Class</label> │
│ <select id="class-filter" name="class"> │
│ { │
│ classes.map((cls) => ( │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ...elect/ClassFilterSelect.astro ───┐
│ diff --git a/web/src/components/PlayerProfil │
│ e/ClassFilterSelect/ClassFilterSelect.astro │
│ b/web/src/components/PlayerProfile/ClassFilt │
│ erSelect/ClassFilterSelect.astro │
│ index 37f846a..0e1b749 100644 │
│ --- a/web/src/components/PlayerProfile/Class │
│ FilterSelect/ClassFilterSelect.astro │
│ +++ b/web/src/components/PlayerProfile/Class │
│ FilterSelect/ClassFilterSelect.astro │
│ @@ -1,5 +1,6 @@ │
│ --- │
│ -import "./ClassFilterSelect.scss"; │
│ +// Reuses the global `.filter-group` stylin │
│ g (see _utilities.scss) so this │
│ +// dropdown matches the season/region selec │
│ ts in the same filter band. │
│ │
│ interface Props { │
│ currentClass?: string; │
│ @@ -23,8 +24,8 @@ const classes = [ │
│ ]; │
│ --- │
│ │
│ -<div class="class-filter"> │
│ - <label for="class-filter">Class:</label> │
│ +<div class="filter-group"> │
│ + <label for="class-filter">Class</label> │
│ <select id="class-filter" name="class"> │
│ { │
│ classes.map((cls) => ( │
└──────────────────────────────────────────────┘
┌─ ...c/components/PlayerProfile/ClassFilterSelect/ClassFilterSelect.scss ───┐
│ diff --git a/web/src/components/PlayerProfile/ClassFilterSelect/ClassFilterSelect. │
│ scss b/web/src/components/PlayerProfile/ClassFilterSelect/ClassFilterSelect.scss │
│ deleted file mode 100644 │
│ index cdd00f7..0000000 │
│ --- a/web/src/components/PlayerProfile/ClassFilterSelect/ClassFilterSelect.scss │
│ +++ /dev/null │
│ @@ -1,49 +0,0 @@ │
│ -@use "../../../styles/core/tokens" as *; │
│ - │
│ -.class-filter { │
│ - display: flex; │
│ - align-items: center; │
│ - gap: $spacing-sm; │
│ - │
│ - label { │
│ - font-weight: $font-weight-semibold; │
│ - color: var(--text-secondary); │
│ - white-space: nowrap; │
│ - } │
│ - │
│ - select { │
│ - padding: $spacing-sm $spacing-md; │
│ - background: var(--bg-primary); │
│ - color: var(--text-primary); │
│ - border: 1px solid var(--border-color); │
│ - border-radius: $radius-sm; │
│ - font-size: $font-size-md; │
│ - cursor: pointer; │
│ - min-width: 180px; │
│ - transition: │
│ - border-color 0.2s ease, │
│ - box-shadow 0.2s ease; │
│ - │
│ - &:hover { │
│ - border-color: var(--highlight-color); │
│ - } │
│ - │
│ - &:focus { │
│ - outline: none; │
│ - border-color: var(--highlight-color); │
│ - box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1); │
│ - } │
│ - } │
│ -} │
│ - │
│ -@media (max-width: 768px) { │
│ - .class-filter { │
│ - flex-direction: column; │
│ - align-items: stretch; │
│ - gap: $spacing-xs; │
│ - │
│ - select { │
│ - width: 100%; │
│ - } │
│ - } │
│ -} │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ...Select/ClassFilterSelect.scss ───┐
│ diff --git a/web/src/components/PlayerProfil │
│ e/ClassFilterSelect/ClassFilterSelect.scss b │
│ /web/src/components/PlayerProfile/ClassFilte │
│ rSelect/ClassFilterSelect.scss │
│ deleted file mode 100644 │
│ index cdd00f7..0000000 │
│ --- a/web/src/components/PlayerProfile/Class │
│ FilterSelect/ClassFilterSelect.scss │
│ +++ /dev/null │
│ @@ -1,49 +0,0 @@ │
│ -@use "../../../styles/core/tokens" as *; │
│ - │
│ -.class-filter { │
│ - display: flex; │
│ - align-items: center; │
│ - gap: $spacing-sm; │
│ - │
│ - label { │
│ - font-weight: $font-weight-semibold; │
│ - color: var(--text-secondary); │
│ - white-space: nowrap; │
│ - } │
│ - │
│ - select { │
│ - padding: $spacing-sm $spacing-md; │
│ - background: var(--bg-primary); │
│ - color: var(--text-primary); │
│ - border: 1px solid var(--border-color); │
│ - border-radius: $radius-sm; │
│ - font-size: $font-size-md; │
│ - cursor: pointer; │
│ - min-width: 180px; │
│ - transition: │
│ - border-color 0.2s ease, │
│ - box-shadow 0.2s ease; │
│ - │
│ - &:hover { │
│ - border-color: var(--highlight-color); │
│ - } │
│ - │
│ - &:focus { │
│ - outline: none; │
│ - border-color: var(--highlight-color); │
│ - box-shadow: 0 0 0 2px rgba(255, 215, │
│ 0, 0.1); │
│ - } │
│ - } │
│ -} │
│ - │
│ -@media (max-width: 768px) { │
│ - .class-filter { │
│ - flex-direction: column; │
│ - align-items: stretch; │
│ - gap: $spacing-xs; │
│ - │
│ - select { │
│ - width: 100%; │
│ - } │
│ - } │
│ -} │
└──────────────────────────────────────────────┘
┌─ web/src/pages/challenge-mode/[season]/[...slug].astro ────────────────────┐
│ diff --git a/web/src/pages/challenge-mode/[season]/[...slug].astro b/web/src/pages │
│ /challenge-mode/[season]/[...slug].astro │
│ index 1f780cd..f860876 100644 │
│ --- a/web/src/pages/challenge-mode/[season]/[...slug].astro │
│ +++ b/web/src/pages/challenge-mode/[season]/[...slug].astro │
│ @@ -127,7 +127,7 @@ try { │
│ currentDungeon={dungeonParam} │
│ /> │
│ │
│ - <div class="filters"> │
│ + <div class="cm-filters"> │
│ <LeaderboardScopeFilter │
│ currentRegion={regionParam} │
│ currentRealm={realmParam} │
│ @@ -172,27 +172,9 @@ try { │
│ padding: 20px; │
│ } │
│ │
│ - .filters { │
│ - display: flex; │
│ - align-items: center; │
│ - gap: 16px; │
│ - margin: 16px 0; │
│ - padding: 12px; │
│ - background: var(--bg-secondary); │
│ - border-radius: 6px; │
│ - border: 1px solid var(--border-color); │
│ - flex-wrap: wrap; │
│ - } │
│ - │
│ @media (max-width: 768px) { │
│ .leaderboard-page { │
│ padding: 15px; │
│ } │
│ - │
│ - .filters { │
│ - flex-direction: column; │
│ - align-items: stretch; │
│ - gap: 12px; │
│ - } │
│ } │
│ </style> │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ...mode/[season]/[...slug].astro ───┐
│ diff --git a/web/src/pages/challenge-mode/[s │
│ eason]/[...slug].astro b/web/src/pages/chall │
│ enge-mode/[season]/[...slug].astro │
│ index 1f780cd..f860876 100644 │
│ --- a/web/src/pages/challenge-mode/[season]/ │
│ [...slug].astro │
│ +++ b/web/src/pages/challenge-mode/[season]/ │
│ [...slug].astro │
│ @@ -127,7 +127,7 @@ try { │
│ currentDungeon={dungeonParam} │
│ /> │
│ │
│ - <div class="filters"> │
│ + <div class="cm-filters"> │
│ <LeaderboardScopeFilter │
│ currentRegion={regionParam} │
│ currentRealm={realmParam} │
│ @@ -172,27 +172,9 @@ try { │
│ padding: 20px; │
│ } │
│ │
│ - .filters { │
│ - display: flex; │
│ - align-items: center; │
│ - gap: 16px; │
│ - margin: 16px 0; │
│ - padding: 12px; │
│ - background: var(--bg-secondary); │
│ - border-radius: 6px; │
│ - border: 1px solid var(--border-color); │
│ - flex-wrap: wrap; │
│ - } │
│ - │
│ @media (max-width: 768px) { │
│ .leaderboard-page { │
│ padding: 15px; │
│ } │
│ - │
│ - .filters { │
│ - flex-direction: column; │
│ - align-items: stretch; │
│ - gap: 12px; │
│ - } │
│ } │
│ </style> │
└──────────────────────────────────────────────┘
┌─ web/src/pages/challenge-mode/[season]/players/[...scope].astro ───────────┐
│ diff --git a/web/src/pages/challenge-mode/[season]/players/[...scope].astro b/web/ │
│ src/pages/challenge-mode/[season]/players/[...scope].astro │
│ index 821847d..1613bb0 100644 │
│ --- a/web/src/pages/challenge-mode/[season]/players/[...scope].astro │
│ +++ b/web/src/pages/challenge-mode/[season]/players/[...scope].astro │
│ @@ -114,7 +114,7 @@ const pageTitle = `Player Rankings - ${scopeLabel} - Season ${ │
│ currentSeason}`; │
│ currentClass={classParam} │
│ /> │
│ │
│ - <div class="filters"> │
│ + <div class="cm-filters"> │
│ <LeaderboardScopeFilter │
│ currentRegion={regionParam} │
│ currentRealm={realmParam} │
│ @@ -158,29 +158,11 @@ const pageTitle = `Player Rankings - ${scopeLabel} - Season │
│ ${currentSeason}`; │
│ margin: 8px 0 16px 0; │
│ } │
│ │
│ - .filters { │
│ - display: flex; │
│ - align-items: center; │
│ - gap: 16px; │
│ - margin: 16px 0; │
│ - padding: 12px; │
│ - background: var(--bg-secondary); │
│ - border-radius: 6px; │
│ - border: 1px solid var(--border-color); │
│ - flex-wrap: wrap; │
│ - } │
│ - │
│ @media (max-width: 768px) { │
│ .leaderboard-page { │
│ padding: 15px; │
│ } │
│ │
│ - .filters { │
│ - flex-direction: column; │
│ - align-items: stretch; │
│ - gap: 12px; │
│ - } │
│ - │
│ .page-title { │
│ font-size: 1.5em; │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ...son]/players/[...scope].astro ───┐
│ diff --git a/web/src/pages/challenge-mode/[s │
│ eason]/players/[...scope].astro b/web/src/pa │
│ ges/challenge-mode/[season]/players/[...scop │
│ e].astro │
│ index 821847d..1613bb0 100644 │
│ --- a/web/src/pages/challenge-mode/[season]/ │
│ players/[...scope].astro │
│ +++ b/web/src/pages/challenge-mode/[season]/ │
│ players/[...scope].astro │
│ @@ -114,7 +114,7 @@ const pageTitle = `Playe │
│ r Rankings - ${scopeLabel} - Season ${curren │
│ tSeason}`; │
│ currentClass={classParam} │
│ /> │
│ │
│ - <div class="filters"> │
│ + <div class="cm-filters"> │
│ <LeaderboardScopeFilter │
│ currentRegion={regionParam} │
│ currentRealm={realmParam} │
│ @@ -158,29 +158,11 @@ const pageTitle = `Pla │
│ yer Rankings - ${scopeLabel} - Season ${curr │
│ entSeason}`; │
│ margin: 8px 0 16px 0; │
│ } │
│ │
│ - .filters { │
│ - display: flex; │
│ - align-items: center; │
│ - gap: 16px; │
│ - margin: 16px 0; │
│ - padding: 12px; │
│ - background: var(--bg-secondary); │
│ - border-radius: 6px; │
│ - border: 1px solid var(--border-color); │
│ - flex-wrap: wrap; │
│ - } │
│ - │
│ @media (max-width: 768px) { │
│ .leaderboard-page { │
│ padding: 15px; │
│ } │
│ │
│ - .filters { │
│ - flex-direction: column; │
│ - align-items: stretch; │
│ - gap: 12px; │
│ - } │
│ - │
│ .page-title { │
│ font-size: 1.5em; │
│ } │
└──────────────────────────────────────────────┘
┌─ web/src/styles/core/_utilities.scss ──────────────────────────────────────┐
│ diff --git a/web/src/styles/core/_utilities.scss b/web/src/styles/core/_utilities. │
│ scss │
│ index 4f6994f..dc51424 100644 │
│ --- a/web/src/styles/core/_utilities.scss │
│ +++ b/web/src/styles/core/_utilities.scss │
│ @@ -668,3 +668,24 @@ │
│ .time--gold { color: var(--time-gold); } │
│ .time--platinum { color: var(--time-platinum); } │
│ .time--title { color: var(--time-title); } │
│ + │
│ +// Shared filter band - used at the top of CM leaderboard / stats pages to │
│ +// frame the season/region/etc. dropdowns under the type-nav. Extracted here so │
│ +// the styling stays in one place across pages. │
│ +.cm-filters { │
│ + display: flex; │
│ + align-items: center; │
│ + gap: $spacing-lg; │
│ + margin: $spacing-lg 0; │
│ + padding: $spacing-md; │
│ + background: var(--bg-secondary); │
│ + border: 1px solid var(--border-color); │
│ + border-radius: $radius-md; │
│ + flex-wrap: wrap; │
│ + │
│ + @media (max-width: 768px) { │
│ + flex-direction: column; │
│ + align-items: stretch; │
│ + gap: $spacing-md; │
│ + } │
│ +} │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ...c/styles/core/_utilities.scss ───┐
│ diff --git a/web/src/styles/core/_utilities. │
│ scss b/web/src/styles/core/_utilities.scss │
│ index 4f6994f..dc51424 100644 │
│ --- a/web/src/styles/core/_utilities.scss │
│ +++ b/web/src/styles/core/_utilities.scss │
│ @@ -668,3 +668,24 @@ │
│ .time--gold { color: var(--time-gold); │
│ } │
│ .time--platinum { color: var(--time-platinu │
│ m); } │
│ .time--title { color: var(--time-title); │
│ } │
│ + │
│ +// Shared filter band - used at the top of │
│ CM leaderboard / stats pages to │
│ +// frame the season/region/etc. dropdowns u │
│ nder the type-nav. Extracted here so │
│ +// the styling stays in one place across pa │
│ ges. │
│ +.cm-filters { │
│ + display: flex; │
│ + align-items: center; │
│ + gap: $spacing-lg; │
│ + margin: $spacing-lg 0; │
│ + padding: $spacing-md; │
│ + background: var(--bg-secondary); │
│ + border: 1px solid var(--border-color); │
│ + border-radius: $radius-md; │
│ + flex-wrap: wrap; │
│ + │
│ + @media (max-width: 768px) { │
│ + flex-direction: column; │
│ + align-items: stretch; │
│ + gap: $spacing-md; │
│ + } │
│ +} │
└──────────────────────────────────────────────┘
[ BACK TO LOG ]
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET