soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

qr code layouts im mobile admin perfektioniert.

Browse Source
This commit is contained in:
Codex Agent
2025-12-14 22:14:30 +01:00
parent c8b149d887
commit a8b6e5d9c4
7 changed files with 369 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/admin/mobile/QrPrintPage.tsx
View File

@@ -103,18 +103,23 @@ export default function MobileQrPrintPage() {
justifyContent="center"
overflow="hidden"
>
{qrUrl ? (
{qrImage ? (
<img
src={qrImage || `https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(qrUrl)}`}
src={qrImage}
alt="QR"
style={{ width: '100%', height: '100%', objectFit: 'contain' }}
/>
) : (
<Text color="#9ca3af" fontSize="$sm">
{t('events.qr.missing', 'Kein QR-Link vorhanden')}
{t('events.qr.missing', 'Kein QR-Link vorhanden')}
</Text>
)}
</YStack>
{qrUrl ? (
<Text fontSize="$xs" color="#334155" textAlign="center" marginTop="$2" style={{ wordBreak: 'break-word' }}>
{qrUrl}
</Text>
) : null}
<Text fontSize="$xs" color="#6b7280">
{t('events.qr.description', 'Scan to access the event guest app.')}
</Text>
@@ -123,12 +128,12 @@ export default function MobileQrPrintPage() {
label={t('events.qr.download', 'Download')}
fullWidth={false}
onPress={() => {
if (!qrUrl) {
if (!qrImage) {
toast.error(t('events.qr.missing', 'Kein QR-Link vorhanden'));
return;
}
const link = document.createElement('a');
link.href = qrImage || `https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(qrUrl)}`;
link.href = qrImage;
link.download = 'event-qr.png';
document.body.appendChild(link);
link.click();
@@ -577,12 +582,17 @@ function PreviewStep({
))}
</YStack>
<YStack alignItems="center" justifyContent="center">
{qrUrl ? (
<img
src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrUrl)}`}
alt="QR"
style={{ width: 140, height: 140, objectFit: 'contain' }}
/>
{qrImage ? (
<>
<img
src={qrImage}
alt="QR"
style={{ width: 140, height: 140, objectFit: 'contain' }}
/>
<Text fontSize="$xs" color="#334155" textAlign="center" marginTop="$2" style={{ wordBreak: 'break-word' }}>
{qrUrl}
</Text>
</>
) : (
<Text fontSize="$xs" color="#6b7280">
{t('events.qr.missing', 'Kein QR-Link vorhanden')}