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

fix(guide): remove inner containers and tighten margins

Browse Source 
- Remove white/gray bordered inner containers around abacuses
- Center abacuses directly in cards using flex
- Reduce card padding from p:4 to p:2
- Tighten margins between elements (mb:3→mb:2)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-11-04 19:40:19 -06:00
parent 8a170833f3
commit 7e54c6f4fc
1 changed files with 32 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
apps/web/src/app/guide/components/ReadingNumbersGuide.tsx
View File

@@ -245,7 +245,7 @@ export function ReadingNumbersGuide() {
border: '1px solid', border: '1px solid',
borderColor: 'gray.200', borderColor: 'gray.200',
rounded: 'lg', rounded: 'lg',
p: '4', p: '2',
textAlign: 'center', textAlign: 'center',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@@ -257,42 +257,32 @@ export function ReadingNumbersGuide() {
fontSize: 'xl', fontSize: 'xl',
fontWeight: 'bold', fontWeight: 'bold',
color: 'brand.600', color: 'brand.600',
mb: '3', mb: '2',
})} })}
> >
{example.num} {example.num}
</div> </div>
{/* Fixed size container for consistent abacus rendering */}
<div <div
className={css({ className={css({
width: '200px', flex: '1',
height: '400px',
bg: 'white',
border: '1px solid',
borderColor: 'gray.300',
rounded: 'md',
mb: '3',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
overflow: 'hidden', my: '2',
mx: 'auto',
})} })}
> >
<div className={css({ width: '100%', height: '100%' })}> <AbacusReact
<AbacusReact value={example.num}
value={example.num} columns={1}
columns={1} beadShape={appConfig.beadShape}
beadShape={appConfig.beadShape} colorScheme={appConfig.colorScheme}
colorScheme={appConfig.colorScheme} hideInactiveBeads={appConfig.hideInactiveBeads}
hideInactiveBeads={appConfig.hideInactiveBeads} scaleFactor={1.2}
scaleFactor={1.2} interactive={false}
interactive={false} showNumbers={false}
showNumbers={false} animated={true}
animated={true} />
/>
</div>
</div> </div>
<p <p
@@ -301,7 +291,7 @@ export function ReadingNumbersGuide() {
color: 'gray.600', color: 'gray.600',
lineHeight: 'tight', lineHeight: 'tight',
textAlign: 'center', textAlign: 'center',
mt: 'auto', mt: '2',
})} })}
> >
{t(`singleDigits.examples.${example.descKey}`)} {t(`singleDigits.examples.${example.descKey}`)}
@@ -471,7 +461,7 @@ export function ReadingNumbersGuide() {
border: '1px solid', border: '1px solid',
borderColor: 'blue.300', borderColor: 'blue.300',
rounded: 'lg', rounded: 'lg',
p: '4', p: '2',
textAlign: 'center', textAlign: 'center',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@@ -483,42 +473,32 @@ export function ReadingNumbersGuide() {
fontSize: '2xl', fontSize: '2xl',
fontWeight: 'bold', fontWeight: 'bold',
color: 'blue.600', color: 'blue.600',
mb: '3', mb: '2',
})} })}
> >
{example.num} {example.num}
</div> </div>
{/* Fixed size container for multi-digit numbers */}
<div <div
className={css({ className={css({
width: '320px', flex: '1',
height: '350px',
bg: 'gray.50',
border: '1px solid',
borderColor: 'blue.200',
rounded: 'md',
mb: '3',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
overflow: 'hidden', my: '2',
mx: 'auto',
})} })}
> >
<div className={css({ width: '100%', height: '100%' })}> <AbacusReact
<AbacusReact value={example.num}
value={example.num} columns={'auto'}
columns={'auto'} beadShape={appConfig.beadShape}
beadShape={appConfig.beadShape} colorScheme={appConfig.colorScheme}
colorScheme={appConfig.colorScheme} hideInactiveBeads={appConfig.hideInactiveBeads}
hideInactiveBeads={appConfig.hideInactiveBeads} scaleFactor={1.2}
scaleFactor={1.2} interactive={false}
interactive={false} showNumbers={false}
showNumbers={false} animated={true}
animated={true} />
/>
</div>
</div> </div>
<p <p
@@ -527,6 +507,7 @@ export function ReadingNumbersGuide() {
color: 'blue.700', color: 'blue.700',
lineHeight: 'relaxed', lineHeight: 'relaxed',
textAlign: 'center', textAlign: 'center',
mt: '2',
})} })}
> >
{t(`multiDigit.examples.${example.descKey}`)} {t(`multiDigit.examples.${example.descKey}`)}