diff --git a/src/elements/map-container/map-container.scss b/src/elements/map-container/map-container.scss index 2a7aa46b0d..376da59082 100644 --- a/src/elements/map-container/map-container.scss +++ b/src/elements/map-container/map-container.scss @@ -18,6 +18,7 @@ --sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius) ); + --sbb-map-container-mobile-sticky-block-start: 0; @include sbb.mq($from: small) { --sbb-map-container-map-height: calc( @@ -106,6 +107,7 @@ // We use "to: medium" to avoid resetting the styles @include sbb.mq($to: medium) { + inset-block-start: var(--sbb-map-container-mobile-sticky-block-start); height: var(--sbb-map-container-map-height); } diff --git a/src/elements/map-container/map-container.stories.ts b/src/elements/map-container/map-container.stories.ts index 83e901e9d3..5342657986 100644 --- a/src/elements/map-container/map-container.stories.ts +++ b/src/elements/map-container/map-container.stories.ts @@ -82,14 +82,12 @@ export const MapContainer: StoryObj = { const meta: Meta = { decorators: [ (story) => html` -
- - - Menu - - - ${story()} -
+ + + Menu + + + ${story()} `, ], parameters: { diff --git a/src/elements/map-container/map-container.ts b/src/elements/map-container/map-container.ts index b8c23268ef..23d0fe04bc 100644 --- a/src/elements/map-container/map-container.ts +++ b/src/elements/map-container/map-container.ts @@ -20,6 +20,10 @@ import '../button/tertiary-button.js'; * For specific use cases, this variable can be used to modify the preset height. * @cssprop [--sbb-map-container-sidebar-width=zero-large:400px;wide-ultra:480px] - Can be used * to modify the width of the left sidebar. + * @cssprop [--sbb-map-container-mobile-sticky-block-start=0] - If e.g. a header with a fixed height + * is placed before the map-container, the map should be sticky respecting + * this offset from the document's top. Only applied on mobile views. + * Most commonly it can be set to `var(--sbb-header-height)`. */ @customElement('sbb-map-container') export class SbbMapContainerElement extends LitElement { diff --git a/src/elements/map-container/map-container.visual.spec.ts b/src/elements/map-container/map-container.visual.spec.ts index bdf364d1d8..e4b70f5995 100644 --- a/src/elements/map-container/map-container.visual.spec.ts +++ b/src/elements/map-container/map-container.visual.spec.ts @@ -1,4 +1,4 @@ -import { html } from 'lit'; +import { html, nothing, type TemplateResult } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; import { describeViewports, visualDiffDefault } from '../core/testing/private.js'; @@ -8,57 +8,87 @@ import '../header.js'; import '../title.js'; describe(`sbb-map-container`, () => { + const template = (stickyOffset = false): TemplateResult => html` + + + Menu + + + + +
+ Operations & Disruptions + ${[...Array(5).keys()].map( + (value) => html` +
+

Situation ${value}

+
+ `, + )} +
+ +
+
+ map +
+
+ + `; + + beforeEach(() => { + // Reset page scrolling + window.scrollTo(0, 0); + }); + describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 500 }, () => { it( visualDiffDefault.name, visualDiffDefault.with(async (setup) => { - await setup.withFixture( - html` - - - Menu - - - - -
- Operations & Disruptions - ${[...Array(5).keys()].map( - (value) => html` -
-

Situation ${value}

-
- `, - )} -
+ await setup.withFixture(template(), { padding: '0' }); + }), + ); + }); + + describeViewports({ viewports: ['zero'], viewportHeight: 500 }, () => { + it( + 'scrolled without sticky offset', + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template(), { padding: '0' }); + setup.withPostSetupAction(() => { + window.scrollTo(0, 100); + }); + }), + ); -
-
- map -
-
- - `, - { padding: '0' }, - ); + it( + 'scrolled with sticky offset', + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template(true), { padding: '0' }); + setup.withPostSetupAction(() => { + window.scrollTo(0, 100); + }); }), ); }); diff --git a/src/elements/map-container/readme.md b/src/elements/map-container/readme.md index bb343c8cf7..c7bdbf94b9 100644 --- a/src/elements/map-container/readme.md +++ b/src/elements/map-container/readme.md @@ -24,10 +24,11 @@ On desktop, the sidebar and the map are shown in a two column layout side by sid ## CSS Properties -| Name | Default | Description | -| ----------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--sbb-map-container-margin-start` | `var(--sbb-header-height)` | The component comes along with a height calculation that subtracts the height of the header. For specific use cases, this variable can be used to modify the preset height. | -| `--sbb-map-container-sidebar-width` | `zero-large:400px;wide-ultra:480px` | Can be used to modify the width of the left sidebar. | +| Name | Default | Description | +| ----------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `--sbb-map-container-margin-start` | `var(--sbb-header-height)` | The component comes along with a height calculation that subtracts the height of the header. For specific use cases, this variable can be used to modify the preset height. | +| `--sbb-map-container-mobile-sticky-block-start` | `0` | If e.g. a header with a fixed height is placed before the map-container, the map should be sticky respecting this offset from the document's top. Only applied on mobile views. Most commonly it can be set to `var(--sbb-header-height)`. | +| `--sbb-map-container-sidebar-width` | `zero-large:400px;wide-ultra:480px` | Can be used to modify the width of the left sidebar. | ## Slots