make QR img bigger, adjust css

This commit is contained in:
Tiago Vasconcelos 2023-10-10 15:04:46 +01:00 committed by Pavol Rusnak
parent ebaad7fe49
commit 371dacf8b2
2 changed files with 10 additions and 6 deletions

View file

@ -368,7 +368,7 @@ Vue.component('lnbits-qrcode', {
template: ` template: `
<div class="qrcode__wrapper"> <div class="qrcode__wrapper">
<qrcode :value="value" <qrcode :value="value"
:options="{errorCorrectionLevel: 'Q'}" class="rounded-borders"></qrcode> :options="{errorCorrectionLevel: 'Q', width: 800}" class="rounded-borders"></qrcode>
<img class="qrcode__image" :src="logo" alt="..." /> <img class="qrcode__image" :src="logo" alt="..." />
</div> </div>
` `

View file

@ -214,20 +214,24 @@ video {
} }
} }
.qrcode__wrapper > canvas { // qrcode
.qrcode__wrapper canvas {
position: relative; position: relative;
min-width: 100%; width: 100% !important; // important to override qrcode inline width
min-height: 100%; max-width: 100%;
max-height: 100%;
} }
.qrcode__image { .qrcode__image {
width: 15%; width: 15%;
height: 15%; height: 15%;
overflow: hidden; overflow: hidden;
background: #fff;
left: 50%; left: 50%;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: 0.3rem; padding: 0.2rem;
border-radius: 0.2rem;
} }