lfg2025/kaiser-natron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile fold stitch fix

Browse Source
This commit is contained in:
Dorian
2026-04-22 10:51:21 +01:00
parent 6b92eb5474
commit e63157923c
6 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/assets/HomePage-BKZgLXIS.js vendored Normal file
View File

@@ -0,0 +1 @@
import{A as e,S as t,W as n,ct as r,m as i,p as a,r as o,s,u as c,x as l,z as u}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as d}from"./i18n-BxXwPz8H.js";import{n as f}from"./products-C8C_GS-z.js";import{a as p,i as m,o as h,r as g,t as _}from"./api-4Jnm40kQ.js";import{t as v}from"./Navbar-DKyzh9Gc.js";import{t as y}from"./Hero-BlnQ4ovQ.js";import{t as b}from"./CartDrawer-CbYC7UR_.js";var x={class:`flex flex-col bg-brand md:h-svh md:overflow-hidden`},S={class:`md:flex-1 md:flex md:items-center`},C={class:`italic font-light text-accent-soft`},w={class:`italic font-light text-brand-soft`},T=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview-2.png`,E=`kaiser-natron-pulver-250-g-grosspackung`,D=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png`,O=`kaiser-natron-pulver-250-g-grosspackung`,k={__name:`HomePage`,setup(k){let{t:A}=d(),j=h(),M=u(!1);async function N(){await _(E,1),M.value=!0}async function P(){await _(O,1),M.value=!0}async function F({productId:e,quantity:t}){await p(e,t)}async function I(e){await m(e)}async function L(e){await _(e.id,1),M.value=!0}return l(()=>{g()}),(l,u)=>(t(),c(o,null,[s(`div`,x,[i(v,{variant:`brand`,layout:`standard`,"cart-count":n(j).count,products:n(f),onCart:u[0]||=e=>M.value=!0,onSearch:L},null,8,[`cart-count`,`products`]),s(`div`,S,[i(y,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:n(A)(`ds.hero.eyebrow`),subheadline:n(A)(`ds.hero.sub`),image:T,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(A)(`ds.buttons.addToCart`),"secondary-label":n(A)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:N},{headline:e(()=>[a(r(n(A)(`ds.hero.headline.a`))+` `,1),s(`em`,C,r(n(A)(`ds.hero.headline.em`)),1),a(` `+r(n(A)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])]),u[3]||=s(`svg`,{"aria-hidden":`true`,class:`block w-full h-12 md:h-16 shrink-0`,viewBox:`0 0 1440 64`,preserveAspectRatio:`none`},[s(`path`,{d:`M0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,64 L0,64 Z`,fill:`var(--color-cream)`})],-1)]),i(y,{variant:`split`,tone:`cream`,reverse:``,eyebrow:n(A)(`home.banner.eyebrow`),subheadline:n(A)(`home.banner.sub`),image:D,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(A)(`ds.buttons.addToCart`),"secondary-label":n(A)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:P},{headline:e(()=>[a(r(n(A)(`home.banner.headline.a`))+` `,1),s(`em`,w,r(n(A)(`home.banner.headline.em`)),1),a(` `+r(n(A)(`home.banner.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`]),u[4]||=s(`div`,{"aria-hidden":`true`,class:`md:hidden`,style:{height:`calc(100px + env(safe-area-inset-bottom))`}},null,-1),i(b,{modelValue:M.value,"onUpdate:modelValue":u[1]||=e=>M.value=e,items:n(j).items,subtotal:n(j).subtotal,count:n(j).count,onUpdateQuantity:F,onRemove:I,onCheckout:u[2]||=e=>M.value=!1},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64))}};export{k as default};

1
dist/assets/HomePage-DNF8L0v1.js vendored
View File

@@ -1 +0,0 @@
import{A as e,S as t,W as n,ct as r,m as i,p as a,r as o,s,u as c,x as l,z as u}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as d}from"./i18n-BxXwPz8H.js";import{n as f}from"./products-C8C_GS-z.js";import{a as p,i as m,o as h,r as g,t as _}from"./api-4Jnm40kQ.js";import{t as v}from"./Navbar-DKyzh9Gc.js";import{t as y}from"./Hero-BlnQ4ovQ.js";import{t as b}from"./CartDrawer-CbYC7UR_.js";var x={class:`h-svh flex flex-col bg-brand overflow-hidden`},S={class:`flex-1 flex items-center`},C={class:`italic font-light text-accent-soft`},w={class:`italic font-light text-brand-soft`},T=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview-2.png`,E=`kaiser-natron-pulver-250-g-grosspackung`,D=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png`,O=`kaiser-natron-pulver-250-g-grosspackung`,k={__name:`HomePage`,setup(k){let{t:A}=d(),j=h(),M=u(!1);async function N(){await _(E,1),M.value=!0}async function P(){await _(O,1),M.value=!0}async function F({productId:e,quantity:t}){await p(e,t)}async function I(e){await m(e)}async function L(e){await _(e.id,1),M.value=!0}return l(()=>{g()}),(l,u)=>(t(),c(o,null,[s(`div`,x,[i(v,{variant:`brand`,layout:`standard`,"cart-count":n(j).count,products:n(f),onCart:u[0]||=e=>M.value=!0,onSearch:L},null,8,[`cart-count`,`products`]),s(`div`,S,[i(y,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:n(A)(`ds.hero.eyebrow`),subheadline:n(A)(`ds.hero.sub`),image:T,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(A)(`ds.buttons.addToCart`),"secondary-label":n(A)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:N},{headline:e(()=>[a(r(n(A)(`ds.hero.headline.a`))+` `,1),s(`em`,C,r(n(A)(`ds.hero.headline.em`)),1),a(` `+r(n(A)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])]),u[3]||=s(`svg`,{"aria-hidden":`true`,class:`block w-full h-12 md:h-16 shrink-0`,viewBox:`0 0 1440 64`,preserveAspectRatio:`none`},[s(`path`,{d:`M0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,64 L0,64 Z`,fill:`var(--color-cream)`})],-1)]),i(y,{variant:`split`,tone:`cream`,reverse:``,eyebrow:n(A)(`home.banner.eyebrow`),subheadline:n(A)(`home.banner.sub`),image:D,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(A)(`ds.buttons.addToCart`),"secondary-label":n(A)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:P},{headline:e(()=>[a(r(n(A)(`home.banner.headline.a`))+` `,1),s(`em`,w,r(n(A)(`home.banner.headline.em`)),1),a(` `+r(n(A)(`home.banner.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`]),u[4]||=s(`div`,{"aria-hidden":`true`,class:`md:hidden`,style:{height:`calc(100px + env(safe-area-inset-bottom))`}},null,-1),i(b,{modelValue:M.value,"onUpdate:modelValue":u[1]||=e=>M.value=e,items:n(j).items,subtotal:n(j).subtotal,count:n(j).count,onUpdateQuantity:F,onRemove:I,onCheckout:u[2]||=e=>M.value=!1},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64))}};export{k as default};

4
dist/assets/index-Bs7tH0wK.js → dist/assets/index-BRTSWcA3.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/index-RhrqUSdw.css → dist/assets/index-BTEwtQXE.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@@ -12,13 +12,13 @@
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
rel="stylesheet"
/>
<script type="module" crossorigin src="/assets/index-Bs7tH0wK.js"></script>
<script type="module" crossorigin src="/assets/index-BRTSWcA3.js"></script>
<link rel="modulepreload" crossorigin href="/assets/_plugin-vue_export-helper-BOai-rQB.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DgkFZzbt.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-ouKdkQwB.js">
<link rel="modulepreload" crossorigin href="/assets/pinia-BLnSyg0Y.js">
<link rel="modulepreload" crossorigin href="/assets/vue-router-BUTR8NmK.js">
<link rel="stylesheet" crossorigin href="/assets/index-RhrqUSdw.css">
<link rel="stylesheet" crossorigin href="/assets/index-BTEwtQXE.css">
</head>
<body>
<div id="app"></div>

15
src/pages/HomePage.vue
View File

@@ -59,11 +59,14 @@ onMounted(() => {
</script>
<template>
<!-- First-fold layout: wrapper is exactly viewport height (svh keeps mobile
browser chrome from pushing content off-screen). The centering row
below the navbar takes the remaining space and vertically centers the
hero, so the hero sits in the middle of (viewport - navbar). -->
<div class="h-svh flex flex-col bg-brand overflow-hidden">
<!-- First fold — on md+ the wrapper is exactly one viewport tall and the
centering row below the navbar vertically centres the hero inside
the remaining space. On mobile the Hero's stacked split layout
(image + copy + CTAs) is taller than a phone viewport, so we drop
the height cap and let the section flow at its natural height;
otherwise `overflow-hidden` clips the CTAs, which is what the
mobile screenshot showed. -->
<div class="flex flex-col bg-brand md:h-svh md:overflow-hidden">
<Navbar
variant="brand"
layout="standard"
@@ -73,7 +76,7 @@ onMounted(() => {
@search="onSearchSelect"
/>
<div class="flex-1 flex items-center">
<div class="md:flex-1 md:flex md:items-center">
<Hero
class="w-full"
variant="split"