rehlert/bea-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout footer fix
Build and Push Docker Image / build (push) Successful in 41s
Details

Browse Source
This commit is contained in:
rehlert
2026-08-27 09:48:36 +02:00
parent 037050e1c1
commit 2b22fcb0e8
2 changed files with 72 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+56 -49
View File
@@ -1,58 +1,65 @@
<script lang="ts">
import './layout.css';
import favicon from '$lib/assets/favicon.svg';
import './layout.css';
import favicon from '$lib/assets/favicon.svg';
let {children} = $props();
let { children } = $props();
</script>
<svelte:head>
<link rel="icon" href={favicon}/>
<link rel="icon" href={favicon} />
</svelte:head>
<header style="height:72px" class="bg-white shadow grid place-content-center">
<a href="/">
<img height="33px" src="/logo.svg" alt="logo"/>
</a>
</header>
{@render children()}
<div class="flex min-h-dvh flex-col">
<header style="height:72px" class="grid shrink-0 place-content-center bg-white shadow">
<a href="/">
<img height="33px" src="/logo.svg" alt="logo" />
</a>
</header>
<footer class="flex flex-col justify-end gap-15 min-h-78.5 h-96 px-4 mt-8.75 text-white py-8.75"
style="background-image: url('/footer.svg');background-position: top right; background-size: cover; background-repeat: no-repeat">
<div class="w-full max-w-360 mx-auto">
<h2 class="hidden font-bold mb-4">Nominandum GmbH</h2>
<div class="flex-1">
{@render children()}
</div>
<div class="flex flex-row flex-wrap gap-15 text-[14px] leading-5 mx-auto">
<div>
<a class="underline" href="/impressum">Impressum</a><br/>
<a class="underline" href="/datenschutz">Datenschutzerklärung</a><br/>
</div>
</div>
<footer
class="mt-8.75 flex h-96 min-h-78.5 shrink-0 flex-col justify-end gap-15 px-4 py-8.75 text-white"
style="background-image: url('/footer.svg');background-position: top right; background-size: cover; background-repeat: no-repeat"
>
<div class="mx-auto w-full max-w-360">
<h2 class="mb-4 hidden font-bold">Nominandum GmbH</h2>
<div class="hidden flex-row flex-wrap gap-15 text-[14px] leading-5 mx-auto">
<div class="not-sm:hidden">
Holstenwall 1<br/>
20355 Hamburg<br/>
<br/>
info[at]nom.legal
</div>
<div class="not-sm:hidden">
Geschäftsführer Andreas Damke <br/>
AG Hamburg <br/>
HRB 161778<br/>
UstId. DE321802543
</div>
<div>
<a class="underline" href="/impressum">Impressum</a><br/>
<a class="underline" href="/datenschutz">Datenschutzerklärung</a><br/>
<a class="underline" href="">Nutzungsbedingungen</a><br/>
</div>
<div class="grow">
<a class="underline" href="">Instagram</a><br/>
<a class="underline" href="">LinkedIn</a><br/>
</div>
<div class="self-end text-gray-400">
&copy; 2018-{new Date().getFullYear()} all rights reserved.<br/>
Nominandum is a protected trademark.
</div>
</div>
</div>
</footer>
<div class="mx-auto flex flex-row flex-wrap gap-15 text-[14px] leading-5">
<div>
<a class="underline" href="/impressum">Impressum</a><br />
<a class="underline" href="/datenschutz">Datenschutzerklärung</a><br />
</div>
</div>
<div class="mx-auto hidden flex-row flex-wrap gap-15 text-[14px] leading-5">
<div class="not-sm:hidden">
Holstenwall 1<br />
20355 Hamburg<br />
<br />
info[at]nom.legal
</div>
<div class="not-sm:hidden">
Geschäftsführer Andreas Damke <br />
AG Hamburg <br />
HRB 161778<br />
UstId. DE321802543
</div>
<div>
<a class="underline" href="/impressum">Impressum</a><br />
<a class="underline" href="/datenschutz">Datenschutzerklärung</a><br />
<a class="underline" href="">Nutzungsbedingungen</a><br />
</div>
<div class="grow">
<a class="underline" href="">Instagram</a><br />
<a class="underline" href="">LinkedIn</a><br />
</div>
<div class="self-end text-gray-400">
&copy; 2018-{new Date().getFullYear()} all rights reserved.<br />
Nominandum is a protected trademark.
</div>
</div>
</div>
</footer>
</div>
tests/e2e/toolbox.spec.ts
+16
View File
@@ -97,6 +97,22 @@ test('start page exposes only working tools and forwards a dropped ZIP to beA',
expect(pageErrors).toEqual([]);
});
test('short tool pages keep the footer flush with the viewport bottom', async ({ page }) => {
const expectFooterAtViewportBottom = async (viewport: { width: number; height: number }) => {
await page.setViewportSize(viewport);
await page.goto('/tools/watermark');
const footerBottom = await page.locator('footer').evaluate((footer) => {
return footer.getBoundingClientRect().bottom;
});
expect(Math.abs(footerBottom - viewport.height)).toBeLessThanOrEqual(1);
};
await expectFooterAtViewportBottom({ width: 1440, height: 900 });
await expectFooterAtViewportBottom({ width: 390, height: 844 });
});
test('merge accepts dropped PDFs and downloads a merged PDF', async ({ page }) => {
const pageErrors = trackPageErrors(page);
await page.goto('/tools/merge');