Restructure event modal content layout
- Move map to bottom of content - Wrap scrollable content properly - Add flex-shrink-0 to icons to prevent squishing - Improve content visibility and scrolling
This commit is contained in:
@@ -138,112 +138,112 @@ export function EventDetailModal({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Content - Scrollable */}
|
{/* Content - Scrollable */}
|
||||||
<div className="px-6 py-6 space-y-6 overflow-y-auto flex-1">
|
<div className="overflow-y-auto flex-1">
|
||||||
{/* Event Details */}
|
<div className="px-6 py-6 space-y-6">
|
||||||
<div className="space-y-4">
|
{/* Event Details */}
|
||||||
<div className="flex items-start">
|
<div className="space-y-4">
|
||||||
<svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<div className="flex items-start">
|
||||||
<path
|
<svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-900">Date & Time</p>
|
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
|
||||||
{formatEventDate(event.scheduledDate)} at {formatEventTime(event.scheduledDate)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start">
|
|
||||||
<svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-900">Duration</p>
|
|
||||||
<p className="text-sm text-gray-600 mt-1">{formatDuration(event.duration)}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start">
|
|
||||||
<svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
|
||||||
/>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
</svg>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-900">Location</p>
|
|
||||||
<p className="text-sm text-gray-600 mt-1">{event.locationName}</p>
|
|
||||||
<p className="text-xs text-gray-500 mt-1">
|
|
||||||
{event.latitude.toFixed(6)}, {event.longitude.toFixed(6)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-2">Description</h3>
|
|
||||||
<p className="text-sm text-gray-600 whitespace-pre-wrap">{event.description}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Completed Event Info */}
|
|
||||||
{event.status === 'completed' && event.litterCollected !== undefined && (
|
|
||||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg className="h-6 w-6 text-green-600 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path
|
<path
|
||||||
fillRule="evenodd"
|
strokeLinecap="round"
|
||||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
strokeLinejoin="round"
|
||||||
clipRule="evenodd"
|
strokeWidth={2}
|
||||||
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-medium text-green-900">Event Completed</p>
|
<p className="text-sm font-medium text-gray-900">Date & Time</p>
|
||||||
<p className="text-sm text-green-700 mt-1">
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
{event.litterCollected} kg of litter collected
|
{formatEventDate(event.scheduledDate)} at {formatEventTime(event.scheduledDate)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start">
|
||||||
|
<svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-900">Duration</p>
|
||||||
|
<p className="text-sm text-gray-600 mt-1">{formatDuration(event.duration)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start">
|
||||||
|
<svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
||||||
|
/>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-900">Location</p>
|
||||||
|
<p className="text-sm text-gray-600 mt-1">{event.locationName}</p>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
{event.latitude.toFixed(6)}, {event.longitude.toFixed(6)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Map */}
|
{/* Description */}
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-2">Event Location</h3>
|
|
||||||
<div className="border border-gray-300 rounded-lg overflow-hidden">
|
|
||||||
<div ref={mapRef} className="w-full h-64" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Photos (if completed) */}
|
|
||||||
{event.status === 'completed' && event.photos && event.photos.length > 0 && (
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-sm font-medium text-gray-900 mb-2">Event Photos</h3>
|
<h3 className="text-sm font-medium text-gray-900 mb-2">Description</h3>
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
<p className="text-sm text-gray-600 whitespace-pre-wrap">{event.description}</p>
|
||||||
{event.photos.map((photo, index) => (
|
</div>
|
||||||
<img
|
|
||||||
key={index}
|
{/* Completed Event Info */}
|
||||||
src={photo}
|
{event.status === 'completed' && event.litterCollected !== undefined && (
|
||||||
alt={`Event photo ${index + 1}`}
|
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
||||||
className="w-full h-32 object-cover rounded-lg"
|
<div className="flex items-center">
|
||||||
/>
|
<svg className="h-6 w-6 text-green-600 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||||
))}
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-green-900">Event Completed</p>
|
||||||
|
<p className="text-sm text-green-700 mt-1">{event.litterCollected} kg of litter collected</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Photos (if completed) */}
|
||||||
|
{event.status === 'completed' && event.photos && event.photos.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-medium text-gray-900 mb-2">Event Photos</h3>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
|
{event.photos.map((photo, index) => (
|
||||||
|
<img
|
||||||
|
key={index}
|
||||||
|
src={photo}
|
||||||
|
alt={`Event photo ${index + 1}`}
|
||||||
|
className="w-full h-32 object-cover rounded-lg"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Map - Moved to bottom */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-medium text-gray-900 mb-2">Event Location Map</h3>
|
||||||
|
<div className="border border-gray-300 rounded-lg overflow-hidden">
|
||||||
|
<div ref={mapRef} className="w-full h-64" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Completion Form for Organizers */}
|
{/* Completion Form for Organizers */}
|
||||||
|
|||||||
Reference in New Issue
Block a user