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

24
components/ListCard.tsx
View File

@@ -37,19 +37,19 @@ export default function ListCard({ list }: { list: List }) {
return (
<>
<Link href={`/list/${list.id}`}>
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer group">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3 flex-1 min-w-0">
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-6 hover:shadow-md active:shadow-lg transition-all cursor-pointer group min-h-[140px] sm:min-h-[160px]">
<div className="flex items-start justify-between mb-4 gap-2">
<div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
<div
className="w-4 h-4 rounded-full flex-shrink-0"
className="w-3 h-3 sm:w-4 sm:h-4 rounded-full flex-shrink-0"
style={{ backgroundColor: list.color }}
/>
<h3 className="font-semibold text-gray-900 truncate">{list.title}</h3>
<h3 className="font-semibold text-gray-900 truncate text-base sm:text-lg">{list.title}</h3>
</div>
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" onClick={handleDeleteClick}>
<div className="flex items-center gap-0.5 sm:gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity flex-shrink-0" onClick={handleDeleteClick}>
<button
onClick={handleEditClick}
className="text-gray-600 hover:text-gray-900 transition-colors p-2 hover:bg-gray-100 rounded-lg"
className="text-gray-600 hover:text-gray-900 active:text-black transition-colors tap-target-sm hover:bg-gray-100 active:bg-gray-200 rounded-lg"
aria-label="Edit list"
>
<Edit2 size={18} />
@@ -62,15 +62,15 @@ export default function ListCard({ list }: { list: List }) {
</div>
</div>
<div className="space-y-3">
<div className="flex items-center justify-between text-sm text-gray-600">
<div className="space-y-2.5 sm:space-y-3">
<div className="flex items-center justify-between text-xs sm:text-sm text-gray-600">
<span>{completedCount} of {totalCount} completed</span>
<span>{Math.round(progress)}%</span>
<span className="font-medium">{Math.round(progress)}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="w-full bg-gray-200 rounded-full h-2 sm:h-2.5">
<div
className="h-2 rounded-full transition-all duration-300"
className="h-2 sm:h-2.5 rounded-full transition-all duration-300"
style={{
width: `${progress}%`,
backgroundColor: list.color