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

44
app/globals.css
View File

@@ -9,4 +9,48 @@ mark {
padding: 0 2px;
border-radius: 2px;
font-weight: 500;
}
/* Touch-optimized tap targets - minimum 44x44px for iOS */
@layer utilities {
.tap-target {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tap-target-sm {
min-width: 40px;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* Smooth scrolling for better mobile experience */
@layer base {
html {
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
}
/* Improve touch scrolling on iOS */
body {
-webkit-overflow-scrolling: touch;
}
/* Better focus states for accessibility */
*:focus-visible {
outline: 2px solid #3B82F6;
outline-offset: 2px;
}
/* Prevent text selection on buttons for better mobile UX */
button {
-webkit-tap-highlight-color: transparent;
user-select: none;
}
}

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>

16
app/page.tsx
View File

@@ -7,27 +7,27 @@ export default async function Home() {
const lists = await getLists()
return (
<main className="container mx-auto px-4 py-8 max-w-4xl">
<div className="flex items-center justify-between mb-8">
<h1 className="text-3xl font-bold text-gray-900">Ultimate Lists</h1>
<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8">
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900">Ultimate Lists</h1>
<NewListButton />
</div>
{/* Global Search */}
<div className="mb-8">
<div className="mb-6 sm:mb-8">
<GlobalSearch />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
{lists.map((list) => (
<ListCard key={list.id} list={list} />
))}
</div>
{lists.length === 0 && (
<div className="text-center py-12">
<p className="text-gray-500 text-lg mb-4">No lists yet</p>
<p className="text-gray-400">Create your first list to get started</p>
<div className="text-center py-12 sm:py-16">
<p className="text-gray-500 text-base sm:text-lg mb-3 sm:mb-4">No lists yet</p>
<p className="text-gray-400 text-sm sm:text-base">Create your first list to get started</p>
</div>
)}
</main>