hr-design-system-handlebars 1.50.37 → 1.50.39
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 +20 -25
- package/dist/assets/js/components/site_header/flyoutHandler.alpine.js +5 -3
- package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js +4 -4
- package/dist/views/components/footer/page_footer_item.hbs +3 -3
- package/dist/views/components/site_header/burger.hbs +5 -5
- package/dist/views/components/site_header/header.hbs +5 -4
- package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs +1 -1
- package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs +4 -3
- package/dist/views/components/site_header/service_logo.hbs +7 -4
- package/dist/views/components/site_header/service_navigation/service_list.hbs +1 -1
- package/dist/views/components/site_header/service_navigation/service_navigation_item.hbs +1 -4
- package/dist/views_static/components/footer/page_footer_item.hbs +3 -3
- package/dist/views_static/components/site_header/burger.hbs +5 -5
- package/dist/views_static/components/site_header/header.hbs +5 -4
- package/dist/views_static/components/site_header/navigation_flyout/navigation_flyout.hbs +1 -1
- package/dist/views_static/components/site_header/section_navigation/section_navigation_item.hbs +4 -3
- package/dist/views_static/components/site_header/service_logo.hbs +7 -4
- package/dist/views_static/components/site_header/service_navigation/service_list.hbs +1 -1
- package/dist/views_static/components/site_header/service_navigation/service_navigation_item.hbs +1 -4
- package/package.json +1 -1
- package/src/stories/views/components/footer/page_footer_item.hbs +3 -3
- package/src/stories/views/components/site_header/burger.hbs +5 -5
- package/src/stories/views/components/site_header/flyoutHandler.alpine.js +5 -3
- package/src/stories/views/components/site_header/header.hbs +5 -4
- package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js +4 -4
- package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs +1 -1
- package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs +4 -3
- package/src/stories/views/components/site_header/service_logo.hbs +7 -4
- package/src/stories/views/components/site_header/service_navigation/service_list.hbs +1 -1
- package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs +1 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.50.39 (Thu Dec 07 2023)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- DPE-2656 Navigation im Footer: Abstände verbessern [#783](https://github.com/mumprod/hr-design-system-handlebars/pull/783) ([@Sunny1112358](https://github.com/Sunny1112358))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- [@Sunny1112358](https://github.com/Sunny1112358)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.50.38 (Wed Dec 06 2023)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- Dpe 2174 navigation refactoring [#782](https://github.com/mumprod/hr-design-system-handlebars/pull/782) ([@StefanVesper](https://github.com/StefanVesper))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.50.37 (Wed Dec 06 2023)
|
|
2
26
|
|
|
3
27
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1298,8 +1298,8 @@ article.indexText ul {
|
|
|
1298
1298
|
.-mt-6 {
|
|
1299
1299
|
margin-top: -1.5rem;
|
|
1300
1300
|
}
|
|
1301
|
-
.-mt
|
|
1302
|
-
margin-top: -
|
|
1301
|
+
.-mt-\[33px\] {
|
|
1302
|
+
margin-top: -33px;
|
|
1303
1303
|
}
|
|
1304
1304
|
.-mt-px {
|
|
1305
1305
|
margin-top: -1px;
|
|
@@ -3150,18 +3150,18 @@ article.indexText ul {
|
|
|
3150
3150
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3151
3151
|
transition-duration: 150ms;
|
|
3152
3152
|
}
|
|
3153
|
-
.transition-
|
|
3154
|
-
transition-property:
|
|
3153
|
+
.transition-\[margin-top\] {
|
|
3154
|
+
transition-property: margin-top;
|
|
3155
3155
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3156
3156
|
transition-duration: 150ms;
|
|
3157
3157
|
}
|
|
3158
|
-
.transition-
|
|
3159
|
-
transition-property:
|
|
3158
|
+
.transition-\[max-height\] {
|
|
3159
|
+
transition-property: max-height;
|
|
3160
3160
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3161
3161
|
transition-duration: 150ms;
|
|
3162
3162
|
}
|
|
3163
|
-
.transition-
|
|
3164
|
-
transition-property:
|
|
3163
|
+
.transition-all {
|
|
3164
|
+
transition-property: all;
|
|
3165
3165
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3166
3166
|
transition-duration: 150ms;
|
|
3167
3167
|
}
|
|
@@ -3170,15 +3170,12 @@ article.indexText ul {
|
|
|
3170
3170
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3171
3171
|
transition-duration: 150ms;
|
|
3172
3172
|
}
|
|
3173
|
-
.delay-1000 {
|
|
3174
|
-
transition-delay: 1000ms;
|
|
3175
|
-
}
|
|
3176
|
-
.delay-200 {
|
|
3177
|
-
transition-delay: 200ms;
|
|
3178
|
-
}
|
|
3179
3173
|
.duration-100 {
|
|
3180
3174
|
transition-duration: 100ms;
|
|
3181
3175
|
}
|
|
3176
|
+
.duration-1000 {
|
|
3177
|
+
transition-duration: 1000ms;
|
|
3178
|
+
}
|
|
3182
3179
|
.duration-200 {
|
|
3183
3180
|
transition-duration: 200ms;
|
|
3184
3181
|
}
|
|
@@ -3208,7 +3205,7 @@ article.indexText ul {
|
|
|
3208
3205
|
border-bottom-color: var(--color-secondary-ds);
|
|
3209
3206
|
}
|
|
3210
3207
|
.counter-reset {
|
|
3211
|
-
counter-reset:
|
|
3208
|
+
counter-reset: cnt1701957159274;
|
|
3212
3209
|
}
|
|
3213
3210
|
.hyphens-auto {
|
|
3214
3211
|
-webkit-hyphens: auto;
|
|
@@ -3469,7 +3466,7 @@ article.indexText ul {
|
|
|
3469
3466
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3470
3467
|
}
|
|
3471
3468
|
.-ordered {
|
|
3472
|
-
counter-increment:
|
|
3469
|
+
counter-increment: cnt1701957159274 1;
|
|
3473
3470
|
}
|
|
3474
3471
|
.-ordered::before {
|
|
3475
3472
|
position: absolute;
|
|
@@ -3485,7 +3482,7 @@ article.indexText ul {
|
|
|
3485
3482
|
letter-spacing: .0125em;
|
|
3486
3483
|
--tw-text-opacity: 1;
|
|
3487
3484
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3488
|
-
content: counter(
|
|
3485
|
+
content: counter(cnt1701957159274);
|
|
3489
3486
|
}
|
|
3490
3487
|
/*! ****************************/
|
|
3491
3488
|
/*! DataPolicy stuff */
|
|
@@ -5706,8 +5703,8 @@ article.indexText ul {
|
|
|
5706
5703
|
margin-top: -10rem;
|
|
5707
5704
|
}
|
|
5708
5705
|
|
|
5709
|
-
.md\:-mt
|
|
5710
|
-
margin-top: -
|
|
5706
|
+
.md\:-mt-\[33px\] {
|
|
5707
|
+
margin-top: -33px;
|
|
5711
5708
|
}
|
|
5712
5709
|
|
|
5713
5710
|
.md\:mb-0 {
|
|
@@ -6135,6 +6132,10 @@ article.indexText ul {
|
|
|
6135
6132
|
.md\:filter {
|
|
6136
6133
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
6137
6134
|
}
|
|
6135
|
+
|
|
6136
|
+
.md\:transition-none {
|
|
6137
|
+
transition-property: none;
|
|
6138
|
+
}
|
|
6138
6139
|
.md\:ar-16-9 {
|
|
6139
6140
|
aspect-ratio: 16 / 9;
|
|
6140
6141
|
}
|
|
@@ -6720,12 +6721,6 @@ article.indexText ul {
|
|
|
6720
6721
|
filter: none;
|
|
6721
6722
|
}
|
|
6722
6723
|
|
|
6723
|
-
.lg\:transition-margin-top {
|
|
6724
|
-
transition-property: margin-top;
|
|
6725
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
6726
|
-
transition-duration: 150ms;
|
|
6727
|
-
}
|
|
6728
|
-
|
|
6729
6724
|
.lg\:duration-500 {
|
|
6730
6725
|
transition-duration: 500ms;
|
|
6731
6726
|
}
|
|
@@ -12,7 +12,7 @@ export default () => ({
|
|
|
12
12
|
let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight
|
|
13
13
|
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
14
14
|
if (window.innerWidth < 1024) {
|
|
15
|
-
if (value == true) {
|
|
15
|
+
if (value == true) { console.log("true")
|
|
16
16
|
if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
|
|
17
17
|
this.$refs.sectionnavigation.style.maxHeight = a + 'px'
|
|
18
18
|
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
@@ -24,11 +24,13 @@ export default () => ({
|
|
|
24
24
|
'px'
|
|
25
25
|
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
26
26
|
}
|
|
27
|
-
} else {
|
|
27
|
+
} else {
|
|
28
28
|
if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
|
|
29
|
-
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
29
|
+
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
30
|
+
|
|
30
31
|
} else {
|
|
31
32
|
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
33
|
+
console.log("close is true")
|
|
32
34
|
}
|
|
33
35
|
}
|
|
34
36
|
}
|
|
@@ -41,10 +41,10 @@ export default () => ({
|
|
|
41
41
|
//console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
|
|
42
42
|
}
|
|
43
43
|
// Listeners
|
|
44
|
-
window.addEventListener('mousedown', mouseDownHandler,
|
|
45
|
-
window.addEventListener('wheel', mouseEvent,
|
|
46
|
-
window.addEventListener('touchmove', mouseEvent,
|
|
47
|
-
window.addEventListener('scroll',
|
|
44
|
+
window.addEventListener('mousedown', mouseDownHandler,false)
|
|
45
|
+
window.addEventListener('wheel', mouseEvent, {passive: true})
|
|
46
|
+
window.addEventListener('touchmove', mouseEvent, {passive: true})
|
|
47
|
+
window.addEventListener('scroll', scrollHandler, { passive: true })
|
|
48
48
|
},
|
|
49
49
|
//Holds the percentage of scrolled viewport
|
|
50
50
|
percent: 0,
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{{#if this.extern}}
|
|
2
|
-
<li class="flex items-center w-full h-
|
|
2
|
+
<li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
|
|
3
3
|
{{> components/footer/page_footer_nav_link _css="flex hover:underline" _link=this _iconName="extern" }}
|
|
4
4
|
</li>
|
|
5
5
|
{{else}}
|
|
6
6
|
{{#if this.paragraphed}}
|
|
7
|
-
<li class="flex items-center w-full h-
|
|
7
|
+
<li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:bg-transparent lg:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
|
|
8
8
|
{{> components/footer/page_footer_nav_link _site=this.site _css="hover:underline" _link=this}}
|
|
9
9
|
</li>
|
|
10
10
|
{{else}}
|
|
11
|
-
<li class="flex items-center w-full h-
|
|
11
|
+
<li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
|
|
12
12
|
{{> components/footer/page_footer_nav_link _link=this _site=this.site _css="flex hover:underline" }}
|
|
13
13
|
</li>
|
|
14
14
|
{{/if}}
|
|
@@ -4,17 +4,17 @@
|
|
|
4
4
|
class="relative w-10 h-10 text-navigation-text tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
|
|
5
5
|
@burger-close.window="burgerClose()"
|
|
6
6
|
@click="$store.burgeropen = !$store.burgeropen"
|
|
7
|
-
@click.
|
|
7
|
+
@click.nextTick="burgerClick()"
|
|
8
8
|
aria-owns="sectionNav"
|
|
9
9
|
aria-controls="sectionNav"
|
|
10
10
|
x-effect="$el.setAttribute('aria-expanded', $store.burgeropen);$el.setAttribute('aria-label', $store.burgeropen ? 'Navigation schließen' : 'Navigation öffnen')"
|
|
11
11
|
>
|
|
12
12
|
<span class="sr-only md:hidden">Open main menu</span>
|
|
13
13
|
<div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
|
|
14
|
-
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-
|
|
15
|
-
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-
|
|
16
|
-
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-
|
|
17
|
-
</div>
|
|
14
|
+
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
|
|
15
|
+
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
|
|
16
|
+
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
|
|
17
|
+
</div>
|
|
18
18
|
</button>
|
|
19
19
|
</nav>
|
|
20
20
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
5
|
@resize.window="resetNav()"
|
|
6
|
-
:class="shouldBrandNavBeHidden() ? '-mt-
|
|
6
|
+
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
7
7
|
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
8
8
|
|
|
9
9
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<div id="serviceNavWrapper"
|
|
21
21
|
:class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
|
|
22
22
|
|
|
23
|
-
class="relative flex justify-center order-2 w-full transition-
|
|
23
|
+
class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
|
|
24
24
|
<div id="serviceNavMainContainer"
|
|
25
25
|
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
|
|
26
26
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
x-ref="sectionnavigation"
|
|
55
55
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
56
56
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
57
|
-
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-100 print:hidden"
|
|
57
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-{max-height} lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-100 print:hidden"
|
|
58
58
|
>
|
|
59
59
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
60
60
|
</div>
|
|
@@ -85,6 +85,7 @@
|
|
|
85
85
|
/>
|
|
86
86
|
</div>
|
|
87
87
|
<div x-ref="myOverlay">
|
|
88
|
-
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()"
|
|
88
|
+
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()"
|
|
89
|
+
class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
|
|
89
90
|
</div>
|
|
90
91
|
</div>
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
<li x-data="dropdown"
|
|
3
3
|
@click.outside="dropped = false"
|
|
4
4
|
@close-servicemenu.window="dropped = false"
|
|
5
|
-
:class="dropped ? 'border-b-0 lg:bg-white lg:text-primary
|
|
6
|
-
class="flex flex-wrap justify-start order-2 w-full list-none border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
|
|
5
|
+
:class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'"
|
|
6
|
+
class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
|
|
7
7
|
|
|
8
8
|
{{#if this.isCluster ~}}
|
|
9
9
|
{{!-- Gilt z.B. für REGIONEN: --}}
|
|
10
10
|
<button id="button-{{nextRandom}}-1"
|
|
11
|
-
@click
|
|
11
|
+
@click="toggle()"
|
|
12
|
+
@click.nextTick="correctFlyoutPos()"
|
|
12
13
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
13
14
|
:class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
|
|
14
15
|
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/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"
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
<div x-cloak
|
|
6
6
|
{{#if _useSticky}}
|
|
7
|
-
class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-
|
|
7
|
+
class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-250 ease-in h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}"
|
|
8
8
|
:class="`${percent}` < 50 ? 'opacity-0' : 'opacity-100'"
|
|
9
9
|
{{else}}
|
|
10
10
|
class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
|
|
17
17
|
<div
|
|
18
18
|
{{#if _useSticky}}
|
|
19
|
-
class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-
|
|
20
|
-
:class="`${percent}` < 50 ? '
|
|
19
|
+
class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-250 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
|
|
20
|
+
:class="`${percent}` < 50 ? ' opacity-100' : 'opacity-0 '"
|
|
21
21
|
{{else}}
|
|
22
22
|
class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
|
|
23
23
|
{{/if}}
|
|
@@ -26,4 +26,7 @@
|
|
|
26
26
|
class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
|
-
</a>
|
|
29
|
+
</a>
|
|
30
|
+
<script>
|
|
31
|
+
percent = 0
|
|
32
|
+
</script>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
|
|
4
4
|
x-ref="serviceList"
|
|
5
5
|
:class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
|
|
6
|
-
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
|
|
6
|
+
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-[margin-top] -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
|
|
7
7
|
>
|
|
8
8
|
{{#with this.serviceNavigationSSILinks}}
|
|
9
9
|
<ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
|
|
@@ -3,17 +3,14 @@
|
|
|
3
3
|
{{#if this.subNavigation}}
|
|
4
4
|
<button
|
|
5
5
|
id="{{nextRandom}}"
|
|
6
|
-
@click
|
|
6
|
+
@click="toggleServiceNav()"
|
|
7
7
|
@click.outside="dropped = false;"
|
|
8
8
|
@close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
|
|
9
|
-
|
|
10
9
|
x-data="dropdown"
|
|
11
10
|
id="{{getRandom}}"
|
|
12
|
-
|
|
13
11
|
class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
|
|
14
12
|
|
|
15
13
|
:class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''"
|
|
16
|
-
|
|
17
14
|
aria-owns="flyout-{{getRandom}}"
|
|
18
15
|
aria-controls="flyout-{{getRandom}}"
|
|
19
16
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('aria-label', dropped ? '{{this.text}}-Menü schließen' : '{{this.text}}-Menü öffnen')"
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{{#if this.extern}}
|
|
2
|
-
<li class="flex items-center w-full h-
|
|
2
|
+
<li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
|
|
3
3
|
{{> components/footer/page_footer_nav_link _css="flex hover:underline" _link=this _iconName="extern" }}
|
|
4
4
|
</li>
|
|
5
5
|
{{else}}
|
|
6
6
|
{{#if this.paragraphed}}
|
|
7
|
-
<li class="flex items-center w-full h-
|
|
7
|
+
<li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:bg-transparent lg:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
|
|
8
8
|
{{> components/footer/page_footer_nav_link _site=this.site _css="hover:underline" _link=this}}
|
|
9
9
|
</li>
|
|
10
10
|
{{else}}
|
|
11
|
-
<li class="flex items-center w-full h-
|
|
11
|
+
<li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
|
|
12
12
|
{{> components/footer/page_footer_nav_link _link=this _site=this.site _css="flex hover:underline" }}
|
|
13
13
|
</li>
|
|
14
14
|
{{/if}}
|
|
@@ -4,17 +4,17 @@
|
|
|
4
4
|
class="relative w-10 h-10 text-navigation-text tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
|
|
5
5
|
@burger-close.window="burgerClose()"
|
|
6
6
|
@click="$store.burgeropen = !$store.burgeropen"
|
|
7
|
-
@click.
|
|
7
|
+
@click.nextTick="burgerClick()"
|
|
8
8
|
aria-owns="sectionNav"
|
|
9
9
|
aria-controls="sectionNav"
|
|
10
10
|
x-effect="$el.setAttribute('aria-expanded', $store.burgeropen);$el.setAttribute('aria-label', $store.burgeropen ? 'Navigation schließen' : 'Navigation öffnen')"
|
|
11
11
|
>
|
|
12
12
|
<span class="sr-only md:hidden">Open main menu</span>
|
|
13
13
|
<div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
|
|
14
|
-
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-
|
|
15
|
-
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-
|
|
16
|
-
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-
|
|
17
|
-
</div>
|
|
14
|
+
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
|
|
15
|
+
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
|
|
16
|
+
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
|
|
17
|
+
</div>
|
|
18
18
|
</button>
|
|
19
19
|
</nav>
|
|
20
20
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
5
|
@resize.window="resetNav()"
|
|
6
|
-
:class="shouldBrandNavBeHidden() ? '-mt-
|
|
6
|
+
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
7
7
|
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
8
8
|
|
|
9
9
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<div id="serviceNavWrapper"
|
|
21
21
|
:class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
|
|
22
22
|
|
|
23
|
-
class="relative flex justify-center order-2 w-full transition-
|
|
23
|
+
class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
|
|
24
24
|
<div id="serviceNavMainContainer"
|
|
25
25
|
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
|
|
26
26
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
x-ref="sectionnavigation"
|
|
55
55
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
56
56
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
57
|
-
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-100 print:hidden"
|
|
57
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-{max-height} lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-100 print:hidden"
|
|
58
58
|
>
|
|
59
59
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
60
60
|
</div>
|
|
@@ -85,6 +85,7 @@
|
|
|
85
85
|
/>
|
|
86
86
|
</div>
|
|
87
87
|
<div x-ref="myOverlay">
|
|
88
|
-
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()"
|
|
88
|
+
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()"
|
|
89
|
+
class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
|
|
89
90
|
</div>
|
|
90
91
|
</div>
|
package/dist/views_static/components/site_header/section_navigation/section_navigation_item.hbs
CHANGED
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
<li x-data="dropdown"
|
|
3
3
|
@click.outside="dropped = false"
|
|
4
4
|
@close-servicemenu.window="dropped = false"
|
|
5
|
-
:class="dropped ? 'border-b-0 lg:bg-white lg:text-primary
|
|
6
|
-
class="flex flex-wrap justify-start order-2 w-full list-none border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
|
|
5
|
+
:class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'"
|
|
6
|
+
class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
|
|
7
7
|
|
|
8
8
|
{{#if this.isCluster ~}}
|
|
9
9
|
{{!-- Gilt z.B. für REGIONEN: --}}
|
|
10
10
|
<button id="button-{{nextRandom}}-1"
|
|
11
|
-
@click
|
|
11
|
+
@click="toggle()"
|
|
12
|
+
@click.nextTick="correctFlyoutPos()"
|
|
12
13
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
13
14
|
:class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
|
|
14
15
|
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/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"
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
<div x-cloak
|
|
6
6
|
{{#if _useSticky}}
|
|
7
|
-
class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-
|
|
7
|
+
class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-250 ease-in h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}"
|
|
8
8
|
:class="`${percent}` < 50 ? 'opacity-0' : 'opacity-100'"
|
|
9
9
|
{{else}}
|
|
10
10
|
class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
|
|
17
17
|
<div
|
|
18
18
|
{{#if _useSticky}}
|
|
19
|
-
class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-
|
|
20
|
-
:class="`${percent}` < 50 ? '
|
|
19
|
+
class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-250 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
|
|
20
|
+
:class="`${percent}` < 50 ? ' opacity-100' : 'opacity-0 '"
|
|
21
21
|
{{else}}
|
|
22
22
|
class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
|
|
23
23
|
{{/if}}
|
|
@@ -26,4 +26,7 @@
|
|
|
26
26
|
class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
|
-
</a>
|
|
29
|
+
</a>
|
|
30
|
+
<script>
|
|
31
|
+
percent = 0
|
|
32
|
+
</script>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
|
|
4
4
|
x-ref="serviceList"
|
|
5
5
|
:class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
|
|
6
|
-
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
|
|
6
|
+
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-[margin-top] -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
|
|
7
7
|
>
|
|
8
8
|
{{#with this.serviceNavigationSSILinks}}
|
|
9
9
|
<ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
|
package/dist/views_static/components/site_header/service_navigation/service_navigation_item.hbs
CHANGED
|
@@ -3,17 +3,14 @@
|
|
|
3
3
|
{{#if this.subNavigation}}
|
|
4
4
|
<button
|
|
5
5
|
id="{{nextRandom}}"
|
|
6
|
-
@click
|
|
6
|
+
@click="toggleServiceNav()"
|
|
7
7
|
@click.outside="dropped = false;"
|
|
8
8
|
@close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
|
|
9
|
-
|
|
10
9
|
x-data="dropdown"
|
|
11
10
|
id="{{getRandom}}"
|
|
12
|
-
|
|
13
11
|
class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
|
|
14
12
|
|
|
15
13
|
:class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''"
|
|
16
|
-
|
|
17
14
|
aria-owns="flyout-{{getRandom}}"
|
|
18
15
|
aria-controls="flyout-{{getRandom}}"
|
|
19
16
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('aria-label', dropped ? '{{this.text}}-Menü schließen' : '{{this.text}}-Menü öffnen')"
|
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.50.
|
|
9
|
+
"version": "1.50.39",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{{#if this.extern}}
|
|
2
|
-
<li class="flex items-center w-full h-
|
|
2
|
+
<li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
|
|
3
3
|
{{> components/footer/page_footer_nav_link _css="flex hover:underline" _link=this _iconName="extern" }}
|
|
4
4
|
</li>
|
|
5
5
|
{{else}}
|
|
6
6
|
{{#if this.paragraphed}}
|
|
7
|
-
<li class="flex items-center w-full h-
|
|
7
|
+
<li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap md:bg-transparent lg:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
|
|
8
8
|
{{> components/footer/page_footer_nav_link _site=this.site _css="hover:underline" _link=this}}
|
|
9
9
|
</li>
|
|
10
10
|
{{else}}
|
|
11
|
-
<li class="flex items-center w-full h-
|
|
11
|
+
<li class="flex items-center w-full h-10 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
|
|
12
12
|
{{> components/footer/page_footer_nav_link _link=this _site=this.site _css="flex hover:underline" }}
|
|
13
13
|
</li>
|
|
14
14
|
{{/if}}
|
|
@@ -4,17 +4,17 @@
|
|
|
4
4
|
class="relative w-10 h-10 text-navigation-text tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
|
|
5
5
|
@burger-close.window="burgerClose()"
|
|
6
6
|
@click="$store.burgeropen = !$store.burgeropen"
|
|
7
|
-
@click.
|
|
7
|
+
@click.nextTick="burgerClick()"
|
|
8
8
|
aria-owns="sectionNav"
|
|
9
9
|
aria-controls="sectionNav"
|
|
10
10
|
x-effect="$el.setAttribute('aria-expanded', $store.burgeropen);$el.setAttribute('aria-label', $store.burgeropen ? 'Navigation schließen' : 'Navigation öffnen')"
|
|
11
11
|
>
|
|
12
12
|
<span class="sr-only md:hidden">Open main menu</span>
|
|
13
13
|
<div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
|
|
14
|
-
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-
|
|
15
|
-
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-
|
|
16
|
-
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-
|
|
17
|
-
</div>
|
|
14
|
+
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
|
|
15
|
+
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
|
|
16
|
+
<span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
|
|
17
|
+
</div>
|
|
18
18
|
</button>
|
|
19
19
|
</nav>
|
|
20
20
|
</div>
|
|
@@ -12,7 +12,7 @@ export default () => ({
|
|
|
12
12
|
let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight
|
|
13
13
|
let brandNavHeight = this.percent > 0 ? 40 : 0
|
|
14
14
|
if (window.innerWidth < 1024) {
|
|
15
|
-
if (value == true) {
|
|
15
|
+
if (value == true) { console.log("true")
|
|
16
16
|
if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
|
|
17
17
|
this.$refs.sectionnavigation.style.maxHeight = a + 'px'
|
|
18
18
|
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
@@ -24,11 +24,13 @@ export default () => ({
|
|
|
24
24
|
'px'
|
|
25
25
|
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
26
26
|
}
|
|
27
|
-
} else {
|
|
27
|
+
} else {
|
|
28
28
|
if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
|
|
29
|
-
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
29
|
+
this.$refs.sectionnavigation.style.overflowY = 'hidden'
|
|
30
|
+
|
|
30
31
|
} else {
|
|
31
32
|
this.$refs.sectionnavigation.style.overflowY = 'scroll'
|
|
33
|
+
console.log("close is true")
|
|
32
34
|
}
|
|
33
35
|
}
|
|
34
36
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
5
|
@resize.window="resetNav()"
|
|
6
|
-
:class="shouldBrandNavBeHidden() ? '-mt-
|
|
6
|
+
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
7
7
|
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
8
8
|
|
|
9
9
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<div id="serviceNavWrapper"
|
|
21
21
|
:class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
|
|
22
22
|
|
|
23
|
-
class="relative flex justify-center order-2 w-full transition-
|
|
23
|
+
class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
|
|
24
24
|
<div id="serviceNavMainContainer"
|
|
25
25
|
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
|
|
26
26
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
x-ref="sectionnavigation"
|
|
55
55
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
56
56
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
57
|
-
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-100 print:hidden"
|
|
57
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-{max-height} lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-100 print:hidden"
|
|
58
58
|
>
|
|
59
59
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
60
60
|
</div>
|
|
@@ -85,6 +85,7 @@
|
|
|
85
85
|
/>
|
|
86
86
|
</div>
|
|
87
87
|
<div x-ref="myOverlay">
|
|
88
|
-
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()"
|
|
88
|
+
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()"
|
|
89
|
+
class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
|
|
89
90
|
</div>
|
|
90
91
|
</div>
|
|
@@ -41,10 +41,10 @@ export default () => ({
|
|
|
41
41
|
//console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
|
|
42
42
|
}
|
|
43
43
|
// Listeners
|
|
44
|
-
window.addEventListener('mousedown', mouseDownHandler,
|
|
45
|
-
window.addEventListener('wheel', mouseEvent,
|
|
46
|
-
window.addEventListener('touchmove', mouseEvent,
|
|
47
|
-
window.addEventListener('scroll',
|
|
44
|
+
window.addEventListener('mousedown', mouseDownHandler,false)
|
|
45
|
+
window.addEventListener('wheel', mouseEvent, {passive: true})
|
|
46
|
+
window.addEventListener('touchmove', mouseEvent, {passive: true})
|
|
47
|
+
window.addEventListener('scroll', scrollHandler, { passive: true })
|
|
48
48
|
},
|
|
49
49
|
//Holds the percentage of scrolled viewport
|
|
50
50
|
percent: 0,
|
package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs
CHANGED
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
<li x-data="dropdown"
|
|
3
3
|
@click.outside="dropped = false"
|
|
4
4
|
@close-servicemenu.window="dropped = false"
|
|
5
|
-
:class="dropped ? 'border-b-0 lg:bg-white lg:text-primary
|
|
6
|
-
class="flex flex-wrap justify-start order-2 w-full list-none border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
|
|
5
|
+
:class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'"
|
|
6
|
+
class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
|
|
7
7
|
|
|
8
8
|
{{#if this.isCluster ~}}
|
|
9
9
|
{{!-- Gilt z.B. für REGIONEN: --}}
|
|
10
10
|
<button id="button-{{nextRandom}}-1"
|
|
11
|
-
@click
|
|
11
|
+
@click="toggle()"
|
|
12
|
+
@click.nextTick="correctFlyoutPos()"
|
|
12
13
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
13
14
|
:class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
|
|
14
15
|
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/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"
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
<div x-cloak
|
|
6
6
|
{{#if _useSticky}}
|
|
7
|
-
class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-
|
|
7
|
+
class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-250 ease-in h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}"
|
|
8
8
|
:class="`${percent}` < 50 ? 'opacity-0' : 'opacity-100'"
|
|
9
9
|
{{else}}
|
|
10
10
|
class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
|
|
17
17
|
<div
|
|
18
18
|
{{#if _useSticky}}
|
|
19
|
-
class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-
|
|
20
|
-
:class="`${percent}` < 50 ? '
|
|
19
|
+
class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-250 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
|
|
20
|
+
:class="`${percent}` < 50 ? ' opacity-100' : 'opacity-0 '"
|
|
21
21
|
{{else}}
|
|
22
22
|
class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
|
|
23
23
|
{{/if}}
|
|
@@ -26,4 +26,7 @@
|
|
|
26
26
|
class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
|
-
</a>
|
|
29
|
+
</a>
|
|
30
|
+
<script>
|
|
31
|
+
percent = 0
|
|
32
|
+
</script>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
|
|
4
4
|
x-ref="serviceList"
|
|
5
5
|
:class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
|
|
6
|
-
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
|
|
6
|
+
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-[margin-top] -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
|
|
7
7
|
>
|
|
8
8
|
{{#with this.serviceNavigationSSILinks}}
|
|
9
9
|
<ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
|
package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs
CHANGED
|
@@ -3,17 +3,14 @@
|
|
|
3
3
|
{{#if this.subNavigation}}
|
|
4
4
|
<button
|
|
5
5
|
id="{{nextRandom}}"
|
|
6
|
-
@click
|
|
6
|
+
@click="toggleServiceNav()"
|
|
7
7
|
@click.outside="dropped = false;"
|
|
8
8
|
@close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
|
|
9
|
-
|
|
10
9
|
x-data="dropdown"
|
|
11
10
|
id="{{getRandom}}"
|
|
12
|
-
|
|
13
11
|
class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
|
|
14
12
|
|
|
15
13
|
:class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''"
|
|
16
|
-
|
|
17
14
|
aria-owns="flyout-{{getRandom}}"
|
|
18
15
|
aria-controls="flyout-{{getRandom}}"
|
|
19
16
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('aria-label', dropped ? '{{this.text}}-Menü schließen' : '{{this.text}}-Menü öffnen')"
|