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

Restructure event modal content layout

Browse Source 
- 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:
Paul Bailey
2025-11-16 20:32:36 +00:00
parent 493acdaeb4
commit 73fc4e290f
1 changed files with 94 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/event/EventDetailModal.tsx
View File

@@ -138,11 +138,12 @@ 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">
<div className="px-6 py-6 space-y-6">
{/* Event Details */} {/* Event Details */}
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-start"> <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"> <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 <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
@@ -159,7 +160,7 @@ export function EventDetailModal({
</div> </div>
<div className="flex items-start"> <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"> <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 <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
@@ -174,7 +175,7 @@ export function EventDetailModal({
</div> </div>
<div className="flex items-start"> <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"> <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 <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
@@ -203,7 +204,7 @@ export function EventDetailModal({
{event.status === 'completed' && event.litterCollected !== undefined && ( {event.status === 'completed' && event.litterCollected !== undefined && (
<div className="bg-green-50 border border-green-200 rounded-lg p-4"> <div className="bg-green-50 border border-green-200 rounded-lg p-4">
<div className="flex items-center"> <div className="flex items-center">
<svg className="h-6 w-6 text-green-600 mr-3" fill="currentColor" viewBox="0 0 20 20"> <svg className="h-6 w-6 text-green-600 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path <path
fillRule="evenodd" 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" 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"
@@ -212,22 +213,12 @@ export function EventDetailModal({
</svg> </svg>
<div> <div>
<p className="text-sm font-medium text-green-900">Event Completed</p> <p className="text-sm font-medium text-green-900">Event Completed</p>
<p className="text-sm text-green-700 mt-1"> <p className="text-sm text-green-700 mt-1">{event.litterCollected} kg of litter collected</p>
{event.litterCollected} kg of litter collected
</p>
</div> </div>
</div> </div>
</div> </div>
)} )}
{/* Map */}
<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) */} {/* Photos (if completed) */}
{event.status === 'completed' && event.photos && event.photos.length > 0 && ( {event.status === 'completed' && event.photos && event.photos.length > 0 && (
<div> <div>
@@ -244,6 +235,15 @@ export function EventDetailModal({
</div> </div>
</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>
{/* Completion Form for Organizers */} {/* Completion Form for Organizers */}