75 lines
2.2 KiB
Markdown
75 lines
2.2 KiB
Markdown
---
|
||
status: archived
|
||
created: '2026-03-16'
|
||
tags:
|
||
- ui
|
||
- mobile
|
||
priority: high
|
||
created_at: '2026-03-16T07:51:51.869Z'
|
||
related:
|
||
- 005-poll-creation-management
|
||
- 008-voting-system
|
||
- 009-public-sharing
|
||
updated_at: '2026-03-16T09:07:18.408Z'
|
||
transitions:
|
||
- status: archived
|
||
at: '2026-03-16T09:07:18.408Z'
|
||
---
|
||
|
||
# Mobile-First UI Design
|
||
|
||
> **Status**: 📦 Archived · **Priority**: High · **Created**: 2026-03-16 · **Tags**: ui, mobile
|
||
|
||
## Overview
|
||
|
||
Design all UI mobile-first. The primary use case is people voting on their phones. Desktop is a secondary concern—layouts should scale up, not be shoehorned down.
|
||
|
||
## Design
|
||
|
||
### Principles
|
||
|
||
- Touch targets ≥ 44px
|
||
- Single-column layout on mobile; expand on larger screens
|
||
- Bottom navigation bar (thumb-friendly)
|
||
- Minimal chrome—content first
|
||
- System font stack for performance
|
||
|
||
### Key Screens
|
||
|
||
1. **Home / Poll list**: Cards showing poll title, status, vote count
|
||
2. **Create poll**: Simple form, large inputs, toggle for anonymity
|
||
3. **Poll detail**: Results visualization, vote buttons, participant list
|
||
4. **Profile**: Edit name, bio, tags
|
||
5. **Poll management** (owner/mod): User list, role controls, start/stop
|
||
|
||
### Navigation
|
||
|
||
- Bottom tab bar: Home, Create (+), Profile
|
||
- Poll detail accessed by tapping a poll card
|
||
- Management accessed via gear icon within poll detail
|
||
|
||
### Styling
|
||
|
||
- Tailwind CSS with mobile breakpoints as default
|
||
- Dark mode support (respects `prefers-color-scheme`)
|
||
- CSS transitions for state changes (vote submitted, poll status change)
|
||
|
||
## Plan
|
||
|
||
- [ ] Design bottom tab navigation component
|
||
- [ ] Build poll list (home) with card layout
|
||
- [ ] Build poll creation form (mobile-optimized)
|
||
- [ ] Build poll detail view with results visualization
|
||
- [ ] Build profile edit page with tag management
|
||
- [ ] Build poll management panel (users, roles, lifecycle)
|
||
- [ ] Add dark mode toggle / system preference detection
|
||
- [ ] Test on various mobile viewport sizes
|
||
|
||
## Test
|
||
|
||
- [ ] All touch targets meet 44px minimum
|
||
- [ ] Layout works on 320px–428px width (small to large phones)
|
||
- [ ] No horizontal scroll on any page
|
||
- [ ] Dark mode renders correctly
|
||
- [ ] Navigation is accessible via keyboard/screen reader
|