feat: implement responsive ReadingView with preference support
Implements Task 3 from Bible Reader 2025 plan: - Created lib/reading-preferences.ts with 4 presets (default, dyslexia, highContrast, minimal) - Implemented loadPreferences/savePreferences using localStorage - Added getCSSVariables for dynamic styling - Created ReadingView component with full mobile responsiveness - Touch interaction: tap top third shows header, bottom third toggles controls - Verse text is clickable with hover effects - Navigation controls (prev/next chapter, settings button) - Created test file for preferences 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
16
__tests__/lib/reading-preferences.test.ts
Normal file
16
__tests__/lib/reading-preferences.test.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { getCSSVariables, getPreset } from '@/lib/reading-preferences'
|
||||
|
||||
describe('reading-preferences', () => {
|
||||
it('returns default preset', () => {
|
||||
const preset = getPreset('default')
|
||||
expect(preset.fontFamily).toBe('georgia')
|
||||
expect(preset.fontSize).toBe(18)
|
||||
})
|
||||
|
||||
it('generates CSS variables correctly', () => {
|
||||
const preset = getPreset('dyslexia')
|
||||
const vars = getCSSVariables(preset)
|
||||
expect(vars['--font-size']).toBe('18px')
|
||||
expect(vars['--letter-spacing']).toBe('0.08em')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user