xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/ananas. learn multiple languages at once
ananas.xcc.es
7.4 kB
184 lines
1# Mobile Requirements for Translation App
2
3## Overview
4This document outlines the specific mobile UX requirements and implementation details for the translation application's mobile interface.
5
6## Layout Requirements
7
8### Desktop Layout (Top → Bottom Flow)
9- **Input Position**: Fixed at top of page
10- **Content Flow**: Natural top-to-bottom document flow
11- **Translation Order**: Standard chronological order (oldest first)
12- **Grid Structure**: `grid-template-rows: auto 1fr`
13 - Row 1 (auto): Input section
14 - Row 2 (1fr): Scrollable content
15
16### Mobile Layout (Bottom ← Top Flow)
17- **Input Position**: Fixed at bottom of screen for thumb accessibility
18- **Content Flow**: Reversed for mobile UX optimization
19- **Translation Order**: Newest translations appear first (closest to input)
20- **Grid Structure**: `grid-template-rows: 1fr auto` with CSS `order` reordering
21 - Row 1 (1fr): Scrollable content (order: 1)
22 - Row 2 (auto): Input section (order: 2)
23
24## Mobile-Specific Features
25
26### Fixed Positioning & Layout
27- **Viewport Lock**: Layout grid fixed to viewport (`position: fixed; top: 0; left: 0; right: 0; bottom: 0`)
28- **No Overlap**: CSS Grid prevents input from covering content
29- **Proper Scrolling**: Content section has `overflow-y: auto` within grid area
30
31### Visual Connection
32- **Input-to-Translation Link**: Decorative gradient line connecting newest translation to input
33- **Seamless Flow**: No gaps between newest translation and input area
34- **Visual Hierarchy**: Clear distinction between input and content areas
35
36### UI Element Management
37- **Hidden Elements**: "View All" button hidden on mobile to focus on recent translations
38- **Debug Controls**: Debug buttons hidden on mobile (`display: none` at `max-width: 767px`)
39- **Responsive Sizing**: Adjusted padding, margins, and font sizes for mobile
40
41## Touch & Zoom Prevention
42
43### Global Prevention (app.pcss)
44```css
45html, body {
46 touch-action: manipulation;
47 -webkit-touch-callout: none;
48 -webkit-text-size-adjust: 100%;
49 -webkit-user-select: none;
50 user-select: none;
51 overscroll-behavior: contain;
52}
53```
54
55### Component-Level Prevention
56- **Layout Container**: Full touch restrictions on mobile grid
57- **Input Section**: Prevents zoom and callouts
58- **Translation Cards**: Prevents double-tap zoom on individual cards
59- **Content Areas**: Scroll and overscroll prevention
60
61### Smart Text Selection
62- **Disabled**: On containers, UI elements, and interactive areas
63- **Enabled**: Inside translation text content (`.translation-text`, `[contenteditable]`)
64- **Input Fields**: Text selection allowed for user input
65
66### Viewport Meta Tag
67```html
68<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
69```
70
71## Animation System
72
73### Flip Animations
74- **Library**: Svelte's `animate:flip` for smooth position changes
75- **Duration**: 400ms for position transitions
76- **Trigger**: When new translations are added and existing items reorder
77
78### Initial Load Animations
79- **Staggered Entry**: Progressive item appearance with 120ms delays
80- **Fade In**: 300-400ms fade duration
81- **Smart Timing**: Different timing for initial load vs. new additions
82
83### Animation State Management
84- **Load Flag**: `hasLoadedInitialAnimations` to differentiate initial vs. ongoing animations
85- **Keyed Items**: Translations keyed by `timestamp` for proper animation tracking
86
87## Responsive Breakpoints
88
89### Mobile
90- **Range**: `max-width: 767px`
91- **Layout**: Fixed grid with bottom input
92- **Features**: All mobile-specific optimizations active
93
94### Tablet/Desktop
95- **Range**: `min-width: 768px`
96- **Layout**: Natural document flow with top input
97- **Features**: Standard desktop UX patterns
98
99## Input Behavior
100
101### Text Clearing
102- **Auto-Clear**: Input text clears after successful translation
103- **Implementation**: `text = '';` after `translationHistoryStore.addTranslation()`
104
105### Touch Optimization
106- **Thumb Zone**: Input positioned in natural thumb reach area
107- **No Zoom**: Prevents accidental zoom when focusing input
108- **Quick Access**: Always visible and accessible without scrolling
109
110## Content Management
111
112### Translation Flow
113- **Mobile**: Reverse chronological (newest → oldest, top → bottom)
114- **Desktop**: Chronological (oldest → newest, top → bottom)
115- **Visual Logic**: Newest translation connects directly to input on mobile
116
117### Scrolling Behavior
118- **Mobile**: Content scrolls within fixed grid area
119- **Contained**: `overscroll-behavior: contain` prevents page bounce
120- **Smooth**: Native scroll performance maintained
121
122## Implementation Status
123
124### ✅ Completed Features
1251. **Fixed Layout Grid**: CSS Grid-based responsive layout
1262. **Input Positioning**: Bottom-fixed on mobile, top on desktop
1273. **Zoom Prevention**: Comprehensive pinch/tap/scroll restrictions
1284. **Flip Animations**: Smooth reordering when new translations added
1295. **Input Clearing**: Text clears after successful translation
1306. **Debug Controls**: Hidden on mobile to prevent overlap
1317. **Visual Connection**: Gradient line connecting newest translation to input
1328. **Touch Restrictions**: Granular control over touch interactions
1339. **Staggered Load**: Progressive appearance of initial translations
13410. **Responsive Flow**: Different ordering logic for mobile vs. desktop
135
136### 🏗️ Architecture Decisions
137- **CSS Grid over Fixed Positioning**: Cleaner, more maintainable layout
138- **Order Property**: Elegant reordering without DOM manipulation
139- **Component-Level Touch Control**: Granular zoom prevention
140- **Smart Text Selection**: Preserve usability while preventing accidents
141- **Animation State Management**: Efficient handling of different animation contexts
142
143## File Locations
144
145### Primary Implementation
146- `/src/routes/+page.svelte` - Main home page with mobile layout
147- `/src/app.pcss` - Global mobile touch prevention CSS
148- `/src/app.html` - Viewport meta tag configuration
149
150### Supporting Components
151- `/src/jibs/TranslationInput.svelte` - Input component with clearing logic
152- `/src/routes/+layout.svelte` - Debug controls positioning
153- `/src/lib/stores/translationHistory.svelte.js` - State management
154
155### Related Pages
156- `/src/routes/review/+page.svelte` - Review page (similar mobile optimizations)
157
158## Testing Considerations
159
160### Mobile Testing
161- **Touch Behavior**: Verify no accidental zoom/scroll
162- **Input Accessibility**: Thumb reach and keyboard behavior
163- **Animation Performance**: Smooth 60fps animations
164- **Layout Stability**: No content jumping or overlap
165
166### Cross-Device Testing
167- **Responsive Breakpoints**: Clean transitions between mobile/desktop
168- **Viewport Variations**: Different mobile screen sizes
169- **Orientation Changes**: Portrait/landscape handling
170- **Browser Differences**: iOS Safari vs. Android Chrome behavior
171
172## Future Enhancements
173
174### Potential Improvements
175- **Haptic Feedback**: Subtle vibration on successful translation
176- **Gesture Support**: Swipe gestures for translation management
177- **Progressive Enhancement**: Graceful degradation for older devices
178- **Performance Optimization**: Further animation and scroll optimizations
179
180### Accessibility
181- **Screen Reader**: Proper ARIA labels for mobile layout changes
182- **High Contrast**: Ensure visual indicators work in high contrast mode
183- **Reduced Motion**: Respect user's motion preferences
184- **Focus Management**: Proper focus handling in fixed layout