Admin/Todo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement responsive design enhancements

Browse Source 
- Add touch-optimized tap targets (44x44px minimum for iOS)
- Enhance mobile responsiveness across all components
- Improve button sizing and spacing for touch interactions
- Add responsive text sizing and layout adjustments
- Implement mobile-first modal behavior (bottom sheet on mobile)
- Enhance form controls with better touch targets
- Add active states for better touch feedback
- Improve grid layouts for various screen sizes
- Add smooth scrolling and better focus states
- Optimize FilterPanel for mobile with grid layouts
- Enhance all interactive elements with tap-target classes

Requirements: 7.1, 7.2
This commit is contained in:
Paul Bailey
2025-12-01 20:54:54 +00:00
parent 6cb9a593d4
commit a037117b15
22 changed files with 230 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/list/[id]/item/[itemId]/edit/page.tsx
View File

@@ -19,21 +19,21 @@ export default async function EditItemPage({ params }: PageProps) {
}
return (
<main className="container mx-auto px-4 py-8 max-w-2xl">
<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-3xl">
{/* Header */}
<div className="flex items-center gap-4 mb-6">
<div className="flex items-center gap-3 sm:gap-4 mb-6">
<Link
href={`/list/${params.id}/item/${params.itemId}`}
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 active:text-black transition-colors tap-target-sm text-sm sm:text-base"
>
<ArrowLeft size={20} />
<ArrowLeft size={20} className="flex-shrink-0" />
<span>Back</span>
</Link>
<h1 className="text-2xl font-bold text-gray-900">Edit Task</h1>
<h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Edit Task</h1>
</div>
{/* Form */}
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-6 lg:p-8">
<ItemForm listId={params.id} item={item} mode="edit" />
</div>
</main>

18
app/list/[id]/item/[itemId]/page.tsx
View File

@@ -2,7 +2,7 @@ import { notFound } from 'next/navigation'
import { getItem } from '@/lib/actions'
import ItemDetail from '@/components/ItemDetail'
import Link from 'next/link'
import { ArrowLeft, Edit, Trash2 } from 'lucide-react'
import { ArrowLeft, Edit } from 'lucide-react'
import DeleteItemButton from '@/components/DeleteItemButton'
import ToggleItemButton from '@/components/ToggleItemButton'
@@ -21,24 +21,24 @@ export default async function ItemDetailPage({ params }: PageProps) {
}
return (
<main className="container mx-auto px-4 py-8 max-w-3xl">
<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-4xl">
{/* Header Actions */}
<div className="flex items-center justify-between mb-6">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
<Link
href={`/list/${params.id}`}
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 active:text-black transition-colors tap-target-sm text-sm sm:text-base"
>
<ArrowLeft size={20} />
<ArrowLeft size={20} className="flex-shrink-0" />
<span>Back to List</span>
</Link>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 w-full sm:w-auto">
<ToggleItemButton itemId={item.id} completed={item.completed} />
<Link
href={`/list/${params.id}/item/${params.itemId}/edit`}
className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
>
<Edit size={18} />
<Edit size={18} className="flex-shrink-0" />
<span>Edit</span>
</Link>
<DeleteItemButton itemId={item.id} listId={params.id} />
@@ -46,7 +46,7 @@ export default async function ItemDetailPage({ params }: PageProps) {
</div>
{/* Item Detail */}
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-6 lg:p-8">
<ItemDetail item={item} listTitle={item.list.title} />
</div>
</main>

18
app/list/[id]/page.tsx
View File

@@ -15,32 +15,32 @@ export default async function ListDetailPage({ params }: { params: { id: string
const completedItems = list.items.filter(item => item.completed)
return (
<main className="container mx-auto px-4 py-8 max-w-4xl">
<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-6xl">
{/* Header */}
<div className="mb-8">
<div className="mb-6 sm:mb-8">
<Link
href="/"
className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition-colors"
className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 active:text-black mb-4 transition-colors tap-target-sm text-sm sm:text-base"
>
<ArrowLeft size={20} />
<ArrowLeft size={20} className="flex-shrink-0" />
<span>Back to Lists</span>
</Link>
<div className="flex items-center gap-3 mb-2">
<div className="flex items-center gap-2 sm:gap-3 mb-2">
<div
className="w-6 h-6 rounded-full flex-shrink-0"
className="w-5 h-5 sm:w-6 sm:h-6 rounded-full flex-shrink-0"
style={{ backgroundColor: list.color }}
/>
<h1 className="text-3xl font-bold text-gray-900">{list.title}</h1>
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate">{list.title}</h1>
</div>
<p className="text-gray-600">
<p className="text-gray-600 text-sm sm:text-base">
{completedItems.length} of {list.items.length} tasks completed
</p>
</div>
{/* Inline Item Creation */}
<div className="mb-6">
<div className="mb-6 sm:mb-8">
<InlineItemCreate listId={list.id} />
</div>