x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-09 01:16:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix(settings): remove transient box-shadow pulse on scroll

Browse Source 
The settings-section-scroll directive ran a 260ms Element.animate() on
whichever section became "active" as the user scrolled — three
keyframes painting an `inset 0 0 0 1px var(--settings-group-active-ring)`
ring plus a soft glow on the section block. With the new flat layout
(no card chrome, no static active ring), that pulse drew a brief 1px
border around each block as you scrolled past — the user-reported
"short border kind of highlight around blocks" effect.

The rail's left active state already announces which section you're on,
so the inline pulse is redundant. Removed the entire active-section
animation effect (the pendingScrollTarget scroll-into-view effect is
untouched — that's the click-the-nav-and-jump behaviour).

CDP verifies: all .settings-group elements report `box-shadow: none`
after scrolling. 50/50 settings tests still pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
4grayandClaude Opus 4.7 committed 2026-05-19 02:00:56 +02:00
1 parent 66f70b62c7
commit 27becf5b2a
1 file changed
+8 -37
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/settings/settings-section-scroll.directive.ts
+8 -37
View File
@@ -45,43 +45,14 @@ export class SettingsSectionScrollDirective
{ injector: this.injector }
);
effect(
(onCleanup) => {
const activeSectionId = this.settingsCtx.activeSection();
const activeSectionElement =
this.elementRef.nativeElement.querySelector(
`#${activeSectionId}`
) as HTMLElement | null;
if (!activeSectionElement) {
return;
}
const animation = activeSectionElement.animate(
[
{
boxShadow:
'inset 0 0 0 1px var(--settings-group-active-ring), 0 8px 18px -24px var(--settings-group-active-glow)',
},
{
boxShadow:
'inset 0 0 0 1px var(--settings-group-active-ring), 0 12px 22px -24px var(--settings-group-active-glow)',
},
{
boxShadow:
'inset 0 0 0 1px var(--settings-group-active-ring), 0 8px 18px -24px var(--settings-group-active-glow)',
},
],
{
duration: 260,
easing: 'ease-out',
}
);
onCleanup(() => animation.cancel());
},
{ injector: this.injector }
);
// The previous active-section change handler ran a 260ms box-shadow
// animation (inset 1px ring + soft glow) on whichever section
// became active during scroll. With the new flat layout (no card
// chrome, no static active ring) that pulse drew a brief 1px
// border around each block as the user scrolled past — what the
// user reported as "short border kind of highlight around blocks".
// The rail's left active state already announces the current
// section, so the inline pulse is redundant. Removed entirely.
}
ngAfterViewInit(): void {