176 lines
4.2 KiB
Markdown
176 lines
4.2 KiB
Markdown
|
# ✨ UI Redesign - Quick Start Guide
|
||
|
|
|
||
|
|
## What Changed?
|
||
|
|
|
||
|
|
The song viewing/editing interface has been completely redesigned for **better mobile experience** with:
|
||
|
|
|
||
|
|
- **Smaller, cleaner buttons** (50% smaller navigation, 25% smaller action buttons)
|
||
|
|
- **Compact controls** (3-column grid instead of 2-column)
|
||
|
|
- **Mobile-optimized text sizes** (16px instead of 24px)
|
||
|
|
- **Tighter spacing** (35-40% more content visible)
|
||
|
|
- **Professional styling** (solid colors, white backgrounds)
|
||
|
|
|
||
|
|
## Access the Website
|
||
|
|
|
||
|
|
### Local Network (Ubuntu Server)
|
||
|
|
|
||
|
|
```
|
||
|
|
http://192.168.10.130:3000
|
||
|
|
```
|
||
|
|
|
||
|
|
### External (DNS - after port forwarding setup)
|
||
|
|
|
||
|
|
```
|
||
|
|
http://houseofprayer.ddns.net:3000
|
||
|
|
```
|
||
|
|
|
||
|
|
### Backend API
|
||
|
|
|
||
|
|
```
|
||
|
|
http://192.168.10.130:8080/api
|
||
|
|
```
|
||
|
|
|
||
|
|
## New Button Layout
|
||
|
|
|
||
|
|
### Navigation (Top & Bottom)
|
||
|
|
|
||
|
|
- **Previous**: Left arrow button (compact 8x8 square)
|
||
|
|
- **Counter**: White badge showing song position (e.g., "1 / 10")
|
||
|
|
- **Next**: Right arrow button (compact 8x8 square)
|
||
|
|
|
||
|
|
### Key & Controls (Single Compact Bar)
|
||
|
|
|
||
|
|
```
|
||
|
|
Current Key: G Play (Capo 3): E
|
||
|
|
🎹 Transpose: [C][C#][D][D#][E][F][F#][G][G#][A][A#][B]
|
||
|
|
🎸 Capo: [Dropdown: No Capo, Capo 1-15]
|
||
|
|
```
|
||
|
|
|
||
|
|
### Action Buttons (3-Column Grid)
|
||
|
|
|
||
|
|
```
|
||
|
|
Row 1: [🎵Key] [🎸On] [✏️]
|
||
|
|
Row 2: [💾Save] [🗑️] [✕Close]
|
||
|
|
```
|
||
|
|
|
||
|
|
**Button Labels Shortened:**
|
||
|
|
|
||
|
|
- "Transpose" → "🎵 Key"
|
||
|
|
- "Chords On" → "🎸 On" / "Off"
|
||
|
|
- "Edit" → "✏️" (or "Edit")
|
||
|
|
- "Delete/Remove" → "🗑️" (icon only)
|
||
|
|
- "Close" → "✕ Close"
|
||
|
|
|
||
|
|
## Mobile Optimization
|
||
|
|
|
||
|
|
### Font Sizes
|
||
|
|
|
||
|
|
- **Title**: 24px → 16px (text-2xl → text-xl for input)
|
||
|
|
- **Singer**: 24px → 16px (text-lg → text-base)
|
||
|
|
- **Chords**: 24px → 15px
|
||
|
|
- **Lyrics**: 24px → 16px
|
||
|
|
- **Labels**: 14px → 12px (text-sm → text-xs)
|
||
|
|
|
||
|
|
### Spacing
|
||
|
|
|
||
|
|
- **Padding**: p-4/p-6/p-8 → p-3/p-4
|
||
|
|
- **Margins**: mb-4/mb-6 → mb-3/mb-4
|
||
|
|
- **Gaps**: gap-3/gap-4 → gap-2/gap-1.5
|
||
|
|
|
||
|
|
### Layout
|
||
|
|
|
||
|
|
- **Controls Bar**: White background with border (instead of gray-50)
|
||
|
|
- **Song Sheet**: Reduced from 500px min-height to 400px
|
||
|
|
- **Line Height**: 2.0 → 1.8 (tighter, easier to read)
|
||
|
|
- **Borders**: All changed from border-2 to border (thinner)
|
||
|
|
|
||
|
|
## Testing Checklist
|
||
|
|
|
||
|
|
### Basic Functions
|
||
|
|
|
||
|
|
- [ ] Click on a song to view it
|
||
|
|
- [ ] Navigate between songs using top navigation
|
||
|
|
- [ ] Change key using transpose selector
|
||
|
|
- [ ] Toggle chords on/off
|
||
|
|
- [ ] Edit song lyrics
|
||
|
|
- [ ] Save changes
|
||
|
|
- [ ] Scroll through song and see bottom navigation appear
|
||
|
|
|
||
|
|
### Mobile Specific
|
||
|
|
|
||
|
|
- [ ] Test on phone in portrait mode
|
||
|
|
- [ ] Test on phone in landscape mode
|
||
|
|
- [ ] Verify buttons are easy to tap
|
||
|
|
- [ ] Check that text is readable
|
||
|
|
- [ ] Ensure all controls fit on screen
|
||
|
|
- [ ] Test keyboard doesn't overlap input fields
|
||
|
|
|
||
|
|
### Key Features
|
||
|
|
|
||
|
|
- [ ] Transpose chords to different keys
|
||
|
|
- [ ] Add capo and see "Play As" calculation
|
||
|
|
- [ ] Edit mode: Modify title, singer, lyrics
|
||
|
|
- [ ] Add new blank song sheet
|
||
|
|
- [ ] Select singer from list (for blank sheets)
|
||
|
|
- [ ] View songs within worship plans
|
||
|
|
|
||
|
|
## Keyboard Shortcuts
|
||
|
|
|
||
|
|
- **Escape**: Close modal
|
||
|
|
- **Arrow Left**: Previous song (when in worship list)
|
||
|
|
- **Arrow Right**: Next song (when in worship list)
|
||
|
|
- **Tab**: Navigate between controls
|
||
|
|
|
||
|
|
## Browser Requirements
|
||
|
|
|
||
|
|
- **Desktop**: Chrome, Firefox, Safari, Edge (latest)
|
||
|
|
- **Mobile**: iOS Safari 14+, Chrome Android 90+
|
||
|
|
- **Minimum Screen**: 320px width (iPhone SE)
|
||
|
|
|
||
|
|
## Troubleshooting
|
||
|
|
|
||
|
|
### "Buttons look huge"
|
||
|
|
|
||
|
|
- Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
|
||
|
|
- Force refresh the page
|
||
|
|
|
||
|
|
### "Text is too small to read"
|
||
|
|
|
||
|
|
- Base font is 16px, which is standard for mobile
|
||
|
|
- Use browser zoom (pinch to zoom on mobile)
|
||
|
|
|
||
|
|
### "Controls are cut off"
|
||
|
|
|
||
|
|
- Rotate to landscape mode on small phones
|
||
|
|
- Or use 2-finger pinch to zoom out slightly
|
||
|
|
|
||
|
|
### "Navigation buttons don't work"
|
||
|
|
|
||
|
|
- Make sure you're viewing a worship plan (not individual song)
|
||
|
|
- Navigation only appears when there are multiple songs
|
||
|
|
|
||
|
|
## Performance
|
||
|
|
|
||
|
|
The redesigned UI is:
|
||
|
|
|
||
|
|
- **Lighter**: Less CSS, no gradients to render
|
||
|
|
- **Faster**: Smaller DOM, quicker painting
|
||
|
|
- **Smoother**: Reduced animations, simpler transitions
|
||
|
|
|
||
|
|
## Need Help?
|
||
|
|
|
||
|
|
Files modified:
|
||
|
|
|
||
|
|
- `frontend/src/App.js` (SongModal component)
|
||
|
|
|
||
|
|
Documentation:
|
||
|
|
|
||
|
|
- `UI_REDESIGN_COMPLETE.md` - Detailed change log
|
||
|
|
- `UI_VISUAL_COMPARISON.md` - Before/after visual guide
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Status**: ✅ Live and running
|
||
|
|
**Version**: 2.0 (Compact Mobile UI)
|
||
|
|
**Date**: December 2024
|