forked from jsnbuchanan/crowd-funder-for-time-pwa
UI tweaks to QR scanner
- Removed QR code border - Changed QR code size to eliminate whitespace baked into image - Removed scanning frame - Removed camera selector button - Restyled camera stop buttons in both web and Capacitor for consistency - Added iOS safe area to Capacitor camera overlay
This commit is contained in:
@@ -42,7 +42,7 @@
|
||||
|
||||
<div
|
||||
v-if="activeDid && activeDid.startsWith(ETHR_DID_PREFIX)"
|
||||
class="block w-[90vw] max-w-[40vh] mx-auto my-4 border border-slate-500"
|
||||
class="block w-[90vw] max-w-[40vh] mx-auto my-4"
|
||||
@click="onCopyUrlToClipboard()"
|
||||
>
|
||||
<!--
|
||||
@@ -51,8 +51,8 @@
|
||||
-->
|
||||
<QRCodeVue3
|
||||
:value="qrValue"
|
||||
:width="640"
|
||||
:height="640"
|
||||
:width="606"
|
||||
:height="606"
|
||||
:corners-square-options="{ type: 'square' }"
|
||||
:dots-options="{ type: 'square', color: '#000' }"
|
||||
/>
|
||||
@@ -141,34 +141,16 @@
|
||||
@camera-off="onCameraOff"
|
||||
/>
|
||||
|
||||
<!-- Scanning Frame -->
|
||||
<div
|
||||
class="absolute inset-0 border-2"
|
||||
:class="{
|
||||
'border-blue-500': !error && !isScanning,
|
||||
'border-green-500 animate-pulse': isScanning,
|
||||
'border-red-500': error,
|
||||
}"
|
||||
style="opacity: 0.5; pointer-events: none"
|
||||
></div>
|
||||
|
||||
<!-- Camera Switch Button -->
|
||||
<button
|
||||
class="absolute bottom-4 left-4 bg-white rounded-full p-2 leading-none shadow-lg"
|
||||
title="Switch camera"
|
||||
@click="toggleCamera"
|
||||
>
|
||||
<font-awesome icon="camera-rotate" class="size-6 text-gray-600" />
|
||||
</button>
|
||||
|
||||
<!-- Camera Stop Button -->
|
||||
<button
|
||||
class="absolute bottom-4 right-4 bg-white rounded-full p-2 leading-none shadow-lg"
|
||||
title="Stop camera"
|
||||
@click="stopScanning"
|
||||
>
|
||||
<font-awesome icon="xmark" class="size-6 text-gray-600" />
|
||||
</button>
|
||||
<div class="absolute bottom-4 inset-x-0 flex justify-center items-center">
|
||||
<!-- Camera Stop Button -->
|
||||
<button
|
||||
class="text-center text-slate-600 leading-none bg-white p-2 rounded-full drop-shadow-lg"
|
||||
title="Stop camera"
|
||||
@click="stopScanning"
|
||||
>
|
||||
<font-awesome icon="xmark" class="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
|
||||
Reference in New Issue
Block a user