refactor(print): Adjusted size of elements when printed to avoid wasting paper

This commit is contained in:
Nicolai Ort 2025-04-25 13:41:45 +02:00
parent 6f144d42af
commit a96551cdd0
Signed by: niggl
GPG Key ID: 13AFA55AF62F269F
2 changed files with 8 additions and 8 deletions

View File

@ -20,7 +20,7 @@
{:else} {:else}
<Login /> <Login />
{/if} {/if}
<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none print:absolute print:bottom-auto print:text-lg"> <div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none print:absolute print:bottom-auto print:text-sm">
{#if $userState.isLoggedIn} {#if $userState.isLoggedIn}
<span class="print:hidden"> <span class="print:hidden">
<b class="font-bold">LfK!2025</b> powered by <b class="font-bold">LfK!2025</b> powered by

View File

@ -313,30 +313,30 @@
</form> </form>
<!-- End Form --> <!-- End Form -->
{:else} {:else}
<div class="mb-2 text-center"> <div class="mb-2 text-center print:mb-0">
<h3 class="text-4xl font-semibold dark:text-white print:text-3xl"> <h3 class="text-4xl font-semibold dark:text-white print:text-2xl/tight">
{response.firstname} {response.firstname}
{response.lastname} {response.lastname}
</h3> </h3>
<h4 class="font-semibold dark:text-white hidden print:block print:text-xl"> <h4 class="font-semibold dark:text-white hidden print:block print:text-lg/tight">
{response.id} {response.id}
</h4> </h4>
</div> </div>
<div class="mb-2 text-center"> <div class="mb-2 text-center print:mb-0">
<h3 class="text-xl font-semibold dark:text-white print:hidden"> <h3 class="text-xl font-semibold dark:text-white print:hidden">
Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine
Rundenzeiten, Spenden und Urkunden. Rundenzeiten, Spenden und Urkunden.
</h3> </h3>
<h3 class="text-lg font-semibold dark:text-white hidden print:block"> <h3 class="text-base/tight font-semibold dark:text-white hidden print:block">
Zeige diesen QR-Code am Infozelt vor, um deine Läuferkarte zu erhalten. Zeige diesen QR-Code am Infozelt vor, um deine Läuferkarte zu erhalten.
</h3> </h3>
<img <img
class="w-full md:w-auto mb-2 mx-auto bg-white p-4" class="w-full md:w-auto mb-2 mx-auto bg-white p-4 print:w-3/5 print:p-0"
alt="runner selfservice" alt="runner selfservice"
src={textToBase64Barcode(response.selfserviceLink.toString(), true)} src={textToBase64Barcode(response.selfserviceLink.toString(), true)}
/> />
<h3 class="text-lg font-semibold dark:text-white hidden print:block"> <h3 class="text-base/tight font-semibold dark:text-white hidden print:block">
Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine
Rundenzeiten, Spenden und Urkunden. Rundenzeiten, Spenden und Urkunden.
</h3> </h3>