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

Put location and photo timestamp in same row for more compact layout

Browse Source
This commit is contained in:
Paul Bailey
2025-11-16 22:21:45 +00:00
parent 8f98047bca
commit b801b12435
1 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/report/ReportDetailModal.tsx
View File

@@ -185,18 +185,29 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
</div> </div>
</div> </div>
{/* Location */} {/* Location and Photo Timestamp */}
<div className="p-3 border border-gray-200 rounded-lg"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<p className="text-sm text-gray-500 mb-2">Location</p> <div className="p-3 border border-gray-200 rounded-lg">
<div className="space-y-1"> <p className="text-sm text-gray-500 mb-2">Location</p>
<p className="font-mono text-sm text-gray-900"> <div className="space-y-1">
{Number(report.latitude).toFixed(6)}, {Number(report.longitude).toFixed(6)} <p className="font-mono text-sm text-gray-900">
</p> {Number(report.latitude).toFixed(6)}, {Number(report.longitude).toFixed(6)}
<p className="text-xs text-gray-500"> </p>
Source: {report.locationSource === 'exif' ? 'Photo EXIF data' : <p className="text-xs text-gray-500">
report.locationSource === 'gps' ? 'Device GPS' : 'Manual selection'} Source: {report.locationSource === 'exif' ? 'Photo EXIF data' :
</p> report.locationSource === 'gps' ? 'Device GPS' : 'Manual selection'}
</p>
</div>
</div> </div>
{report.photoTimestamp && (
<div className="p-3 border border-gray-200 rounded-lg">
<p className="text-sm text-gray-500 mb-1">Photo Taken</p>
<p className="text-gray-900">
{format(new Date(report.photoTimestamp), 'PPP')} at {format(new Date(report.photoTimestamp), 'p')}
</p>
</div>
)}
</div> </div>
{/* Description */} {/* Description */}
@@ -207,16 +218,6 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
</div> </div>
)} )}
{/* Photo Timestamp */}
{report.photoTimestamp && (
<div className="p-3 border border-gray-200 rounded-lg">
<p className="text-sm text-gray-500 mb-1">Photo Taken</p>
<p className="text-gray-900">
{format(new Date(report.photoTimestamp), 'PPP')} at {format(new Date(report.photoTimestamp), 'p')}
</p>
</div>
)}
{/* Environmental Concerns */} {/* Environmental Concerns */}
{report.environmentalConcerns && report.environmentalConcerns.length > 0 && ( {report.environmentalConcerns && report.environmentalConcerns.length > 0 && (
<div className="border border-gray-200 rounded-lg p-3"> <div className="border border-gray-200 rounded-lg p-3">