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

Reduce printable QR code page size to fit on single page

Browse Source
This commit is contained in:
Paul Bailey
2025-11-20 19:37:50 +00:00
parent 2dcd1ce78d
commit c23b93bef2
1 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/pages/PrintableQRCodePage.tsx
View File

@@ -120,24 +120,24 @@ export function PrintableQRCodePage() {
</div> </div>
{/* Printable Content */} {/* Printable Content */}
<div id="printable-qr-code" className="max-w-4xl mx-auto"> <div id="printable-qr-code" className="max-w-3xl mx-auto">
<div className="bg-white rounded-lg shadow-md p-12"> <div className="bg-white rounded-lg shadow-md p-8">
{/* Header */} {/* Header */}
<div className="text-center mb-8"> <div className="text-center mb-4">
<h1 className="text-3xl font-bold text-gray-900 mb-2"> <h1 className="text-2xl font-bold text-gray-900 mb-1">
Event Check-In QR Code Event Check-In QR Code
</h1> </h1>
<p className="text-gray-600"> <p className="text-sm text-gray-600">
Litter Scouts - Beach Cleanup Events Litter Scouts - Beach Cleanup Events
</p> </p>
</div> </div>
{/* QR Code */} {/* QR Code */}
<div className="flex justify-center mb-8"> <div className="flex justify-center mb-4">
<div className="p-8 bg-white border-4 border-gray-200 rounded-lg"> <div className="p-4 bg-white border-4 border-gray-200 rounded-lg">
<QRCodeSVG <QRCodeSVG
value={qrData} value={qrData}
size={300} size={240}
level="H" level="H"
includeMargin={true} includeMargin={true}
/> />
@@ -145,42 +145,42 @@ export function PrintableQRCodePage() {
</div> </div>
{/* User Info */} {/* User Info */}
<div className="text-center mb-8"> <div className="text-center mb-4">
<div className="inline-flex items-center justify-center mb-4"> <div className="inline-flex items-center justify-center mb-2">
{user.imageUrl && ( {user.imageUrl && (
<img <img
src={user.imageUrl} src={user.imageUrl}
alt={user.fullName || user.username || 'User'} alt={user.fullName || user.username || 'User'}
className="w-16 h-16 rounded-full border-2 border-gray-300" className="w-12 h-12 rounded-full border-2 border-gray-300"
/> />
)} )}
</div> </div>
<h2 className="text-2xl font-semibold text-gray-900 mb-1"> <h2 className="text-xl font-semibold text-gray-900 mb-0.5">
{user.fullName || user.username || 'User'} {user.fullName || user.username || 'User'}
</h2> </h2>
<p className="text-gray-600">@{user.username}</p> <p className="text-sm text-gray-600">@{user.username}</p>
</div> </div>
{/* Instructions */} {/* Instructions */}
<div className="border-t border-gray-200 pt-6"> <div className="border-t border-gray-200 pt-4">
<h3 className="text-lg font-semibold text-gray-900 mb-3 text-center"> <h3 className="text-base font-semibold text-gray-900 mb-2 text-center">
How to Use How to Use
</h3> </h3>
<div className="space-y-2 text-gray-700"> <div className="space-y-1.5 text-sm text-gray-700">
<div className="flex items-start"> <div className="flex items-start">
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 font-semibold text-sm mr-3 flex-shrink-0 mt-0.5"> <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-600 font-semibold text-xs mr-2 flex-shrink-0 mt-0.5">
1 1
</span> </span>
<p>Bring this QR code to any Litter Scouts cleanup event</p> <p>Bring this QR code to any Litter Scouts cleanup event</p>
</div> </div>
<div className="flex items-start"> <div className="flex items-start">
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 font-semibold text-sm mr-3 flex-shrink-0 mt-0.5"> <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-600 font-semibold text-xs mr-2 flex-shrink-0 mt-0.5">
2 2
</span> </span>
<p>Show it to the event organizer for quick check-in</p> <p>Show it to the event organizer for quick check-in</p>
</div> </div>
<div className="flex items-start"> <div className="flex items-start">
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 font-semibold text-sm mr-3 flex-shrink-0 mt-0.5"> <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-600 font-semibold text-xs mr-2 flex-shrink-0 mt-0.5">
3 3
</span> </span>
<p>Your attendance will be automatically recorded</p> <p>Your attendance will be automatically recorded</p>
@@ -189,9 +189,8 @@ export function PrintableQRCodePage() {
</div> </div>
{/* Footer */} {/* Footer */}
<div className="mt-8 pt-6 border-t border-gray-200 text-center text-sm text-gray-500"> <div className="mt-4 pt-4 border-t border-gray-200 text-center text-xs text-gray-500">
<p>This QR code is unique to your account</p> <p>This QR code is unique to your account - Keep it safe and don't share with others</p>
<p className="mt-1">Keep it safe and don't share with others</p>
</div> </div>
</div> </div>
</div> </div>