Some layout fiddling...

This commit is contained in:
Nicolò P 2023-08-29 09:19:36 +02:00
parent 3931e8f0d1
commit 41508af91e
4 changed files with 16 additions and 11 deletions

4
.gitignore vendored
View File

@ -1,3 +1,5 @@
*.zip *.zip
SVG_* SVG_*
etichetta.png etichetta.png
*.swp
*.swo

View File

@ -1,5 +1,5 @@
h1 { h1 {
margin-top: 3rem; margin-top: 1.5rem;
} }
canvas { canvas {
margin: 0 auto; margin: 0 auto;
@ -28,4 +28,7 @@ footer {
.main { .main {
width: 65vw; width: 65vw;
} }
} }
.preview {
margin-bottom: 10px;
}

View File

@ -32,10 +32,10 @@
</button> </button>
</div> </div>
<div class="column col-lg-5 col-xl-4 col-sm-12 text-center" style="border: #ccc 1px solid;"> <div class="column col-lg-5 col-xl-4 col-sm-12 text-center" style="border: #ccc 1px solid;">
<canvas id="qrcode" width="244" height="468"> <canvas id="qrcode" width="244" height="458">
Etichetta strumento Etichetta strumento
</canvas> </canvas>
<p class="text-center">Anteprima</p> <p class="text-center preview">Anteprima</p>
</div> </div>
</div> </div>
</div> </div>
@ -44,4 +44,4 @@
</footer> </footer>
</body> </body>
</html> </html>

View File

@ -28,19 +28,19 @@ document.addEventListener('DOMContentLoaded', () => {
// Draw images // Draw images
ispcLogo.onload = () => { ispcLogo.onload = () => {
ctx.drawImage(ispcLogo, 25, 10, 200, 75) ctx.drawImage(ispcLogo, 25, 30, 200, 75)
} }
qrImg.src = qr.toDataURL(); qrImg.src = qr.toDataURL();
qrImg.onload = () => { qrImg.onload = () => {
ctx.drawImage(qrImg, 25, 90, 200, 200) ctx.drawImage(qrImg, 25, 110, 200, 200)
} }
// Draw instrument ID as text // Draw instrument ID as text
ctx.font = '48px sans-serif'; ctx.font = '48px sans-serif';
ctx.fillText(idInstr, 45, 330); ctx.fillText(idInstr, 45, 350);
erihsLogo.onload = () => { erihsLogo.onload = () => {
ctx.drawImage(erihsLogo, 25, 355, 200, 41) ctx.drawImage(erihsLogo, 25, 375, 200, 41)
} }
download.classList.remove('disabled'); download.classList.remove('disabled');
}); });
@ -56,4 +56,4 @@ document.addEventListener('DOMContentLoaded', () => {
downloadLink.click(); downloadLink.click();
}); });
}); });
}); });