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
+34 -27
View File
@@ -2,57 +2,64 @@
import './layout.css'; import './layout.css';
import favicon from '$lib/assets/favicon.svg'; import favicon from '$lib/assets/favicon.svg';
let {children} = $props(); let { children } = $props();
</script> </script>
<svelte:head> <svelte:head>
<link rel="icon" href={favicon}/> <link rel="icon" href={favicon} />
</svelte:head> </svelte:head>
<header style="height:72px" class="bg-white shadow grid place-content-center"> <div class="flex min-h-dvh flex-col">
<header style="height:72px" class="grid shrink-0 place-content-center bg-white shadow">
<a href="/"> <a href="/">
<img height="33px" src="/logo.svg" alt="logo"/> <img height="33px" src="/logo.svg" alt="logo" />
</a> </a>
</header> </header>
{@render children()}
<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" <div class="flex-1">
style="background-image: url('/footer.svg');background-position: top right; background-size: cover; background-repeat: no-repeat"> {@render children()}
<div class="w-full max-w-360 mx-auto"> </div>
<h2 class="hidden font-bold mb-4">Nominandum GmbH</h2>
<div class="flex flex-row flex-wrap gap-15 text-[14px] leading-5 mx-auto"> <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="mx-auto flex flex-row flex-wrap gap-15 text-[14px] leading-5">
<div> <div>
<a class="underline" href="/impressum">Impressum</a><br/> <a class="underline" href="/impressum">Impressum</a><br />
<a class="underline" href="/datenschutz">Datenschutzerklärung</a><br/> <a class="underline" href="/datenschutz">Datenschutzerklärung</a><br />
</div> </div>
</div> </div>
<div class="hidden flex-row flex-wrap gap-15 text-[14px] leading-5 mx-auto"> <div class="mx-auto hidden flex-row flex-wrap gap-15 text-[14px] leading-5">
<div class="not-sm:hidden"> <div class="not-sm:hidden">
Holstenwall 1<br/> Holstenwall 1<br />
20355 Hamburg<br/> 20355 Hamburg<br />
<br/> <br />
info[at]nom.legal info[at]nom.legal
</div> </div>
<div class="not-sm:hidden"> <div class="not-sm:hidden">
Geschäftsführer Andreas Damke <br/> Geschäftsführer Andreas Damke <br />
AG Hamburg <br/> AG Hamburg <br />
HRB 161778<br/> HRB 161778<br />
UstId. DE321802543 UstId. DE321802543
</div> </div>
<div> <div>
<a class="underline" href="/impressum">Impressum</a><br/> <a class="underline" href="/impressum">Impressum</a><br />
<a class="underline" href="/datenschutz">Datenschutzerklärung</a><br/> <a class="underline" href="/datenschutz">Datenschutzerklärung</a><br />
<a class="underline" href="">Nutzungsbedingungen</a><br/> <a class="underline" href="">Nutzungsbedingungen</a><br />
</div> </div>
<div class="grow"> <div class="grow">
<a class="underline" href="">Instagram</a><br/> <a class="underline" href="">Instagram</a><br />
<a class="underline" href="">LinkedIn</a><br/> <a class="underline" href="">LinkedIn</a><br />
</div> </div>
<div class="self-end text-gray-400"> <div class="self-end text-gray-400">
&copy; 2018-{new Date().getFullYear()} all rights reserved.<br/> &copy; 2018-{new Date().getFullYear()} all rights reserved.<br />
Nominandum is a protected trademark. Nominandum is a protected trademark.
</div> </div>
</div> </div>
</div> </div>
</footer> </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([]); 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 }) => { test('merge accepts dropped PDFs and downloads a merged PDF', async ({ page }) => {
const pageErrors = trackPageErrors(page); const pageErrors = trackPageErrors(page);
await page.goto('/tools/merge'); await page.goto('/tools/merge');