hr-design-system-handlebars 1.59.21 β 1.59.23
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 +24 -0
- package/dist/assets/index.css +45 -24
- package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js +2 -2
- package/dist/views/components/content/copytext/components/downloadbox/downloadbox.hbs +1 -1
- package/dist/views/components/page/story/story_article.hbs +1 -1
- package/dist/views/components/site_header/brand_navigation/brand_navigation.hbs +14 -14
- package/dist/views/components/site_header/brand_navigation/brand_navigation_item.hbs +2 -2
- package/dist/views/components/site_header/header.hbs +4 -27
- package/dist/views/components/site_header/section_navigation/section_navigation.hbs +2 -2
- package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs +4 -4
- package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +1 -1
- package/dist/views/components/site_header/service_navigation/service_navigation.hbs +19 -0
- package/dist/views_static/components/content/copytext/components/downloadbox/downloadbox.hbs +1 -1
- package/dist/views_static/components/page/story/story_article.hbs +1 -1
- package/dist/views_static/components/site_header/brand_navigation/brand_navigation.hbs +14 -14
- package/dist/views_static/components/site_header/brand_navigation/brand_navigation_item.hbs +2 -2
- package/dist/views_static/components/site_header/header.hbs +4 -27
- package/dist/views_static/components/site_header/section_navigation/section_navigation.hbs +2 -2
- package/dist/views_static/components/site_header/section_navigation/section_navigation_item.hbs +4 -4
- package/dist/views_static/components/site_header/section_navigation/section_navigation_top_topics.hbs +1 -1
- package/dist/views_static/components/site_header/service_navigation/service_navigation.hbs +19 -0
- package/package.json +1 -1
- package/src/assets/css/custom-utilities.css +2 -2
- package/src/stories/views/components/content/copytext/components/downloadbox/downloadbox.hbs +1 -1
- package/src/stories/views/components/page/story/story_article.hbs +1 -1
- package/src/stories/views/components/site_header/brand_navigation/brand_navigation.hbs +14 -14
- package/src/stories/views/components/site_header/brand_navigation/brand_navigation_item.hbs +2 -2
- package/src/stories/views/components/site_header/header.hbs +4 -27
- package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js +2 -2
- package/src/stories/views/components/site_header/section_navigation/section_navigation.hbs +2 -2
- package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs +4 -4
- package/src/stories/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +1 -1
- package/src/stories/views/components/site_header/service_navigation/service_navigation.hbs +19 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.59.23 (Wed Mar 06 2024)
|
|
2
|
+
|
|
3
|
+
#### π Bug Fix
|
|
4
|
+
|
|
5
|
+
- π DPE-2938 -Mobile Ansicht Logo und Burger-Icon nicht auf Linie [#872](https://github.com/mumprod/hr-design-system-handlebars/pull/872) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.59.22 (Tue Mar 05 2024)
|
|
14
|
+
|
|
15
|
+
#### π Bug Fix
|
|
16
|
+
|
|
17
|
+
- change image-variant and pdf-download-ssi [#873](https://github.com/mumprod/hr-design-system-handlebars/pull/873) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.59.21 (Tue Mar 05 2024)
|
|
2
26
|
|
|
3
27
|
#### π Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1291,6 +1291,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1291
1291
|
.-ml-1 {
|
|
1292
1292
|
margin-left: -0.25rem;
|
|
1293
1293
|
}
|
|
1294
|
+
.-ml-3 {
|
|
1295
|
+
margin-left: -0.75rem;
|
|
1296
|
+
}
|
|
1294
1297
|
.-mt-0 {
|
|
1295
1298
|
margin-top: -0px;
|
|
1296
1299
|
}
|
|
@@ -2735,12 +2738,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2735
2738
|
padding-bottom: 16px;
|
|
2736
2739
|
padding-bottom: var(--footer-padding-bottom);
|
|
2737
2740
|
}
|
|
2738
|
-
.pl-0 {
|
|
2739
|
-
padding-left: 0px;
|
|
2740
|
-
}
|
|
2741
|
-
.pl-0\.5 {
|
|
2742
|
-
padding-left: 0.125rem;
|
|
2743
|
-
}
|
|
2744
2741
|
.pl-10 {
|
|
2745
2742
|
padding-left: 2.5rem;
|
|
2746
2743
|
}
|
|
@@ -2756,6 +2753,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2756
2753
|
.pl-4 {
|
|
2757
2754
|
padding-left: 1rem;
|
|
2758
2755
|
}
|
|
2756
|
+
.pl-5 {
|
|
2757
|
+
padding-left: 1.25rem;
|
|
2758
|
+
}
|
|
2759
2759
|
.pl-8 {
|
|
2760
2760
|
padding-left: 2rem;
|
|
2761
2761
|
}
|
|
@@ -3316,7 +3316,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3316
3316
|
border-bottom-color: var(--color-secondary-ds);
|
|
3317
3317
|
}
|
|
3318
3318
|
.counter-reset {
|
|
3319
|
-
counter-reset:
|
|
3319
|
+
counter-reset: cnt1709719785889;
|
|
3320
3320
|
}
|
|
3321
3321
|
.hyphens-auto {
|
|
3322
3322
|
-webkit-hyphens: auto;
|
|
@@ -3477,8 +3477,8 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3477
3477
|
@media (min-width: 768px) {
|
|
3478
3478
|
|
|
3479
3479
|
.-currentBrand::before {
|
|
3480
|
-
position:
|
|
3481
|
-
|
|
3480
|
+
position: absolute;
|
|
3481
|
+
left: calc(50% - 0.5rem);
|
|
3482
3482
|
margin-top: 1.5rem;
|
|
3483
3483
|
height: 0px;
|
|
3484
3484
|
width: 0px;
|
|
@@ -3537,7 +3537,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3537
3537
|
.-currentSection::before {
|
|
3538
3538
|
position: absolute;
|
|
3539
3539
|
margin-right: 0.5rem;
|
|
3540
|
-
margin-left: -
|
|
3540
|
+
margin-left: -1.25rem;
|
|
3541
3541
|
margin-bottom: 0.125rem;
|
|
3542
3542
|
height: 0px;
|
|
3543
3543
|
width: 0px;
|
|
@@ -3622,7 +3622,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3622
3622
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3623
3623
|
}
|
|
3624
3624
|
.-ordered {
|
|
3625
|
-
counter-increment:
|
|
3625
|
+
counter-increment: cnt1709719785889 1;
|
|
3626
3626
|
}
|
|
3627
3627
|
.-ordered::before {
|
|
3628
3628
|
position: absolute;
|
|
@@ -3638,7 +3638,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3638
3638
|
letter-spacing: .0125em;
|
|
3639
3639
|
--tw-text-opacity: 1;
|
|
3640
3640
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3641
|
-
content: counter(
|
|
3641
|
+
content: counter(cnt1709719785889);
|
|
3642
3642
|
}
|
|
3643
3643
|
/*! ****************************/
|
|
3644
3644
|
/*! DataPolicy stuff */
|
|
@@ -6289,11 +6289,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
6289
6289
|
padding-right: 0px;
|
|
6290
6290
|
}
|
|
6291
6291
|
|
|
6292
|
-
.md\:px-1 {
|
|
6293
|
-
padding-left: 0.25rem;
|
|
6294
|
-
padding-right: 0.25rem;
|
|
6295
|
-
}
|
|
6296
|
-
|
|
6297
6292
|
.md\:px-4 {
|
|
6298
6293
|
padding-left: 1rem;
|
|
6299
6294
|
padding-right: 1rem;
|
|
@@ -6738,6 +6733,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
6738
6733
|
display: flex;
|
|
6739
6734
|
}
|
|
6740
6735
|
|
|
6736
|
+
.lg\:grid {
|
|
6737
|
+
display: grid;
|
|
6738
|
+
}
|
|
6739
|
+
|
|
6741
6740
|
.lg\:hidden {
|
|
6742
6741
|
display: none;
|
|
6743
6742
|
}
|
|
@@ -6838,6 +6837,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
6838
6837
|
flex: 0 1 auto;
|
|
6839
6838
|
}
|
|
6840
6839
|
|
|
6840
|
+
.lg\:grid-cols-12 {
|
|
6841
|
+
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
6842
|
+
}
|
|
6843
|
+
|
|
6841
6844
|
.lg\:flex-row {
|
|
6842
6845
|
flex-direction: row;
|
|
6843
6846
|
}
|
|
@@ -6961,11 +6964,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
6961
6964
|
padding-right: 1rem;
|
|
6962
6965
|
}
|
|
6963
6966
|
|
|
6964
|
-
.lg\:px-6 {
|
|
6965
|
-
padding-left: 1.5rem;
|
|
6966
|
-
padding-right: 1.5rem;
|
|
6967
|
-
}
|
|
6968
|
-
|
|
6969
6967
|
.lg\:px-9 {
|
|
6970
6968
|
padding-left: 2.25rem;
|
|
6971
6969
|
padding-right: 2.25rem;
|
|
@@ -7047,8 +7045,8 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
7047
7045
|
filter: none;
|
|
7048
7046
|
}
|
|
7049
7047
|
|
|
7050
|
-
.lg\:duration-
|
|
7051
|
-
transition-duration:
|
|
7048
|
+
.lg\:duration-0 {
|
|
7049
|
+
transition-duration: 0ms;
|
|
7052
7050
|
}
|
|
7053
7051
|
.lg\:ar-100-27 {
|
|
7054
7052
|
aspect-ratio: 100 / 27.1;
|
|
@@ -7079,6 +7077,21 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
7079
7077
|
}
|
|
7080
7078
|
}
|
|
7081
7079
|
|
|
7080
|
+
.lg\:grid-page {
|
|
7081
|
+
grid-template-columns:
|
|
7082
|
+
[full-start] minmax(0, 1fr)
|
|
7083
|
+
[main-start] minmax(0, 63.75rem) [main-end]
|
|
7084
|
+
minmax(0, 1fr) [full-end];
|
|
7085
|
+
}
|
|
7086
|
+
@media print {
|
|
7087
|
+
.lg\:grid-page {
|
|
7088
|
+
grid-template-columns:
|
|
7089
|
+
[full-start] minmax(0, 1fr)
|
|
7090
|
+
[main-start] minmax(0, 43.75rem) [main-end]
|
|
7091
|
+
minmax(0, 1fr) [full-end];
|
|
7092
|
+
}
|
|
7093
|
+
}
|
|
7094
|
+
|
|
7082
7095
|
.lg\:col-main {
|
|
7083
7096
|
grid-column: main;
|
|
7084
7097
|
}
|
|
@@ -7193,6 +7206,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
7193
7206
|
top: 5rem;
|
|
7194
7207
|
}
|
|
7195
7208
|
|
|
7209
|
+
.tablet\:ml-\[calc\(50\%\+0\.75rem\)\] {
|
|
7210
|
+
margin-left: calc(50% + 0.75rem);
|
|
7211
|
+
}
|
|
7212
|
+
|
|
7196
7213
|
.tablet\:ml-half-screen {
|
|
7197
7214
|
margin-left: 50vw;
|
|
7198
7215
|
}
|
|
@@ -7205,6 +7222,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
7205
7222
|
width: 4.5rem;
|
|
7206
7223
|
}
|
|
7207
7224
|
|
|
7225
|
+
.tablet\:w-\[calc\(50\%-0\.75rem\)\] {
|
|
7226
|
+
width: calc(50% - 0.75rem);
|
|
7227
|
+
}
|
|
7228
|
+
|
|
7208
7229
|
.tablet\:w-half-screen {
|
|
7209
7230
|
width: 50vw;
|
|
7210
7231
|
}
|
|
@@ -135,8 +135,8 @@ export default () => ({
|
|
|
135
135
|
} else {
|
|
136
136
|
// todo vasco: checken ob das wieder rein sollte
|
|
137
137
|
// hidden needs to be set here to avoid flickering of the sectionNav on viewport change, gets removed in timeout
|
|
138
|
-
|
|
139
|
-
|
|
138
|
+
this.$refs.sectionnavigation.classList.add('hidden')
|
|
139
|
+
this.$refs.sectionnavigation.style.maxHeight="0px"
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
let nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
<div class="
|
|
2
|
-
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
14
|
-
</div>
|
|
1
|
+
<div class="grid-cols-12 px-5 lg:px-9.5 col-full sm:col-main">
|
|
2
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
|
|
3
|
+
<nav class="flex w-full text-xs list-none text-grey-scorpion">
|
|
4
|
+
<span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
|
|
5
|
+
{{#with this.brandNavigationItems}}
|
|
6
|
+
<ul class="flex pr-3 md:px-0 flex-nowrap lg:mr-0">
|
|
7
|
+
{{#each this}}
|
|
8
|
+
{{> components/site_header/brand_navigation/brand_navigation_item }}
|
|
9
|
+
{{/each}}
|
|
10
|
+
</ul>
|
|
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 h-8 {{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}
|
|
2
|
-
<a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}
|
|
1
|
+
<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">
|
|
2
|
+
<a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}relative {{/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": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
|
|
3
3
|
</li>
|
|
@@ -13,44 +13,21 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
15
|
<div id="brandNavWrapper"
|
|
16
|
-
class="box-content relative
|
|
16
|
+
class="box-content relative grid order-1 w-full h-8 bg-white border-b sb-brand-navigation grid-page border-brandnavigation-border-color z-130">
|
|
17
17
|
{{> components/site_header/brand_navigation/brand_navigation }}
|
|
18
18
|
</div>
|
|
19
19
|
|
|
20
20
|
<div id="serviceNavWrapper"
|
|
21
21
|
:class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<div id="serviceNavMainContainer"
|
|
25
|
-
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
|
|
26
|
-
|
|
27
|
-
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
28
|
-
|
|
29
|
-
<div id="serviceLogoWrapper"
|
|
30
|
-
class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 bg-navigation-bg md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
|
|
31
|
-
{{> components/site_header/service_logo _useSticky=_useSticky}}
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<div id="serviceItemsWrapper"
|
|
35
|
-
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
|
|
36
|
-
{{> components/site_header/service_navigation/service_list }}
|
|
37
|
-
|
|
38
|
-
{{> components/site_header/navigation_search/navigation_search }}
|
|
39
|
-
|
|
40
|
-
<div id="burgerWrapper"
|
|
41
|
-
class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden">
|
|
42
|
-
{{> components/site_header/burger }}
|
|
43
|
-
</div>
|
|
44
|
-
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
22
|
+
class="relative grid grid-page order-2 w-full transition-[margin-top] duration-200 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
|
|
23
|
+
{{> components/site_header/service_navigation/service_navigation }}
|
|
47
24
|
</div>
|
|
48
25
|
|
|
49
26
|
<div id="sectionNavWrapper"
|
|
50
27
|
x-ref="sectionnavigation"
|
|
51
28
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
52
29
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
53
|
-
class="
|
|
30
|
+
class="lg:grid lg:grid-page justify-center order-3 w-full overflow-hidden duration-200 lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:duration-0 tablet:absolute tablet:top-20 tablet:w-[calc(50%-0.75rem)] tablet:ml-[calc(50%+0.75rem)] max-h-0 lg:overflow-visible md:mt-0 lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden "
|
|
54
31
|
>
|
|
55
32
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
56
33
|
</div>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div
|
|
2
2
|
id="sectionNav"
|
|
3
|
-
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-
|
|
3
|
+
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main "
|
|
4
4
|
x-effect="$el.setAttribute('aria-expanded', $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
|
|
5
5
|
>
|
|
6
6
|
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
|
|
@@ -31,4 +31,4 @@
|
|
|
31
31
|
</div>
|
|
32
32
|
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
33
33
|
|
|
34
|
-
</div>
|
|
34
|
+
</div>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
@click.nextTick="correctFlyoutPos()"
|
|
13
13
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
14
14
|
:class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
|
|
15
|
-
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-
|
|
15
|
+
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 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"
|
|
16
16
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
17
17
|
aria-owns="flyout-{{getRandom}}"
|
|
18
18
|
aria-controls="flyout-{{getRandom}}"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
@click="preventDefault(isDesktopView(),$event); toggle(); correctFlyoutPos()"
|
|
29
29
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
30
30
|
:class="dropped ? 'lg:underline font-bold lg:font-normal' : 'font-normal'"
|
|
31
|
-
class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-
|
|
31
|
+
class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4"
|
|
32
32
|
aria-haspopup="true"
|
|
33
33
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
34
34
|
aria-owns="flyout-{{getRandom}}"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
id="flyout-{{nextRandom}}-1"
|
|
43
43
|
|
|
44
44
|
:class="dropped ? 'font-bold' : ''"
|
|
45
|
-
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-
|
|
45
|
+
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
|
|
46
46
|
{{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}}
|
|
47
47
|
aria-haspopup="true"
|
|
48
48
|
x-effect="$el.setAttribute('aria-expanded', dropped || $screen('lg'));$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
{{!-- Gilt fΓΌr START/GESELLSCHAFT/WIRTSCHAFT usw: --}}
|
|
58
58
|
<a {{#if this.extern}}href="{{this.url}}{{else}}href="{{resourceUrl
|
|
59
59
|
this.url}}{{/if}}"
|
|
60
|
-
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start
|
|
60
|
+
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start px-5 lg:px-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}"
|
|
61
61
|
{{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}}
|
|
62
62
|
data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
|
|
63
63
|
x-effect="$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
|
|
2
|
-
<ul class="flex flex-row flex-wrap items-center w-full
|
|
2
|
+
<ul class="flex flex-row flex-wrap items-center w-full px-5 py-4 text-left list-none lg:flex-nowrap bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}">
|
|
5
5
|
{{#> components/button/top_topics_button}}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<div id="serviceNavMainContainer"
|
|
2
|
+
class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
|
|
3
|
+
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
4
|
+
<div id="serviceLogoWrapper"
|
|
5
|
+
class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
|
|
6
|
+
{{> components/site_header/service_logo _useSticky=_useSticky}}
|
|
7
|
+
</div>
|
|
8
|
+
<div id="serviceItemsWrapper"
|
|
9
|
+
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
|
|
10
|
+
{{> components/site_header/service_navigation/service_list }}
|
|
11
|
+
|
|
12
|
+
{{> components/site_header/navigation_search/navigation_search }}
|
|
13
|
+
|
|
14
|
+
<div id="burgerWrapper"
|
|
15
|
+
class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden">
|
|
16
|
+
{{> components/site_header/burger }}
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
<div class="
|
|
2
|
-
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
14
|
-
</div>
|
|
1
|
+
<div class="grid-cols-12 px-5 lg:px-9.5 col-full sm:col-main">
|
|
2
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
|
|
3
|
+
<nav class="flex w-full text-xs list-none text-grey-scorpion">
|
|
4
|
+
<span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
|
|
5
|
+
{{#with this.brandNavigationItems}}
|
|
6
|
+
<ul class="flex pr-3 md:px-0 flex-nowrap lg:mr-0">
|
|
7
|
+
{{#each this}}
|
|
8
|
+
{{> components/site_header/brand_navigation/brand_navigation_item }}
|
|
9
|
+
{{/each}}
|
|
10
|
+
</ul>
|
|
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 h-8 {{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}
|
|
2
|
-
<a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}
|
|
1
|
+
<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">
|
|
2
|
+
<a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}relative {{/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": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
|
|
3
3
|
</li>
|
|
@@ -13,44 +13,21 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
15
|
<div id="brandNavWrapper"
|
|
16
|
-
class="box-content relative
|
|
16
|
+
class="box-content relative grid order-1 w-full h-8 bg-white border-b sb-brand-navigation grid-page border-brandnavigation-border-color z-130">
|
|
17
17
|
{{> components/site_header/brand_navigation/brand_navigation }}
|
|
18
18
|
</div>
|
|
19
19
|
|
|
20
20
|
<div id="serviceNavWrapper"
|
|
21
21
|
:class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<div id="serviceNavMainContainer"
|
|
25
|
-
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
|
|
26
|
-
|
|
27
|
-
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
28
|
-
|
|
29
|
-
<div id="serviceLogoWrapper"
|
|
30
|
-
class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 bg-navigation-bg md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
|
|
31
|
-
{{> components/site_header/service_logo _useSticky=_useSticky}}
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<div id="serviceItemsWrapper"
|
|
35
|
-
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
|
|
36
|
-
{{> components/site_header/service_navigation/service_list }}
|
|
37
|
-
|
|
38
|
-
{{> components/site_header/navigation_search/navigation_search }}
|
|
39
|
-
|
|
40
|
-
<div id="burgerWrapper"
|
|
41
|
-
class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden">
|
|
42
|
-
{{> components/site_header/burger }}
|
|
43
|
-
</div>
|
|
44
|
-
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
22
|
+
class="relative grid grid-page order-2 w-full transition-[margin-top] duration-200 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
|
|
23
|
+
{{> components/site_header/service_navigation/service_navigation }}
|
|
47
24
|
</div>
|
|
48
25
|
|
|
49
26
|
<div id="sectionNavWrapper"
|
|
50
27
|
x-ref="sectionnavigation"
|
|
51
28
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
52
29
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
53
|
-
class="
|
|
30
|
+
class="lg:grid lg:grid-page justify-center order-3 w-full overflow-hidden duration-200 lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:duration-0 tablet:absolute tablet:top-20 tablet:w-[calc(50%-0.75rem)] tablet:ml-[calc(50%+0.75rem)] max-h-0 lg:overflow-visible md:mt-0 lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden "
|
|
54
31
|
>
|
|
55
32
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
56
33
|
</div>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div
|
|
2
2
|
id="sectionNav"
|
|
3
|
-
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-
|
|
3
|
+
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main "
|
|
4
4
|
x-effect="$el.setAttribute('aria-expanded', $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
|
|
5
5
|
>
|
|
6
6
|
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
|
|
@@ -31,4 +31,4 @@
|
|
|
31
31
|
</div>
|
|
32
32
|
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
33
33
|
|
|
34
|
-
</div>
|
|
34
|
+
</div>
|
package/dist/views_static/components/site_header/section_navigation/section_navigation_item.hbs
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
@click.nextTick="correctFlyoutPos()"
|
|
13
13
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
14
14
|
:class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
|
|
15
|
-
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-
|
|
15
|
+
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 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"
|
|
16
16
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
17
17
|
aria-owns="flyout-{{getRandom}}"
|
|
18
18
|
aria-controls="flyout-{{getRandom}}"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
@click="preventDefault(isDesktopView(),$event); toggle(); correctFlyoutPos()"
|
|
29
29
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
30
30
|
:class="dropped ? 'lg:underline font-bold lg:font-normal' : 'font-normal'"
|
|
31
|
-
class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-
|
|
31
|
+
class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4"
|
|
32
32
|
aria-haspopup="true"
|
|
33
33
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
34
34
|
aria-owns="flyout-{{getRandom}}"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
id="flyout-{{nextRandom}}-1"
|
|
43
43
|
|
|
44
44
|
:class="dropped ? 'font-bold' : ''"
|
|
45
|
-
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-
|
|
45
|
+
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
|
|
46
46
|
{{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}}
|
|
47
47
|
aria-haspopup="true"
|
|
48
48
|
x-effect="$el.setAttribute('aria-expanded', dropped || $screen('lg'));$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
{{!-- Gilt fΓΌr START/GESELLSCHAFT/WIRTSCHAFT usw: --}}
|
|
58
58
|
<a {{#if this.extern}}href="{{this.url}}{{else}}href="{{resourceUrl
|
|
59
59
|
this.url}}{{/if}}"
|
|
60
|
-
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start
|
|
60
|
+
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start px-5 lg:px-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}"
|
|
61
61
|
{{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}}
|
|
62
62
|
data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
|
|
63
63
|
x-effect="$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
|
|
2
|
-
<ul class="flex flex-row flex-wrap items-center w-full
|
|
2
|
+
<ul class="flex flex-row flex-wrap items-center w-full px-5 py-4 text-left list-none lg:flex-nowrap bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}">
|
|
5
5
|
{{#> components/button/top_topics_button}}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<div id="serviceNavMainContainer"
|
|
2
|
+
class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
|
|
3
|
+
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
4
|
+
<div id="serviceLogoWrapper"
|
|
5
|
+
class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
|
|
6
|
+
{{> components/site_header/service_logo _useSticky=_useSticky}}
|
|
7
|
+
</div>
|
|
8
|
+
<div id="serviceItemsWrapper"
|
|
9
|
+
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
|
|
10
|
+
{{> components/site_header/service_navigation/service_list }}
|
|
11
|
+
|
|
12
|
+
{{> components/site_header/navigation_search/navigation_search }}
|
|
13
|
+
|
|
14
|
+
<div id="burgerWrapper"
|
|
15
|
+
class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden">
|
|
16
|
+
{{> components/site_header/burger }}
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.59.
|
|
9
|
+
"version": "1.59.23",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -203,13 +203,13 @@
|
|
|
203
203
|
}
|
|
204
204
|
|
|
205
205
|
.-currentBrand {
|
|
206
|
-
@apply before:content-[''] md:before:
|
|
206
|
+
@apply before:content-[''] md:before:absolute md:before:left-[calc(50%-0.5rem)] md:before:w-0 md:before:h-0 md:before:border-t-0 md:before:border-r-8 md:before:border-r-transparent md:before:border-l-8 md:before:border-l-transparent md:before:border-b-8 md:before:border-brandnav-pseudo md:before:mt-6;
|
|
207
207
|
}
|
|
208
208
|
.-currentService {
|
|
209
209
|
@apply before:content-[''] before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
|
|
210
210
|
}
|
|
211
211
|
.-currentSection {
|
|
212
|
-
@apply relative before:absolute before:content-[''] before:w-0 before:h-0 before:mr-2 before:-ml-
|
|
212
|
+
@apply relative before:absolute before:content-[''] before:w-0 before:h-0 before:mr-2 before:-ml-5 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0 lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-navigation-border-color lg:before:mt-8;
|
|
213
213
|
}
|
|
214
214
|
.-weather_warning {
|
|
215
215
|
@apply text-red-600 !important;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
<div class="
|
|
2
|
-
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
14
|
-
</div>
|
|
1
|
+
<div class="grid-cols-12 px-5 lg:px-9.5 col-full sm:col-main">
|
|
2
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
|
|
3
|
+
<nav class="flex w-full text-xs list-none text-grey-scorpion">
|
|
4
|
+
<span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
|
|
5
|
+
{{#with this.brandNavigationItems}}
|
|
6
|
+
<ul class="flex pr-3 md:px-0 flex-nowrap lg:mr-0">
|
|
7
|
+
{{#each this}}
|
|
8
|
+
{{> components/site_header/brand_navigation/brand_navigation_item }}
|
|
9
|
+
{{/each}}
|
|
10
|
+
</ul>
|
|
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 h-8 {{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}
|
|
2
|
-
<a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}
|
|
1
|
+
<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">
|
|
2
|
+
<a class="link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}relative {{/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": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
|
|
3
3
|
</li>
|
|
@@ -13,44 +13,21 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
15
|
<div id="brandNavWrapper"
|
|
16
|
-
class="box-content relative
|
|
16
|
+
class="box-content relative grid order-1 w-full h-8 bg-white border-b sb-brand-navigation grid-page border-brandnavigation-border-color z-130">
|
|
17
17
|
{{> components/site_header/brand_navigation/brand_navigation }}
|
|
18
18
|
</div>
|
|
19
19
|
|
|
20
20
|
<div id="serviceNavWrapper"
|
|
21
21
|
:class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<div id="serviceNavMainContainer"
|
|
25
|
-
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
|
|
26
|
-
|
|
27
|
-
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
28
|
-
|
|
29
|
-
<div id="serviceLogoWrapper"
|
|
30
|
-
class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 bg-navigation-bg md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
|
|
31
|
-
{{> components/site_header/service_logo _useSticky=_useSticky}}
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<div id="serviceItemsWrapper"
|
|
35
|
-
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
|
|
36
|
-
{{> components/site_header/service_navigation/service_list }}
|
|
37
|
-
|
|
38
|
-
{{> components/site_header/navigation_search/navigation_search }}
|
|
39
|
-
|
|
40
|
-
<div id="burgerWrapper"
|
|
41
|
-
class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden">
|
|
42
|
-
{{> components/site_header/burger }}
|
|
43
|
-
</div>
|
|
44
|
-
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
22
|
+
class="relative grid grid-page order-2 w-full transition-[margin-top] duration-200 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
|
|
23
|
+
{{> components/site_header/service_navigation/service_navigation }}
|
|
47
24
|
</div>
|
|
48
25
|
|
|
49
26
|
<div id="sectionNavWrapper"
|
|
50
27
|
x-ref="sectionnavigation"
|
|
51
28
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
52
29
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
53
|
-
class="
|
|
30
|
+
class="lg:grid lg:grid-page justify-center order-3 w-full overflow-hidden duration-200 lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:duration-0 tablet:absolute tablet:top-20 tablet:w-[calc(50%-0.75rem)] tablet:ml-[calc(50%+0.75rem)] max-h-0 lg:overflow-visible md:mt-0 lg:max-h-full lg:h-auto bg-navigation-bg z-100 print:hidden "
|
|
54
31
|
>
|
|
55
32
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
56
33
|
</div>
|
|
@@ -135,8 +135,8 @@ export default () => ({
|
|
|
135
135
|
} else {
|
|
136
136
|
// todo vasco: checken ob das wieder rein sollte
|
|
137
137
|
// hidden needs to be set here to avoid flickering of the sectionNav on viewport change, gets removed in timeout
|
|
138
|
-
|
|
139
|
-
|
|
138
|
+
this.$refs.sectionnavigation.classList.add('hidden')
|
|
139
|
+
this.$refs.sectionnavigation.style.maxHeight="0px"
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
let nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div
|
|
2
2
|
id="sectionNav"
|
|
3
|
-
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-
|
|
3
|
+
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main "
|
|
4
4
|
x-effect="$el.setAttribute('aria-expanded', $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
|
|
5
5
|
>
|
|
6
6
|
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
|
|
@@ -31,4 +31,4 @@
|
|
|
31
31
|
</div>
|
|
32
32
|
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
33
33
|
|
|
34
|
-
</div>
|
|
34
|
+
</div>
|
package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
@click.nextTick="correctFlyoutPos()"
|
|
13
13
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
14
14
|
:class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
|
|
15
|
-
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-
|
|
15
|
+
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 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"
|
|
16
16
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
17
17
|
aria-owns="flyout-{{getRandom}}"
|
|
18
18
|
aria-controls="flyout-{{getRandom}}"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
@click="preventDefault(isDesktopView(),$event); toggle(); correctFlyoutPos()"
|
|
29
29
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
30
30
|
:class="dropped ? 'lg:underline font-bold lg:font-normal' : 'font-normal'"
|
|
31
|
-
class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-
|
|
31
|
+
class="js-noStateManager {{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4"
|
|
32
32
|
aria-haspopup="true"
|
|
33
33
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
34
34
|
aria-owns="flyout-{{getRandom}}"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
id="flyout-{{nextRandom}}-1"
|
|
43
43
|
|
|
44
44
|
:class="dropped ? 'font-bold' : ''"
|
|
45
|
-
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-
|
|
45
|
+
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset js-load pl-5 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"
|
|
46
46
|
{{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}}
|
|
47
47
|
aria-haspopup="true"
|
|
48
48
|
x-effect="$el.setAttribute('aria-expanded', dropped || $screen('lg'));$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
{{!-- Gilt fΓΌr START/GESELLSCHAFT/WIRTSCHAFT usw: --}}
|
|
58
58
|
<a {{#if this.extern}}href="{{this.url}}{{else}}href="{{resourceUrl
|
|
59
59
|
this.url}}{{/if}}"
|
|
60
|
-
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start
|
|
60
|
+
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset js-load flex justify-start px-5 lg:px-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}"
|
|
61
61
|
{{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}}
|
|
62
62
|
data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}'
|
|
63
63
|
x-effect="$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
|
|
2
|
-
<ul class="flex flex-row flex-wrap items-center w-full
|
|
2
|
+
<ul class="flex flex-row flex-wrap items-center w-full px-5 py-4 text-left list-none lg:flex-nowrap bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}">
|
|
5
5
|
{{#> components/button/top_topics_button}}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<div id="serviceNavMainContainer"
|
|
2
|
+
class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
|
|
3
|
+
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
4
|
+
<div id="serviceLogoWrapper"
|
|
5
|
+
class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
|
|
6
|
+
{{> components/site_header/service_logo _useSticky=_useSticky}}
|
|
7
|
+
</div>
|
|
8
|
+
<div id="serviceItemsWrapper"
|
|
9
|
+
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-navigation-bg md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
|
|
10
|
+
{{> components/site_header/service_navigation/service_list }}
|
|
11
|
+
|
|
12
|
+
{{> components/site_header/navigation_search/navigation_search }}
|
|
13
|
+
|
|
14
|
+
<div id="burgerWrapper"
|
|
15
|
+
class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden">
|
|
16
|
+
{{> components/site_header/burger }}
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|