justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Hide QR code on mobile phones, auto-trigger camera on mobile

Browse source 
QR code hidden via CSS on screens < 640px (phones). On mobile,
file input gets capture=environment so tapping the button opens
the camera directly. Tablets still show QR code.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin 2026-05-30 16:25:52 -05:00
parent 1535acb413
commit d2f9e642d4
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
site/src/components/intake/steps/DOTIntakeStep.astro
View file

@ -244,8 +244,8 @@
Add Photo of Your ID
</button>
<p style="font-size:11px;color:#94a3b8;text-align:center;margin:8px 0 0">Accepted formats: JPEG, PNG, PDF &middot; Max 15MB</p>
<!-- QR code for phone upload — always visible -->
<div style="margin-top:16px;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;text-align:center">
<!-- QR code for phone upload — hidden on mobile phones -->
<div id="dot-id-qr-section" style="margin-top:16px;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;text-align:center">
<div style="display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px">
<div style="flex:1;height:1px;background:#d1d5db"></div>
<span style="font-size:12px;color:#64748b;font-weight:500">or use your phone</span>
@ -286,7 +286,7 @@
.pw-security-notice { display: flex; gap: 8px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; margin-bottom: 1rem; font-size: 12px; color: #1e40af; line-height: 1.5; }
.pw-upload-area { border: 2px dashed #d1d5db; border-radius: 8px; padding: 1rem; text-align: center; }
.pw-err { color: #b91c1c; margin-top: 0.75rem; font-size: 0.9rem; background: #fee2e2; padding: 0.5rem 0.75rem; border-radius: 6px; }
@media (max-width: 640px) { .pw-row-2, .pw-row-3 { grid-template-columns: 1fr; } .pw-cargo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pw-row-2, .pw-row-3 { grid-template-columns: 1fr; } .pw-cargo-grid { grid-template-columns: 1fr 1fr; } #dot-id-qr-section { display: none !important; } }
</style>
<script is:inline>
@ -445,6 +445,10 @@
const idUploadOpts = document.getElementById("dot-id-upload-options");
// Upload button — opens file picker
// On mobile, set capture so camera opens directly
if (idInput && /Mobi|Android|iPhone/i.test(navigator.userAgent)) {
idInput.setAttribute("capture", "environment");
}
idBtn?.addEventListener("click", function() { if (idInput) idInput.click(); });
// Webcam camera button