discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A.7.5-polish-6-fix applet FLIP-btn hover-reveal — drop leftover _billboard.scss rule whose ID-context cascaded above the hover-reveal. User-reported 2026-05-25 PM after polish-6 (b308115): "still not seeing it on My Sign applet, but looks good everywhere else". DOM inspection confirmed the btn was present + opacity:0 at rest as expected, but real-hover never flipped it to opacity:1.

Browse Source 
Root cause: polish-5 (1e2041e) refactored the applet FLIP-btn position rule to `@include flip-btn-base` but LEFT IT NESTED inside the `#id_applet_my_sign { ... }` outer block of `_billboard.scss`. So the rule resolved to `#id_applet_my_sign .my-sign-applet-card .my-sign-applet-flip-btn` (specificity 0,1,2,0 — 1 ID + 2 classes) — and OUT-CASCADED the hover-reveal rule `.my-sign-applet-card:hover .my-sign-applet-flip-btn` (specificity 0,0,3,0 — 3 classes incl. pseudo, no ID) on the ID axis. Result: opacity:0 from the leftover rule stuck even on real `:hover`, the polish-6 unified positioning rule in `_card-deck.scss` was a redundant 0,0,1,0 also-ran, and the user couldn't see the btn.

Fix: drop the leftover position + mid-flip rules from `_billboard.scss` entirely. The polish-5/6 unified rules in `_card-deck.scss` (`.my-sign-flip-btn, .my-sign-applet-flip-btn, .sea-stage-flip-btn { @include flip-btn-base; z-index: 25; bottom: 0.6rem; left: 0.6rem }` + `.sig-stage-card[data-flipping] .my-sign-flip-btn, .my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn, .sea-stage-card[data-flipping] .sea-stage-flip-btn, ...` + hover-reveal trio) now cover the applet too at clean 0,0,1,0 / 0,0,3,0 / 0,0,2,1 specificities — hover-reveal wins by class count, no ID-context contamination.

Lesson: when refactoring CSS to a shared mixin/placeholder, also LIFT THE SELECTOR OUT of any ID-scoped outer block. Leaving the rule inside `#id_*` inflates its specificity in ways that can shadow other shared rules (esp. hover/state rules that lack an ID). The leftover comment block in `_billboard.scss` now documents the lift-out for future-me / future-DRY-passes.

Tests: 1314/1314 IT+UT total green (74s; pure SCSS rule deletion, no test surface). Visual verify pending user confirmation — the cascade is now clean (hover-reveal wins; transition: opacity 0.3s applies; btn fades in on real card hover + fades out on un-hover).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-25 19:52:51 -04:00
parent b308115fcf
commit d10ef94161
1 changed files with 11 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/static_src/scss/_billboard.scss
View File

@@ -581,23 +581,17 @@ body.page-billposts {
} }
} }
// Sprint A.6 — FLIP btn for non-polarized image-equipped decks in the // Polish-6-fix — FLIP-btn position + mid-flip-hide rules DROPPED here.
// applet. Nested INSIDE .my-sign-applet-card.--image (which has // Both lived inside `#id_applet_my_sign { ... }` so they resolved to
// position: relative) so absolute positioning anchors to the card. // `#id_applet_my_sign .my-sign-applet-card .my-sign-applet-flip-btn`
// Polish-5: shares `@include flip-btn-base` + `%flip-btn-mid-flip` w. // (specificity 0,1,2,0 — ID + 2 classes) which OUT-CASCADED the
// the other 2 surfaces (my_sign main + game-kit fan) via `_card-deck.scss`. // hover-reveal rule `.my-sign-applet-card:hover .my-sign-applet-flip-btn`
.my-sign-applet-card .my-sign-applet-flip-btn { // (specificity 0,0,3,0 — no ID) on the ID axis. Result: opacity:0 stuck
@include flip-btn-base; // even on hover; user-reported "still not seeing it on My Sign applet".
z-index: 10; // The unified positioning + mid-flip rules in `_card-deck.scss`'s
bottom: 0.6rem; // polish-5/6 FLIP-btn block now cover the applet w/o ID-context — the
left: 0.6rem; // applet btn picks them up by class alone, hover-reveal wins as
} // intended.
// Btn is nested INSIDE the card, so the [data-flipping] hook is a direct
// ancestor — no `:has()` needed (unlike the my_sign + fan surfaces where
// the btn is a sibling of the flipping card under a common parent).
.my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn {
@extend %flip-btn-mid-flip;
}
// Stat block — mirrors the stage card's footprint (same 5:8 aspect + // Stat block — mirrors the stage card's footprint (same 5:8 aspect +
// height) so the pair reads as a balanced 2-tile composition centred // height) so the pair reads as a balanced 2-tile composition centred