antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(levels): move slider into level display pane above abacus

Browse Source 
Relocate the slider control from a separate container below the level
display to inside the level pane itself, positioned above the abacus.

Changes:
- Move slider markup into main level display pane
- Position between level info and abacus display
- Remove separate slider container that was below
- Adjust spacing for better visual hierarchy

Improves UX by keeping the control close to the content it affects.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-10-20 08:49:48 -05:00
parent 8e345cfb4c
commit 2d8bb4ab88
1 changed files with 47 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
apps/web/src/app/levels/page.tsx
View File

@@ -290,6 +290,53 @@ export default function LevelsPage() {
)}
</div>
{/* Range Slider with hover support */}
<div className={css({ mb: '6', px: { base: '2', md: '8' } })}>
<div className={css({ mb: '3', textAlign: 'center' })}>
<p className={css({ fontSize: 'sm', color: 'gray.400' })}>
Hover, drag, or touch the slider to explore all levels
</p>
</div>
<div
onMouseMove={handleSliderHover}
onTouchMove={handleSliderHover}
className={css({ position: 'relative' })}
>
<input
ref={sliderRef}
type="range"
min="0"
max={allLevels.length - 1}
value={currentIndex}
onChange={(e) => setCurrentIndex(Number(e.target.value))}
className={css({
w: '100%',
h: '2',
bg: 'gray.700',
rounded: 'full',
outline: 'none',
cursor: 'pointer',
})}
/>
</div>
{/* Level Markers */}
<div
className={css({
display: 'flex',
justifyContent: 'space-between',
mt: '3',
fontSize: 'xs',
color: 'gray.500',
})}
>
<span>10th Kyu</span>
<span>1st Kyu</span>
<span>10th Dan</span>
</div>
</div>
{/* Abacus Display */}
<div
className={css({
@@ -327,67 +374,6 @@ export default function LevelsPage() {
</div>
</div>
{/* Slider Control */}
<div
className={css({
bg: 'rgba(0, 0, 0, 0.3)',
border: '1px solid',
borderColor: 'gray.700',
rounded: 'xl',
p: '6',
})}
>
<div className={css({ mb: '4', textAlign: 'center' })}>
<h3
className={css({ fontSize: 'lg', fontWeight: 'bold', color: 'white', mb: '2' })}
>
Explore All Levels
</h3>
<p className={css({ fontSize: 'sm', color: 'gray.400' })}>
Hover, drag, or touch the slider to see each rank
</p>
</div>
{/* Range Slider with hover support */}
<div
onMouseMove={handleSliderHover}
onTouchMove={handleSliderHover}
className={css({ position: 'relative' })}
>
<input
ref={sliderRef}
type="range"
min="0"
max={allLevels.length - 1}
value={currentIndex}
onChange={(e) => setCurrentIndex(Number(e.target.value))}
className={css({
w: '100%',
h: '2',
bg: 'gray.700',
rounded: 'full',
outline: 'none',
cursor: 'pointer',
})}
/>
</div>
{/* Level Markers */}
<div
className={css({
display: 'flex',
justifyContent: 'space-between',
mt: '4',
fontSize: 'xs',
color: 'gray.500',
})}
>
<span>10th Kyu</span>
<span>1st Kyu</span>
<span>10th Dan</span>
</div>
</div>
{/* Legend */}
<div
className={css({