hr-design-system-handlebars 1.12.3 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/dist/assets/index.css +69 -36
- package/dist/assets/vendor/js/header.alpine.js +10 -2
- package/dist/assets/vendor/js/horizontal_scroll_container.alpine.js +30 -0
- package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +22 -0
- package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +9 -0
- package/dist/views/components/site_header/brand_navigation/brand_navigation.hbs +7 -61
- package/dist/views/components/site_header/brand_navigation/brand_navigation_item.hbs +2 -2
- package/dist/views/components/site_header/header.hbs +4 -4
- package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs +3 -4
- package/dist/views/components/site_header/section_navigation/section_navigation.hbs +24 -21
- package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs +3 -2
- package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +4 -4
- package/package.json +1 -1
- package/src/assets/css/custom-utilities.css +2 -2
- package/src/assets/fixtures/site_header/site_header_mit_top_topics.json +1 -1
- package/src/assets/fixtures/site_header/topTopicsNavigation.inc.json +11 -0
- package/src/assets/tailwind.css +8 -0
- package/src/assets/vendor/js/header.alpine.js +10 -2
- package/src/assets/vendor/js/horizontal_scroll_container.alpine.js +30 -0
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +22 -0
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.mdx +30 -0
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.stories.js +33 -0
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +9 -0
- package/src/stories/views/components/page/page.data.js +6 -2
- package/src/stories/views/components/page/page.stories.js +8 -0
- package/src/stories/views/components/site_header/brand_navigation/brand_navigation.hbs +7 -61
- package/src/stories/views/components/site_header/brand_navigation/brand_navigation_item.hbs +2 -2
- package/src/stories/views/components/site_header/fixtures/site_header_mit_top_topics.json +1 -1
- package/src/stories/views/components/site_header/header.hbs +4 -4
- package/src/stories/views/components/site_header/header.mdx +3 -18
- package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs +3 -4
- package/src/stories/views/components/site_header/section_navigation/section_navigation.hbs +24 -21
- package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs +3 -2
- package/src/stories/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +4 -4
- package/tailwind.config.js +1 -0
|
@@ -12,11 +12,22 @@
|
|
|
12
12
|
{
|
|
13
13
|
"title": "Unwetter",
|
|
14
14
|
"text": "Unwetter",
|
|
15
|
+
"selected": true,
|
|
15
16
|
"link": {
|
|
16
17
|
"url": "http://www.Unwetter.de",
|
|
17
18
|
"hasIcon": false,
|
|
18
19
|
"iconName": "extern"
|
|
19
20
|
}
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"title": "Lottozahlen",
|
|
24
|
+
"text": "Lottozahlen",
|
|
25
|
+
"selected": false,
|
|
26
|
+
"link": {
|
|
27
|
+
"url": "http://www.Lotto.de",
|
|
28
|
+
"hasIcon": false,
|
|
29
|
+
"iconName": "extern"
|
|
30
|
+
}
|
|
20
31
|
}
|
|
21
32
|
]
|
|
22
33
|
}
|
package/src/assets/tailwind.css
CHANGED
|
@@ -874,6 +874,14 @@
|
|
|
874
874
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
|
|
875
875
|
transition: transform 150ms ease-in-out 0s;
|
|
876
876
|
}
|
|
877
|
+
.arrow-left-background-blue {
|
|
878
|
+
background: linear-gradient(to left, rgba(255, 255, 255, 0),theme('colors.blue.congress') 50%);
|
|
879
|
+
transition: transform 150ms ease-in-out 0s;
|
|
880
|
+
}
|
|
881
|
+
.arrow-right-background-blue {
|
|
882
|
+
background: linear-gradient(to right, rgba(255, 255, 255, 0), theme('colors.blue.congress') 50%);
|
|
883
|
+
transition: transform 150ms ease-in-out 0s;
|
|
884
|
+
}
|
|
877
885
|
.c-videoplayer .ardplayer {
|
|
878
886
|
position: absolute;
|
|
879
887
|
top: 0;
|
|
@@ -31,7 +31,7 @@ document.addEventListener('alpine:init', () => {
|
|
|
31
31
|
}, wait)
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
|
-
|
|
34
|
+
start() {
|
|
35
35
|
let lastScrollTop = 0
|
|
36
36
|
let height = window.innerHeight
|
|
37
37
|
|
|
@@ -281,7 +281,15 @@ document.addEventListener('alpine:init', () => {
|
|
|
281
281
|
toggle() {
|
|
282
282
|
this.dropped = !this.dropped
|
|
283
283
|
},
|
|
284
|
-
|
|
284
|
+
correctFlyoutPos(){
|
|
285
|
+
if(this.$screen('lg')){
|
|
286
|
+
let elementBoundingClientRec = this.$el.getBoundingClientRect()
|
|
287
|
+
let parentElementBoundingClientRec = this.$el.closest(".relative").getBoundingClientRect()
|
|
288
|
+
this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left = (elementBoundingClientRec.left - Math.abs(parentElementBoundingClientRec.left))+"px";
|
|
289
|
+
} else {
|
|
290
|
+
this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left = "0px";
|
|
291
|
+
}
|
|
292
|
+
},
|
|
285
293
|
// toggles visibility of service nav and sets global variables in stores
|
|
286
294
|
toggleServiceNav() {
|
|
287
295
|
this.dropped = !this.dropped
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export default function slider() {
|
|
2
|
+
|
|
3
|
+
return {
|
|
4
|
+
isScrollable:false,
|
|
5
|
+
arrowLeftDisplay:false,
|
|
6
|
+
arrowRightDisplay:true,
|
|
7
|
+
|
|
8
|
+
arrowsDisplay(e) {
|
|
9
|
+
e.scrollLeft > 1 ? this.arrowLeftDisplay=true : this.arrowLeftDisplay=false;
|
|
10
|
+
e.scrollLeft + e.offsetWidth >= e.scrollWidth ? this.arrowRightDisplay=false : this.arrowRightDisplay=true;
|
|
11
|
+
},
|
|
12
|
+
|
|
13
|
+
prev(e) {
|
|
14
|
+
e.scrollLeft -= 200;
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
next(e) {
|
|
18
|
+
e.scrollLeft += 200;
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
updateIndex(e) {
|
|
22
|
+
this.arrowsDisplay(e);
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
checkIfScrollable(e){
|
|
26
|
+
e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;
|
|
27
|
+
this.arrowsDisplay(e);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<div x-data="slider()"
|
|
2
|
+
x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
|
|
3
|
+
@resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
|
|
4
|
+
class="relative w-full"
|
|
5
|
+
ax-load
|
|
6
|
+
x-ignore
|
|
7
|
+
ax-load-src={{resourceUrl "assets/js/vendor/horizontal_scroll_container.alpine.js" }}
|
|
8
|
+
>
|
|
9
|
+
<template x-if="isScrollable && $screen('{{_viewport}}')">
|
|
10
|
+
<div>
|
|
11
|
+
<button class="{{#if _onDarkBackground}}arrow-left-background-blue{{else}}arrow-left-background{{/if}} absolute z-10 left-0 flex items-center justify-start w-8 h-full disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
|
|
12
|
+
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-blue-congress') }}
|
|
13
|
+
</button>
|
|
14
|
+
<button class="{{#if _onDarkBackground}}arrow-right-background-blue{{else}}arrow-right-background{{/if}} absolute z-10 right-0 flex items-center justify-end w-8 h-full group disabled:hidden" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
|
|
15
|
+
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-blue-congress') }}
|
|
16
|
+
</button>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
<div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
|
|
20
|
+
{{> @partial-block }}
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.mdx
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Meta, Story, Canvas, Preview } from '@storybook/blocks'
|
|
2
|
+
import * as ScrollContainerStories from './horizontal_scroll_container.stories'
|
|
3
|
+
|
|
4
|
+
<Meta of={ScrollContainerStories} />
|
|
5
|
+
|
|
6
|
+
# Horizontal Scroll Container
|
|
7
|
+
|
|
8
|
+
<Canvas>
|
|
9
|
+
<Story of={ScrollContainerStories.Example} />
|
|
10
|
+
</Canvas>
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## Beschreibung
|
|
14
|
+
|
|
15
|
+
Diese Komponente stellt einen Inhalts-Slider dar, dessen Inhalt via Pfeiltasten horizontal scrollbar wird, sobald er die Breite des Containers übersteigt.
|
|
16
|
+
Die Komponente wird als Decorator benutzt, d.h. der zu scrollende Inhalt wird innerhalb des Templates via <b>@partial-block</b> ausgegeben. <br /><br />
|
|
17
|
+
Der Übergabeparameter "<b>_viewport</b>" ist ein String und legt die Viewportgröße fest, ab der die Komponente aktiv wird ('xs','sm','md','lg'). <br />
|
|
18
|
+
Der Übergabeparameter "<b>_onDarkBackground</b>" ist ein boolscher Wert mit dem die Farben der Pfeiltasten gesteuert werden können.<br />
|
|
19
|
+
|
|
20
|
+
<br />
|
|
21
|
+
|
|
22
|
+
Die Komponente wird in handlebars wie folgt eingebaut:
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
|
|
26
|
+
Zu scrollender Inhalt / Komponente / etc
|
|
27
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Derzeit wird diese Komponente auf hessenschau.de in der Brand-Navigation und der Section-Navigation eingesetzt.
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import horizontal_scroll_container from './horizontal_scroll_container_example.hbs'
|
|
2
|
+
|
|
3
|
+
const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
4
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
5
|
+
// return `<div>${label}</div>`;
|
|
6
|
+
let brand =
|
|
7
|
+
undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
|
|
8
|
+
return horizontal_scroll_container({ brand, ...args })
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export default {
|
|
12
|
+
title: 'Komponenten/Utilities/Horizontal Scroll Container',
|
|
13
|
+
argTypes: {},
|
|
14
|
+
|
|
15
|
+
parameters: {
|
|
16
|
+
chromatic: {
|
|
17
|
+
viewports: [360, 768, 1024],
|
|
18
|
+
},
|
|
19
|
+
|
|
20
|
+
layout: 'fullscreen',
|
|
21
|
+
|
|
22
|
+
docs: {
|
|
23
|
+
inlineStories: true,
|
|
24
|
+
iframeHeight: 400,
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export const Example = {
|
|
30
|
+
render: Template.bind({}),
|
|
31
|
+
name: 'Example',
|
|
32
|
+
args: null,
|
|
33
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<div class="w-full h-auto mb-10">
|
|
2
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
|
|
3
|
+
|
|
4
|
+
<div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-blue-congress">
|
|
5
|
+
<p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist. </p>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
9
|
+
</div>
|
|
@@ -2,8 +2,10 @@ import structuredClone from 'core-js-pure/actual/structured-clone'
|
|
|
2
2
|
import NavigationData from '../site_header/fixtures/site_header_default.json'
|
|
3
3
|
import NavigationData2 from '../site_header/fixtures/site_header_mit_warnung.json'
|
|
4
4
|
import NavigationData3 from '../site_header/fixtures/site_header_mit_submenu.json'
|
|
5
|
+
import NavigationData4 from '../site_header/fixtures/site_header_mit_top_topics.json'
|
|
5
6
|
|
|
6
7
|
import hero_teaser from '../teaser/fixtures/teaser_standard_hero_serif.json'
|
|
8
|
+
|
|
7
9
|
const NavigationDataWithTeaser = structuredClone(
|
|
8
10
|
Object.assign({}, NavigationData, hero_teaser.logicItem.includeModel)
|
|
9
11
|
)
|
|
@@ -13,5 +15,7 @@ const NavigationDataWithTeaser2 = structuredClone(
|
|
|
13
15
|
const NavigationDataWithTeaser3 = structuredClone(
|
|
14
16
|
Object.assign({}, NavigationData3, hero_teaser.logicItem.includeModel)
|
|
15
17
|
)
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
const NavigationDataWithTeaser4 = structuredClone(
|
|
19
|
+
Object.assign({}, NavigationData4, hero_teaser.logicItem.includeModel)
|
|
20
|
+
)
|
|
21
|
+
export { NavigationDataWithTeaser, NavigationDataWithTeaser2, NavigationDataWithTeaser3, NavigationDataWithTeaser4 }
|
|
@@ -3,6 +3,8 @@ import {
|
|
|
3
3
|
NavigationDataWithTeaser,
|
|
4
4
|
NavigationDataWithTeaser2,
|
|
5
5
|
NavigationDataWithTeaser3,
|
|
6
|
+
NavigationDataWithTeaser4
|
|
7
|
+
|
|
6
8
|
} from './page.data.js'
|
|
7
9
|
|
|
8
10
|
const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
@@ -48,3 +50,9 @@ export const MitSubnavigation = {
|
|
|
48
50
|
name: 'Mit Subnavigation',
|
|
49
51
|
args: NavigationDataWithTeaser3,
|
|
50
52
|
}
|
|
53
|
+
|
|
54
|
+
export const MitTopTopics = {
|
|
55
|
+
render: Template.bind({}),
|
|
56
|
+
name: 'Mit Top-Topics',
|
|
57
|
+
args: NavigationDataWithTeaser4,
|
|
58
|
+
}
|
|
@@ -1,22 +1,6 @@
|
|
|
1
|
-
<div
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
class="sb-brand-navigation lg:container w-full md:px-5 lg:px-10 px-3.5 h-10 lg:h-8">
|
|
5
|
-
|
|
6
|
-
<div class="flex justify-center text-xs list-none text-gray-scorpion ">
|
|
7
|
-
|
|
8
|
-
<template x-if="isScrollable">
|
|
9
|
-
<div>
|
|
10
|
-
<button class="absolute left-0 w-12 h-full pt-1 arrow-left-background disabled:hidden" @click="prev($refs.container)" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
|
|
11
|
-
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="pb-1 mr-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current"}}
|
|
12
|
-
</button>
|
|
13
|
-
<button class="absolute right-0 w-12 h-full pt-1 group arrow-right-background disabled:hidden" @click="next($refs.container)" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
|
|
14
|
-
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="pb-1 ml-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current "}}
|
|
15
|
-
</button>
|
|
16
|
-
</div>
|
|
17
|
-
</template>
|
|
18
|
-
|
|
19
|
-
<nav x-ref="container" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-pointer hide-scroll-bar max-h-10 align-center">
|
|
1
|
+
<div class="sb-brand-navigation lg:container w-full md:px-1 lg:px-6 px-3.5 h-10 md:h-8">
|
|
2
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" }}
|
|
3
|
+
<nav class="flex w-full text-xs list-none text-grey-scorpion">
|
|
20
4
|
<span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
|
|
21
5
|
{{#with this.brandNavigationItems}}
|
|
22
6
|
<ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">
|
|
@@ -24,45 +8,7 @@
|
|
|
24
8
|
{{> components/site_header/brand_navigation/brand_navigation_item }}
|
|
25
9
|
{{/each}}
|
|
26
10
|
</ul>
|
|
27
|
-
{{/with}}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<script type="text/javascript">
|
|
35
|
-
|
|
36
|
-
function slider() {
|
|
37
|
-
|
|
38
|
-
return {
|
|
39
|
-
|
|
40
|
-
isScrollable:false,
|
|
41
|
-
arrowLeftDisplay:false,
|
|
42
|
-
arrowRightDisplay:true,
|
|
43
|
-
|
|
44
|
-
arrowsDisplay(e) {
|
|
45
|
-
e.scrollLeft > 1 ? this.arrowLeftDisplay=true : this.arrowLeftDisplay=false;
|
|
46
|
-
e.scrollLeft + e.offsetWidth == e.scrollWidth ? this.arrowRightDisplay=false : this.arrowRightDisplay=true;
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
prev(e) {
|
|
50
|
-
e.scrollLeft -= 200;
|
|
51
|
-
},
|
|
52
|
-
|
|
53
|
-
next(e) {
|
|
54
|
-
e.scrollLeft += 200;
|
|
55
|
-
},
|
|
56
|
-
|
|
57
|
-
updateIndex(e) {
|
|
58
|
-
this.arrowsDisplay(e);
|
|
59
|
-
},
|
|
60
|
-
|
|
61
|
-
checkIfScrollable(e){
|
|
62
|
-
e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;
|
|
63
|
-
this.arrowsDisplay(e);
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
</script>
|
|
11
|
+
{{/with}}
|
|
12
|
+
</nav>
|
|
13
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
14
|
+
</div>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<li class="sb-brand-navigation-item{{#if this.selected}} h-10
|
|
2
|
-
<a class="link-focus-inset leading-10
|
|
1
|
+
<li class="sb-brand-navigation-item{{#if this.selected}} h-10 md:h-8 font-bold text-blue-congress {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-blue-science">
|
|
2
|
+
<a class="link-focus-inset leading-10 md:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
|
|
3
3
|
</li>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"hasOpenSubNavigation":false,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"video-podcast","text":"Video & Podcast","icon":"videopodcast-ds","flyoutStartLinkText":"Übersicht Video & Podcast","selected":false,"isCluster":false,"url":"https://www.video-podcast.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Aktuelle Sendung","text":"Aktuelle Sendung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Archiv - alle Sendungen","text":"Archiv - alle Sendungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Newsflash","text":"Newsflash","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"DAS THEMA","text":"DAS THEMA","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Die hessenschau in 100 Sekunden","text":"Die hessenschau in 100 Sekunden","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Podcasts","text":"Podcasts","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"hessenschau in der ARD Mediathek","text":"hessenschau in der ARD Mediathek","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}],[{"title":"hessenschau auf YouTube","text":"hessenschau auf YouTube","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Livestream hr-fernsehen","text":"Livestream hr-fernsehen","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"weather","text":"Wetter","icon":"wetter-ds","flyoutStartLinkText":"Übersicht Wetter","url":"https://www.weather.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Unwetterwarnungen","text":"Unwetterwarnungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Regenradar","text":"Regenradar","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wolkenfilm","text":"Wolkenfilm","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Messwerte","text":"Messwerte","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterkameras","text":"Wetterkameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterbilder-Galerie","text":"Wetterbilder-Galerie","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"mehr Wetter","text":"mehr Wetter","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}],[{"title":"Thema des Tages","text":"Thema des Tages","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Foto einsenden","text":"Foto einsenden","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"traffic","text":"Verkehr","icon":"verkehr-ds","flyoutStartLinkText":"Übersicht Verkehr","url":"https://www.traffic.de","subNavigation":{"showAsFlyout":true,"columnCount":"1","items":false,"columns":[[{"title":"Verkehrskameras","text":"Verkehrskameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Blitzer","text":"Blitzer","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Schulausfälle","text":"Schulausfälle","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Flugpläne Frankfurt / Parkhausbelegung","text":"Flugpläne Frankfurt / Parkhausbelegung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Werden Sie hr-Staureporter!","text":"Werden Sie hr-Staureporter!","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]}}]}],"
|
|
1
|
+
{"hasOpenSubNavigation":false,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"video-podcast","text":"Video & Podcast","icon":"videopodcast-ds","flyoutStartLinkText":"Übersicht Video & Podcast","selected":false,"isCluster":false,"url":"https://www.video-podcast.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Aktuelle Sendung","text":"Aktuelle Sendung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Archiv - alle Sendungen","text":"Archiv - alle Sendungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Newsflash","text":"Newsflash","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"DAS THEMA","text":"DAS THEMA","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Die hessenschau in 100 Sekunden","text":"Die hessenschau in 100 Sekunden","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Podcasts","text":"Podcasts","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"hessenschau in der ARD Mediathek","text":"hessenschau in der ARD Mediathek","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}],[{"title":"hessenschau auf YouTube","text":"hessenschau auf YouTube","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Livestream hr-fernsehen","text":"Livestream hr-fernsehen","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"weather","text":"Wetter","icon":"wetter-ds","flyoutStartLinkText":"Übersicht Wetter","url":"https://www.weather.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Unwetterwarnungen","text":"Unwetterwarnungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Regenradar","text":"Regenradar","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wolkenfilm","text":"Wolkenfilm","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Messwerte","text":"Messwerte","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterkameras","text":"Wetterkameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterbilder-Galerie","text":"Wetterbilder-Galerie","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"mehr Wetter","text":"mehr Wetter","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}],[{"title":"Thema des Tages","text":"Thema des Tages","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Foto einsenden","text":"Foto einsenden","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"traffic","text":"Verkehr","icon":"verkehr-ds","flyoutStartLinkText":"Übersicht Verkehr","url":"https://www.traffic.de","subNavigation":{"showAsFlyout":true,"columnCount":"1","items":false,"columns":[[{"title":"Verkehrskameras","text":"Verkehrskameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Blitzer","text":"Blitzer","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Schulausfälle","text":"Schulausfälle","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Flugpläne Frankfurt / Parkhausbelegung","text":"Flugpläne Frankfurt / Parkhausbelegung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Werden Sie hr-Staureporter!","text":"Werden Sie hr-Staureporter!","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]}}]}],"topTopicsNavigation":{"items":[{"title":"Corona","text":"Corona","link":{"url":"http://www.Corona.de","hasIcon":false,"iconName":"extern"}},{"title":"Unwetter","text":"Unwetter","selected":true,"link":{"url":"http://www.Unwetter.de","hasIcon":false,"iconName":"extern"}},{"title":"Lottozahlen","text":"Lottozahlen","selected":false,"link":{"url":"http://www.Lotto.de","hasIcon":false,"iconName":"extern"}}]},"sectionNavigationSSILinks":[{"navigationItems":[{"name":"hessenschau","text":"Start","hiddenText":"hessenschau","url":"index.html","labelText":"Startseite der hessenschau","subNavigationFromIndex":true,"selected":true}]},{"navigationItems":[{"name":"regionen","text":"Regionen","url":"rheinmain/index.html","isCluster":"true","subNavigation":{"showAsFlyout":true,"columnCount":"1","columns":[[{"title":"Nordhessen","text":"Nordhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Osthessen","text":"Osthessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Mittelhessen","text":"Mittelhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Rhein-Main","text":"Rhein-Main","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Südhessen","text":"Südhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]},"clusterItems":[{"name":"nordhessen","text":"Nordhessen","url":"nordhessen/index.html"},{"name":"osthessen","text":"Osthessen","url":"osthessen/index.html"},{"name":"mittelhessen","text":"Mittelhessen","url":"mittelhessen/index.html"},{"name":"rheinmain","text":"Rhein-Main","url":"rheinmain/index.html"},{"name":"suedhessen","text":"Südhessen","url":"suedhessen/index.html"}]}]},{"navigationItems":[{"name":"politik","text":"Politik","url":"politik/index.html","qualifiedRelatedContentOn404":true,"isCluster":false,"subNavigation":{"showAsFlyout":false,"columnCount":"1","items":[{"title":"Bundestagswahl 2021","text":"Bundestagswahl 2021","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Landtag","text":"Landtag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Videos aus dem Landtag","text":"Videos aus dem Landtag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wahlen","text":"Wahlen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Direktwahlen","text":"Direktwahlen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]}}]},{"navigationItems":[{"name":"gesellschaft","text":"Gesellschaft","url":"gesellschaft/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"wirtschaft","text":"Wirtschaft","url":"wirtschaft/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"kultur","text":"Kultur","url":"kultur/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"sport","text":"Sport","url":"sport/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"panorama","text":"Panorama","url":"panorama/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"freizeit","text":"Freizeit","url":"freizeit/index.html","qualifiedRelatedContentOn404":true}]}]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="
|
|
1
|
+
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#unless (isStorybook) }} start() {{/unless}} ">
|
|
2
2
|
<header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
5
|
@resize.window="resetNav()"
|
|
6
6
|
:class="shouldBrandNavBeHidden() ? '-mt-10 lg:-mt-8' : '' "
|
|
7
|
-
class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
7
|
+
class="{{#unless (isStorybook) }} fixed top-0 left-0{{/unless}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
8
8
|
|
|
9
9
|
<div id="anchorNavWrapper"
|
|
10
10
|
class="hidden">
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
x-ref="sectionnavigation"
|
|
54
54
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
55
55
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
56
|
-
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-
|
|
57
|
-
>
|
|
56
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"
|
|
57
|
+
>
|
|
58
58
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
59
59
|
</div>
|
|
60
60
|
|
|
@@ -8,7 +8,7 @@ import * as HeaderStories from './header.stories'
|
|
|
8
8
|
[Frameworks](#frameworks) - [Varianten](#varianten) - [Scrollverhalten](#scrollverhalten) - [Templates & Codes](#templates) - [Sub-Komponenten](#subkomponenten)
|
|
9
9
|
|
|
10
10
|
<Canvas>
|
|
11
|
-
|
|
11
|
+
<Story of={HeaderStories.Default} />
|
|
12
12
|
</Canvas>
|
|
13
13
|
|
|
14
14
|
## Beschreibung
|
|
@@ -80,10 +80,6 @@ Mobil:
|
|
|
80
80
|
|
|
81
81
|
<br />
|
|
82
82
|
|
|
83
|
-
<br />
|
|
84
|
-
|
|
85
|
-
<br />
|
|
86
|
-
|
|
87
83
|
Navigation mit zusätzlichem Service-Item:{' '}
|
|
88
84
|
|
|
89
85
|
<Canvas>
|
|
@@ -94,12 +90,6 @@ Navigation mit zusätzlichem Service-Item:{' '}
|
|
|
94
90
|
|
|
95
91
|
<br />
|
|
96
92
|
|
|
97
|
-
<br />
|
|
98
|
-
|
|
99
|
-
<br />
|
|
100
|
-
|
|
101
|
-
<br />
|
|
102
|
-
|
|
103
93
|
Navigation mit zusätzlicher Subnavigation:{' '}
|
|
104
94
|
|
|
105
95
|
<Canvas>
|
|
@@ -110,12 +100,6 @@ Navigation mit zusätzlicher Subnavigation:{' '}
|
|
|
110
100
|
|
|
111
101
|
<br />
|
|
112
102
|
|
|
113
|
-
<br />
|
|
114
|
-
|
|
115
|
-
<br />
|
|
116
|
-
|
|
117
|
-
<br />
|
|
118
|
-
|
|
119
103
|
Navigation mit Top Topics:{' '}
|
|
120
104
|
|
|
121
105
|
<Canvas>
|
|
@@ -419,13 +403,14 @@ Service-Navigation Flyout Tablet/Mobil:
|
|
|
419
403
|
|
|
420
404
|
- section_navigation_item.hbs
|
|
421
405
|
- navigation_flyout.hbs
|
|
406
|
+
- horizontal_scroll_container.hbs
|
|
422
407
|
|
|
423
408
|
<br />
|
|
424
409
|
|
|
425
410
|
Die Section-Navigation stellt die Links zu den einzelnen Themenbereichen der Hessenschau bereit. Die
|
|
426
411
|
Navigation-Items der Section Navigation können je nach Einstellung vom CMS direkt zur Themen-Indexseite
|
|
427
412
|
verlinken oder ihrerseits ein Flyout öffnen, über dessen Einträge dann Themenbereiche angesteuert werden
|
|
428
|
-
können
|
|
413
|
+
können. Wird die Gesamtbreite der Section-Navigation breiter als der Container des Headers, werden am Rand Pfeile zum Verschieben der Navigation angezeigt.
|
|
429
414
|
|
|
430
415
|
<br />
|
|
431
416
|
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
x-data="flyoutHandler"
|
|
4
4
|
x-ref="{{getRandom}}"
|
|
5
5
|
id="flyout-{{getRandom}}"
|
|
6
|
-
@resize.window.debounce="setFlyoutAnimationStyle();"
|
|
6
|
+
@resize.window.debounce=" dropped = false; setFlyoutAnimationStyle();"
|
|
7
7
|
{{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
|
|
8
8
|
{{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()" :class ="shouldFlyoutBeHidden() ? 'hidden' : ''" {{/if}}
|
|
9
9
|
|
|
10
|
-
class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md
|
|
10
|
+
class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md
|
|
11
11
|
{{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out
|
|
12
12
|
{{#unless this.showAsFlyout}}
|
|
13
13
|
{{#if ../this.selected}}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
|
|
16
16
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}
|
|
17
17
|
{{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
|
|
18
|
-
{{#if this.showAsFlyout}} lg:rounded-b lg:pl-4{{/if}}"
|
|
18
|
+
{{#if this.showAsFlyout}} lg:rounded-b lg:pl-4 lg:absolute{{else}} lg:fixed{{/if}}"
|
|
19
19
|
|
|
20
20
|
aria-labelledby="flyout-{{getRandom}}-1"
|
|
21
21
|
{{#if this.showAsFlyout}}
|
|
@@ -39,7 +39,6 @@
|
|
|
39
39
|
</div>
|
|
40
40
|
{{/unless}}
|
|
41
41
|
{{/unless}}
|
|
42
|
-
|
|
43
42
|
<div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">
|
|
44
43
|
{{#if this.showAsFlyout}}
|
|
45
44
|
{{#each this.columns}}
|
|
@@ -1,27 +1,30 @@
|
|
|
1
1
|
<div
|
|
2
2
|
id="sectionNav"
|
|
3
|
-
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container
|
|
3
|
+
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container "
|
|
4
4
|
x-effect="$el.setAttribute('aria-expanded', $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
|
|
5
5
|
>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{{
|
|
15
|
-
|
|
16
|
-
{{
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
{{/
|
|
21
|
-
{{/
|
|
22
|
-
{{/
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
6
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _onDarkBackground="true"}}
|
|
7
|
+
<div class="flex w-full">
|
|
8
|
+
<span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
|
|
9
|
+
|
|
10
|
+
{{#with this.sectionNavigationSSILinks}}
|
|
11
|
+
<ul class="flex flex-col items-center w-full text-left text-white list-none lg:flex-row lg:h-auto lg:mt-1">
|
|
12
|
+
{{#each this}}
|
|
13
|
+
{{#if (isStorybook)}}
|
|
14
|
+
{{> components/site_header/section_navigation/section_navigation_item }}
|
|
15
|
+
{{else}}
|
|
16
|
+
{{{this}}}
|
|
17
|
+
{{/if}}
|
|
18
|
+
{{#if @first}}
|
|
19
|
+
{{#with ../../this.topTopicsNavigation }}
|
|
20
|
+
{{> components/site_header/section_navigation/section_navigation_top_topics }}
|
|
21
|
+
{{/with}}
|
|
22
|
+
{{/if}}
|
|
23
|
+
{{/each}}
|
|
24
|
+
</ul>
|
|
25
|
+
{{/with}}
|
|
26
|
+
|
|
26
27
|
</div>
|
|
28
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
29
|
+
|
|
27
30
|
</div>
|
package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs
CHANGED
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
@click.outside="dropped = false"
|
|
4
4
|
@close-servicemenu.window="dropped = false"
|
|
5
5
|
:class="dropped ? 'border-b-0 lg:bg-white lg:text-blue-congress h-auto' : 'h-10 lg:hover:underline'"
|
|
6
|
-
class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">
|
|
6
|
+
class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">
|
|
7
7
|
{{#if this.isCluster ~}}
|
|
8
8
|
{{!-- Gilt z.B. für REGIONEN: --}}
|
|
9
9
|
<button id="button-{{nextRandom}}-1"
|
|
10
|
-
@click.debounce.100ms="toggle()"
|
|
10
|
+
@click.debounce.100ms="toggle(); correctFlyoutPos()"
|
|
11
|
+
@resize.window="dropped=false; correctFlyoutPos()"
|
|
11
12
|
:class="dropped ? 'first:font-bold lg:first:font-normal lg:underline' : 'first:font-normal'"
|
|
12
13
|
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4 {{#if this.selected}} font-bold{{/if}}"
|
|
13
14
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<li class="order-1 w-full
|
|
2
|
-
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:p-0 lg:bg-transparent lg:h-10">
|
|
1
|
+
<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
|
|
2
|
+
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:pb-1 lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
|
-
<li class="{{#unless @last}}mr-3 {{/unless}}bg-
|
|
4
|
+
<li class="{{#unless @last}}mr-3 {{/unless}}{{#if this.selected}}bg-blue-200 hover:bg-blue-300 text-blue-astronautBlue{{else}}bg-white hover:bg-grey-alto text-blue-congress{{/if}} rounded px-2 pt-px inline-block w-auto tracking-wide text-base leading-5.5 font-heading">
|
|
5
5
|
{{#decorator 'components/base/link'}}
|
|
6
|
-
{{text}}
|
|
6
|
+
{{this.text}}
|
|
7
7
|
{{/decorator}}
|
|
8
8
|
</li>
|
|
9
9
|
{{/each}}
|