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

refactor: start page dropdown at 4 and remove 'pages' suffix 

Adjust page count dropdown for cleaner UI:

**Changes**
- Quick buttons: 1, 2, 3 (removed 4 from buttons)
- Dropdown: starts at 4 instead of 10
- Dropdown options: 4, 10, 25, 50, 100
- Removed "pages" suffix from dropdown items (just show numbers)
- Reduced dropdown minW to 24 (narrower for just numbers)

**UI**
- Buttons: [1] [2] [3] [4+▼]
- Dropdown shows: 4, 10, 25, 50, 100 (with checkmark for selected)
- Shows selected number in button when > 3 (e.g., "25▼")

🤖 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-11 18:05:33 -06:00
parent 4ea4ead834
commit cf7eb574d4
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/web/src/app/create/worksheets/components/OrientationPanel.tsx
View File

@ -396,8 +396,8 @@ export function OrientationPanel({
}, },
})} })}
> >
{/* Quick select buttons for 1-4 pages */} {/* Quick select buttons for 1-3 pages */}
{[1, 2, 3, 4].map((pageCount) => { {[1, 2, 3].map((pageCount) => {
const isSelected = pages === pageCount const isSelected = pages === pageCount
return ( return (
<button <button
@ -454,7 +454,7 @@ export function OrientationPanel({
) )
})} })}
{/* Dropdown for 10+ pages */} {/* Dropdown for 4+ pages */}
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<button <button
@ -465,9 +465,9 @@ export function OrientationPanel({
h: '8', h: '8',
px: '2', px: '2',
border: '2px solid', border: '2px solid',
borderColor: pages > 4 ? 'brand.500' : isDark ? 'gray.600' : 'gray.300', borderColor: pages > 3 ? 'brand.500' : isDark ? 'gray.600' : 'gray.300',
bg: bg:
pages > 4 pages > 3
? isDark ? isDark
? 'brand.900' ? 'brand.900'
: 'brand.50' : 'brand.50'
@ -479,7 +479,7 @@ export function OrientationPanel({
fontSize: 'xs', fontSize: 'xs',
fontWeight: 'bold', fontWeight: 'bold',
color: color:
pages > 4 pages > 3
? isDark ? isDark
? 'brand.200' ? 'brand.200'
: 'brand.700' : 'brand.700'
@ -508,7 +508,7 @@ export function OrientationPanel({
}, },
})} })}
> >
{pages > 4 ? pages : '10+'} {pages > 3 ? pages : '4+'}
<span className={css({ fontSize: '2xs', opacity: 0.7 })}>▼</span> <span className={css({ fontSize: '2xs', opacity: 0.7 })}>▼</span>
</button> </button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
@ -522,12 +522,12 @@ export function OrientationPanel({
border: '1px solid', border: '1px solid',
borderColor: isDark ? 'gray.700' : 'gray.200', borderColor: isDark ? 'gray.700' : 'gray.200',
p: '2', p: '2',
minW: '32', minW: '24',
zIndex: 50, zIndex: 50,
})} })}
sideOffset={5} sideOffset={5}
> >
{[10, 25, 50, 100].map((pageCount) => { {[4, 10, 25, 50, 100].map((pageCount) => {
const isSelected = pages === pageCount const isSelected = pages === pageCount
return ( return (
<DropdownMenu.Item <DropdownMenu.Item
@ -578,7 +578,7 @@ export function OrientationPanel({
}) })
} }
> >
<span>{pageCount} pages</span> <span>{pageCount}</span>
{isSelected && <span className={css({ fontSize: 'sm' })}>✓</span>} {isSelected && <span className={css({ fontSize: 'sm' })}>✓</span>}
</DropdownMenu.Item> </DropdownMenu.Item>
) )