mkrieger/asn-qr-code-label-generator
1
0
Fork 0
mirror of https://github.com/tmaier/asn-qr-code-label-generator.git synced 2026-03-14 16:43:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix wdith & hight of list item due to box model #4

Browse source
This commit is contained in:
Tobias Ludwig Maier 2024-04-25 00:09:58 +02:00
parent 7aeeba0167
commit 3878e691a4
1 changed files with 18 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

34
index.html
View file

@ -199,29 +199,31 @@
<!-- Display QR Code Labels --> <!-- Display QR Code Labels -->
<ol class="grid grid-cols-7 gap-x-[2.5mm]"> <ol class="grid grid-cols-7 gap-x-[2.5mm]">
<template x-for="label in labels"> <template x-for="label in labels">
<li <li class="flex h-[10mm] w-[25.4mm] items-center">
class="flex h-[10mm] w-[25.4mm] items-center border-[0.5mm] p-[0.5mm] odd:border-blue-500 even:border-red-300"
:class="{'even:border-transparent odd:border-transparent': !borderToggle}"
>
<img
:src="label.qrCodeUrl"
alt=""
width="100"
height="100"
class="mr-[1mm] aspect-square h-[8mm] w-[8mm] flex-none"
referrerpolicy="no-referrer"
/>
<div <div
class="flex-grow" class="border-[0.5mm] p-[0.5mm] odd:border-blue-500 even:border-red-300"
:class="{ :class="{'even:border-transparent odd:border-transparent': !borderToggle}"
>
<img
:src="label.qrCodeUrl"
alt=""
width="100"
height="100"
class="mr-[1mm] aspect-square h-[8mm] w-[8mm] flex-none"
referrerpolicy="no-referrer"
/>
<div
class="flex-grow"
:class="{
'text-[3.9mm]': label.text.length <= 6, 'text-[3.9mm]': label.text.length <= 6,
'text-[3.2mm]': label.text.length == 7, 'text-[3.2mm]': label.text.length == 7,
'text-[2.7mm]': label.text.length == 8, 'text-[2.7mm]': label.text.length == 8,
'text-[2.4mm]': label.text.length == 9, 'text-[2.4mm]': label.text.length == 9,
'text-[2.1mm]': label.text.length >= 10, 'text-[2.1mm]': label.text.length >= 10,
}" }"
x-text="label.text" x-text="label.text"
></div> ></div>
</div>
</li> </li>
</template> </template>
</ol> </ol>