Admin/ocean-cleanup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement mobile-responsive design with touch optimizations

Browse Source
This commit is contained in:
Paul Bailey
2025-11-16 23:57:05 +00:00
parent b0eafebfc4
commit 1a0e3e4e35
9 changed files with 387 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/HomePage.tsx
View File

@@ -14,32 +14,35 @@ export function HomePage() {
<div className="min-h-screen bg-black/40">
{/* Hero Section */}
<div className="relative z-10 max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl drop-shadow-lg">
<div className="relative z-10 max-w-7xl mx-auto py-12 sm:py-16 md:py-24 px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold text-white drop-shadow-lg leading-tight">
Track and Clean Ireland's Beaches
</h2>
<p className="mt-6 text-xl text-white max-w-3xl mx-auto drop-shadow-md">
<p className="mt-4 sm:mt-6 text-base sm:text-lg md:text-xl text-white max-w-3xl mx-auto drop-shadow-md px-2">
Join our community in mapping beach litter, organizing clean-up events,
and protecting our coastal environment through data-driven action.
</p>
<SignedOut>
<div className="mt-10 flex flex-wrap justify-center gap-4">
<div className="mt-8 sm:mt-10 flex flex-col sm:flex-row flex-wrap justify-center gap-3 sm:gap-4 px-4">
<Link
to="/sign-up"
className="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105"
className="px-6 py-3 sm:px-8 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105 touch-manipulation"
style={{ minHeight: '44px' }}
>
Get Started
</Link>
<Link
to="/map"
className="px-8 py-3 border-2 border-white text-base font-medium rounded-md text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105"
className="px-6 py-3 sm:px-8 border-2 border-white text-base font-medium rounded-md text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 active:bg-white/30 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105 touch-manipulation"
style={{ minHeight: '44px' }}
>
View Map
</Link>
<Link
to="/why-clean"
className="px-8 py-3 border-2 border-white text-base font-medium rounded-md text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105"
className="px-6 py-3 sm:px-8 border-2 border-white text-base font-medium rounded-md text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 active:bg-white/30 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105 touch-manipulation"
style={{ minHeight: '44px' }}
>
Why Clean Our Beaches?
</Link>
@@ -47,22 +50,25 @@ export function HomePage() {
</SignedOut>
<SignedIn>
<div className="mt-10 flex flex-wrap justify-center gap-4">
<div className="mt-8 sm:mt-10 flex flex-col sm:flex-row flex-wrap justify-center gap-3 sm:gap-4 px-4">
<Link
to="/reports/new"
className="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105"
className="px-6 py-3 sm:px-8 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105 touch-manipulation"
style={{ minHeight: '44px' }}
>
Report Litter
</Link>
<Link
to="/map"
className="px-8 py-3 border-2 border-white text-base font-medium rounded-md text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105"
className="px-6 py-3 sm:px-8 border-2 border-white text-base font-medium rounded-md text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 active:bg-white/30 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105 touch-manipulation"
style={{ minHeight: '44px' }}
>
View Map
</Link>
<Link
to="/why-clean"
className="px-8 py-3 border-2 border-white text-base font-medium rounded-md text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105"
className="px-6 py-3 sm:px-8 border-2 border-white text-base font-medium rounded-md text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 active:bg-white/30 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105 touch-manipulation"
style={{ minHeight: '44px' }}
>
Why Clean Our Beaches?
</Link>
@@ -71,36 +77,36 @@ export function HomePage() {
</div>
{/* Features Section */}
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
<div className="bg-white/95 backdrop-blur-sm p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<div className="text-blue-600 text-3xl mb-4">📍</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">
<div className="max-w-7xl mx-auto py-8 sm:py-12 md:py-16 px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 gap-6 sm:gap-8 md:grid-cols-3">
<div className="bg-white/95 backdrop-blur-sm p-5 sm:p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<div className="text-blue-600 text-3xl sm:text-4xl mb-3 sm:mb-4">📍</div>
<h3 className="text-base sm:text-lg font-semibold text-gray-900 mb-2">
Report Litter
</h3>
<p className="text-gray-600">
<p className="text-sm sm:text-base text-gray-600">
Document beach litter with photos and location data to raise awareness
and track pollution patterns.
</p>
</div>
<div className="bg-white/95 backdrop-blur-sm p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<div className="text-blue-600 text-3xl mb-4">🗺️</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">
<div className="bg-white/95 backdrop-blur-sm p-5 sm:p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<div className="text-blue-600 text-3xl sm:text-4xl mb-3 sm:mb-4">🗺️</div>
<h3 className="text-base sm:text-lg font-semibold text-gray-900 mb-2">
Interactive Maps
</h3>
<p className="text-gray-600">
<p className="text-sm sm:text-base text-gray-600">
Visualize litter hotspots, view reports from your area, and identify
areas that need attention.
</p>
</div>
<div className="bg-white/95 backdrop-blur-sm p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<div className="text-blue-600 text-3xl mb-4">🤝</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">
<div className="bg-white/95 backdrop-blur-sm p-5 sm:p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
<div className="text-blue-600 text-3xl sm:text-4xl mb-3 sm:mb-4">🤝</div>
<h3 className="text-base sm:text-lg font-semibold text-gray-900 mb-2">
Organize Events
</h3>
<p className="text-gray-600">
<p className="text-sm sm:text-base text-gray-600">
Create and join clean-up events, coordinate with volunteers, and make
a real impact on coastal health.
</p>

14
src/pages/MapPage.tsx
View File

@@ -431,20 +431,20 @@ export function MapPage() {
return (
<div className="h-screen flex flex-col">
<div className="bg-white border-b border-gray-200 px-4 py-4 sm:px-6 lg:px-8">
<h2 className="text-2xl font-bold text-gray-900">Interactive Map</h2>
<p className="mt-1 text-sm text-gray-600">
<div className="bg-white border-b border-gray-200 px-4 py-3 sm:py-4 sm:px-6 lg:px-8">
<h2 className="text-xl sm:text-2xl font-bold text-gray-900">Interactive Map</h2>
<p className="mt-1 text-xs sm:text-sm text-gray-600">
View litter reports and cleanup events across Ireland
</p>
</div>
<div className="flex-1 p-4">
<div className="flex-1 p-2 sm:p-4">
<div className="h-full bg-white rounded-lg shadow-lg overflow-hidden relative">
{isLoadingReports || isLoadingEvents ? (
<div className="absolute inset-0 flex items-center justify-center bg-gray-50">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
<p className="mt-4 text-gray-600">
<div className="text-center px-4">
<div className="animate-spin rounded-full h-10 w-10 sm:h-12 sm:w-12 border-b-2 border-blue-600 mx-auto"></div>
<p className="mt-4 text-sm sm:text-base text-gray-600">
Loading {isLoadingReports && isLoadingEvents ? 'map data' : isLoadingReports ? 'reports' : 'events'}...
</p>
</div>