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