0bb1bcc5f9
Built a complete Netflix-style streaming interface for IndeeHub's decentralized media platform with real film content. Features: - Vue 3 + TypeScript + Vite setup with hot module reloading - Netflix-inspired UI with hero section and horizontal scrolling content rows - Glass morphism design system with custom Tailwind configuration - 20+ real IndeeHub films organized into 6 categories (Bitcoin, Documentaries, Drama, etc.) - Full-featured video player component with custom controls - Mobile-responsive design with bottom navigation - Nostr integration ready (nostr-tools, relay pool, NIP-71 support) - Pinia state management for content - MCP tools configured (Filesystem, Memory, Nostr, Puppeteer) Components: - Browse.vue: Main streaming interface with hero and content rows - ContentRow.vue: Horizontal scrolling film cards with navigation arrows - VideoPlayer.vue: Custom video player with play/pause, seek, volume, fullscreen - MobileNav.vue: Bottom tab navigation for mobile devices Tech Stack: - Frontend: Vue 3 (Composition API), TypeScript - Build: Vite 7 - Styling: Tailwind CSS with custom theme - State: Pinia 3 - Router: Vue Router 4.6 - Protocol: Nostr (nostr-tools 2.22) Design: - 4px grid spacing system - Glass morphism UI components - Netflix-style hero section with featured content - Smooth animations and hover effects - Mobile-first responsive breakpoints - Dark theme with custom color palette Content: - 20+ IndeeHub films with titles, descriptions, categories - Bitcoin documentaries: God Bless Bitcoin, Dirty Coin, Searching for Satoshi - Independent films and documentaries - Working Unsplash CDN images for thumbnails and backdrops Ready for deployment to Umbrel, Start9, and Archy nodes. Co-authored-by: Cursor <cursoragent@cursor.com>
119 lines
2.3 KiB
Plaintext
119 lines
2.3 KiB
Plaintext
---
|
|
description: Mobile-first UX patterns and touch interaction design
|
|
alwaysApply: false
|
|
globs: **/*.{ts,tsx,js,jsx,vue,css,scss}
|
|
---
|
|
|
|
# Mobile UX Patterns & Touch Interactions
|
|
|
|
## Mobile-First Philosophy
|
|
|
|
Start with mobile constraints, then progressively enhance for larger screens.
|
|
|
|
### Design Process
|
|
|
|
1. **Mobile (320-480px)**: Core functionality only
|
|
2. **Tablet (768-1024px)**: Add supporting features
|
|
3. **Desktop (1280px+)**: Enhanced experience
|
|
|
|
## Touch Target Sizing
|
|
|
|
### Minimum 44x44px Touch Targets
|
|
|
|
```css
|
|
.touch-target {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
/* Apple HIG recommendation */
|
|
}
|
|
|
|
.touch-target-optimal {
|
|
min-width: 48px;
|
|
min-height: 48px;
|
|
/* Material Design recommendation */
|
|
}
|
|
```
|
|
|
|
### Spacing Between Targets
|
|
|
|
```css
|
|
.button-group {
|
|
display: flex;
|
|
gap: 16px; /* Comfortable spacing */
|
|
}
|
|
```
|
|
|
|
## Thumb-Friendly Zones
|
|
|
|
```
|
|
┌─────────────────┐
|
|
│ Hard to reach │ ← Top 20%
|
|
├─────────────────┤
|
|
│ Easy reach │ ← Middle 60%
|
|
├─────────────────┤
|
|
│ Natural thumb │ ← Bottom 20%
|
|
│ zone │ (place primary actions here)
|
|
└─────────────────┘
|
|
```
|
|
|
|
Primary actions should be placed in the bottom 20% for one-handed use.
|
|
|
|
## Dynamic Viewport Height
|
|
|
|
```css
|
|
/* Use dvh instead of vh for mobile */
|
|
.hero {
|
|
height: 100dvh; /* Dynamic viewport height */
|
|
}
|
|
|
|
/* Fallback for older browsers */
|
|
.hero {
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
}
|
|
```
|
|
|
|
## Safe Area Insets (iOS)
|
|
|
|
```css
|
|
.header {
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
|
|
.footer {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
```
|
|
|
|
## Form Input Optimization
|
|
|
|
```html
|
|
<!-- Use correct input types for mobile keyboards -->
|
|
<input type="email" inputmode="email">
|
|
<input type="number" inputmode="numeric">
|
|
<input type="tel" inputmode="tel">
|
|
<input type="url" inputmode="url">
|
|
```
|
|
|
|
```css
|
|
/* Prevent iOS zoom on focus */
|
|
input, select, textarea {
|
|
font-size: 16px; /* Minimum to prevent zoom */
|
|
}
|
|
```
|
|
|
|
## Touch Feedback
|
|
|
|
```css
|
|
.button {
|
|
transition: transform 0.1s ease, opacity 0.1s ease;
|
|
}
|
|
|
|
.button:active {
|
|
transform: scale(0.95);
|
|
opacity: 0.8;
|
|
}
|
|
```
|