hr-design-system-handlebars 1.12.3 β 1.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/assets/index.css +63 -36
- package/dist/assets/vendor/js/header.alpine.js +9 -1
- package/dist/assets/vendor/js/horizontal_scroll_container.alpine.js +30 -0
- package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +22 -0
- package/dist/views/components/site_header/brand_navigation/brand_navigation.hbs +7 -61
- package/dist/views/components/site_header/brand_navigation/brand_navigation_item.hbs +2 -2
- package/dist/views/components/site_header/header.hbs +2 -2
- package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs +3 -4
- package/dist/views/components/site_header/section_navigation/section_navigation.hbs +24 -21
- package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs +3 -2
- package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +4 -4
- package/package.json +1 -1
- package/src/assets/css/custom-utilities.css +2 -2
- package/src/assets/fixtures/site_header/site_header_mit_top_topics.json +1 -1
- package/src/assets/fixtures/site_header/topTopicsNavigation.inc.json +11 -0
- package/src/assets/tailwind.css +8 -0
- package/src/assets/vendor/js/header.alpine.js +9 -1
- package/src/assets/vendor/js/horizontal_scroll_container.alpine.js +30 -0
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +22 -0
- package/src/stories/views/components/site_header/brand_navigation/brand_navigation.hbs +7 -61
- package/src/stories/views/components/site_header/brand_navigation/brand_navigation_item.hbs +2 -2
- package/src/stories/views/components/site_header/fixtures/site_header_mit_top_topics.json +1 -1
- package/src/stories/views/components/site_header/header.hbs +2 -2
- package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs +3 -4
- package/src/stories/views/components/site_header/section_navigation/section_navigation.hbs +24 -21
- package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs +3 -2
- package/src/stories/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +4 -4
- package/tailwind.config.js +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
# v1.13.0 (Tue Apr 25 2023)
|
|
2
|
+
|
|
3
|
+
#### π Enhancement
|
|
4
|
+
|
|
5
|
+
- Dpe 2244 [#611](https://github.com/mumprod/hr-design-system-handlebars/pull/611) ([@vascoeduardo](https://github.com/vascoeduardo) [@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
1
14
|
# v1.12.3 (Mon Apr 24 2023)
|
|
2
15
|
|
|
3
16
|
#### π Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1351,9 +1351,6 @@ video {
|
|
|
1351
1351
|
.max-h-0 {
|
|
1352
1352
|
max-height: 0px;
|
|
1353
1353
|
}
|
|
1354
|
-
.max-h-10 {
|
|
1355
|
-
max-height: 2.5rem;
|
|
1356
|
-
}
|
|
1357
1354
|
.max-h-6 {
|
|
1358
1355
|
max-height: 1.5rem;
|
|
1359
1356
|
}
|
|
@@ -1544,6 +1541,9 @@ video {
|
|
|
1544
1541
|
.transform {
|
|
1545
1542
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1546
1543
|
}
|
|
1544
|
+
.cursor-default {
|
|
1545
|
+
cursor: default;
|
|
1546
|
+
}
|
|
1547
1547
|
.cursor-pointer {
|
|
1548
1548
|
cursor: pointer;
|
|
1549
1549
|
}
|
|
@@ -1877,10 +1877,6 @@ video {
|
|
|
1877
1877
|
--tw-bg-opacity: 1;
|
|
1878
1878
|
background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
|
|
1879
1879
|
}
|
|
1880
|
-
.bg-gray-300 {
|
|
1881
|
-
--tw-bg-opacity: 1;
|
|
1882
|
-
background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
|
|
1883
|
-
}
|
|
1884
1880
|
.bg-gray-500 {
|
|
1885
1881
|
--tw-bg-opacity: 1;
|
|
1886
1882
|
background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
|
|
@@ -2173,9 +2169,6 @@ video {
|
|
|
2173
2169
|
.pb-0\.5 {
|
|
2174
2170
|
padding-bottom: 0.125rem;
|
|
2175
2171
|
}
|
|
2176
|
-
.pb-1 {
|
|
2177
|
-
padding-bottom: 0.25rem;
|
|
2178
|
-
}
|
|
2179
2172
|
.pb-10 {
|
|
2180
2173
|
padding-bottom: 2.5rem;
|
|
2181
2174
|
}
|
|
@@ -2427,9 +2420,9 @@ video {
|
|
|
2427
2420
|
--tw-text-opacity: 1;
|
|
2428
2421
|
color: rgba(29, 78, 216, var(--tw-text-opacity));
|
|
2429
2422
|
}
|
|
2430
|
-
.text-blue-
|
|
2423
|
+
.text-blue-astronautBlue {
|
|
2431
2424
|
--tw-text-opacity: 1;
|
|
2432
|
-
color: rgba(
|
|
2425
|
+
color: rgba(0, 55, 93, var(--tw-text-opacity));
|
|
2433
2426
|
}
|
|
2434
2427
|
.text-blue-congress {
|
|
2435
2428
|
--tw-text-opacity: 1;
|
|
@@ -2678,7 +2671,7 @@ video {
|
|
|
2678
2671
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2679
2672
|
}
|
|
2680
2673
|
.counter-reset {
|
|
2681
|
-
counter-reset:
|
|
2674
|
+
counter-reset: cnt1682432562679;
|
|
2682
2675
|
}
|
|
2683
2676
|
.hyphens-auto {
|
|
2684
2677
|
-webkit-hyphens: auto;
|
|
@@ -2768,10 +2761,11 @@ video {
|
|
|
2768
2761
|
--tw-content: '';
|
|
2769
2762
|
content: var(--tw-content);
|
|
2770
2763
|
}
|
|
2771
|
-
@media (min-width:
|
|
2764
|
+
@media (min-width: 768px) {
|
|
2772
2765
|
|
|
2773
2766
|
.-currentBrand::before {
|
|
2774
|
-
position:
|
|
2767
|
+
position: relative;
|
|
2768
|
+
right: -50%;
|
|
2775
2769
|
margin-top: 1.5rem;
|
|
2776
2770
|
height: 0px;
|
|
2777
2771
|
width: 0px;
|
|
@@ -2825,9 +2819,9 @@ video {
|
|
|
2825
2819
|
border-bottom-color: #ffffff;
|
|
2826
2820
|
}
|
|
2827
2821
|
}
|
|
2828
|
-
.-currentSection::
|
|
2822
|
+
.-currentSection::after {
|
|
2829
2823
|
margin-right: 0.5rem;
|
|
2830
|
-
margin-left: -
|
|
2824
|
+
margin-left: -3.375rem;
|
|
2831
2825
|
margin-bottom: 0.125rem;
|
|
2832
2826
|
height: 0px;
|
|
2833
2827
|
width: 0px;
|
|
@@ -2845,8 +2839,13 @@ video {
|
|
|
2845
2839
|
}
|
|
2846
2840
|
@media (min-width: 1024px) {
|
|
2847
2841
|
|
|
2848
|
-
.-currentSection
|
|
2849
|
-
|
|
2842
|
+
.-currentSection {
|
|
2843
|
+
padding-right: 0px !important;
|
|
2844
|
+
}
|
|
2845
|
+
|
|
2846
|
+
.-currentSection::after {
|
|
2847
|
+
position: relative;
|
|
2848
|
+
right: 50%;
|
|
2850
2849
|
margin-bottom: 0px;
|
|
2851
2850
|
margin-right: 0px;
|
|
2852
2851
|
margin-left: 0px;
|
|
@@ -2910,7 +2909,7 @@ video {
|
|
|
2910
2909
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2911
2910
|
}
|
|
2912
2911
|
.-ordered {
|
|
2913
|
-
counter-increment:
|
|
2912
|
+
counter-increment: cnt1682432562679 1;
|
|
2914
2913
|
}
|
|
2915
2914
|
.-ordered::before {
|
|
2916
2915
|
position: absolute;
|
|
@@ -2926,7 +2925,7 @@ video {
|
|
|
2926
2925
|
letter-spacing: .0125em;
|
|
2927
2926
|
--tw-text-opacity: 1;
|
|
2928
2927
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2929
|
-
content: counter(
|
|
2928
|
+
content: counter(cnt1682432562679);
|
|
2930
2929
|
}
|
|
2931
2930
|
/*! ****************************/
|
|
2932
2931
|
/*! text-shadow */
|
|
@@ -3826,6 +3825,14 @@ video {
|
|
|
3826
3825
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
|
|
3827
3826
|
transition: transform 150ms ease-in-out 0s;
|
|
3828
3827
|
}
|
|
3828
|
+
.arrow-left-background-blue {
|
|
3829
|
+
background: linear-gradient(to left, rgba(255, 255, 255, 0),#005293 50%);
|
|
3830
|
+
transition: transform 150ms ease-in-out 0s;
|
|
3831
|
+
}
|
|
3832
|
+
.arrow-right-background-blue {
|
|
3833
|
+
background: linear-gradient(to right, rgba(255, 255, 255, 0), #005293 50%);
|
|
3834
|
+
transition: transform 150ms ease-in-out 0s;
|
|
3835
|
+
}
|
|
3829
3836
|
.c-videoplayer .ardplayer {
|
|
3830
3837
|
position: absolute;
|
|
3831
3838
|
top: 0;
|
|
@@ -3928,6 +3935,10 @@ video {
|
|
|
3928
3935
|
--tw-bg-opacity: 1;
|
|
3929
3936
|
background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
|
|
3930
3937
|
}
|
|
3938
|
+
.hover\:bg-blue-300:hover {
|
|
3939
|
+
--tw-bg-opacity: 1;
|
|
3940
|
+
background-color: rgba(147, 197, 253, var(--tw-bg-opacity));
|
|
3941
|
+
}
|
|
3931
3942
|
.hover\:bg-blue-congress:hover {
|
|
3932
3943
|
--tw-bg-opacity: 1;
|
|
3933
3944
|
background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
|
|
@@ -4629,16 +4640,16 @@ video {
|
|
|
4629
4640
|
padding-right: 0px;
|
|
4630
4641
|
}
|
|
4631
4642
|
|
|
4643
|
+
.md\:px-1 {
|
|
4644
|
+
padding-left: 0.25rem;
|
|
4645
|
+
padding-right: 0.25rem;
|
|
4646
|
+
}
|
|
4647
|
+
|
|
4632
4648
|
.md\:px-4 {
|
|
4633
4649
|
padding-left: 1rem;
|
|
4634
4650
|
padding-right: 1rem;
|
|
4635
4651
|
}
|
|
4636
4652
|
|
|
4637
|
-
.md\:px-5 {
|
|
4638
|
-
padding-left: 1.25rem;
|
|
4639
|
-
padding-right: 1.25rem;
|
|
4640
|
-
}
|
|
4641
|
-
|
|
4642
4653
|
.md\:pl-0 {
|
|
4643
4654
|
padding-left: 0px;
|
|
4644
4655
|
}
|
|
@@ -4696,6 +4707,10 @@ video {
|
|
|
4696
4707
|
line-height: 1rem;
|
|
4697
4708
|
}
|
|
4698
4709
|
|
|
4710
|
+
.md\:leading-8 {
|
|
4711
|
+
line-height: 2rem;
|
|
4712
|
+
}
|
|
4713
|
+
|
|
4699
4714
|
.md\:decoration-2 {
|
|
4700
4715
|
text-decoration-thickness: 2px;
|
|
4701
4716
|
}
|
|
@@ -4783,6 +4798,10 @@ video {
|
|
|
4783
4798
|
}
|
|
4784
4799
|
@media (min-width: 1024px) {
|
|
4785
4800
|
|
|
4801
|
+
.lg\:fixed {
|
|
4802
|
+
position: fixed;
|
|
4803
|
+
}
|
|
4804
|
+
|
|
4786
4805
|
.lg\:absolute {
|
|
4787
4806
|
position: absolute;
|
|
4788
4807
|
}
|
|
@@ -4848,10 +4867,6 @@ video {
|
|
|
4848
4867
|
margin-top: -2rem;
|
|
4849
4868
|
}
|
|
4850
4869
|
|
|
4851
|
-
.lg\:mb-1 {
|
|
4852
|
-
margin-bottom: 0.25rem;
|
|
4853
|
-
}
|
|
4854
|
-
|
|
4855
4870
|
.lg\:ml-0 {
|
|
4856
4871
|
margin-left: 0px;
|
|
4857
4872
|
}
|
|
@@ -4864,6 +4879,10 @@ video {
|
|
|
4864
4879
|
margin-right: 0px;
|
|
4865
4880
|
}
|
|
4866
4881
|
|
|
4882
|
+
.lg\:mr-2 {
|
|
4883
|
+
margin-right: 0.5rem;
|
|
4884
|
+
}
|
|
4885
|
+
|
|
4867
4886
|
.lg\:mt-1 {
|
|
4868
4887
|
margin-top: 0.25rem;
|
|
4869
4888
|
}
|
|
@@ -5104,6 +5123,11 @@ video {
|
|
|
5104
5123
|
padding-right: 1rem;
|
|
5105
5124
|
}
|
|
5106
5125
|
|
|
5126
|
+
.lg\:px-6 {
|
|
5127
|
+
padding-left: 1.5rem;
|
|
5128
|
+
padding-right: 1.5rem;
|
|
5129
|
+
}
|
|
5130
|
+
|
|
5107
5131
|
.lg\:px-9 {
|
|
5108
5132
|
padding-left: 2.25rem;
|
|
5109
5133
|
padding-right: 2.25rem;
|
|
@@ -5118,6 +5142,10 @@ video {
|
|
|
5118
5142
|
padding-bottom: 0px;
|
|
5119
5143
|
}
|
|
5120
5144
|
|
|
5145
|
+
.lg\:pb-1 {
|
|
5146
|
+
padding-bottom: 0.25rem;
|
|
5147
|
+
}
|
|
5148
|
+
|
|
5121
5149
|
.lg\:pb-3 {
|
|
5122
5150
|
padding-bottom: 0.75rem;
|
|
5123
5151
|
}
|
|
@@ -5162,10 +5190,6 @@ video {
|
|
|
5162
5190
|
line-height: 1.25rem;
|
|
5163
5191
|
}
|
|
5164
5192
|
|
|
5165
|
-
.lg\:leading-8 {
|
|
5166
|
-
line-height: 2rem;
|
|
5167
|
-
}
|
|
5168
|
-
|
|
5169
5193
|
.lg\:text-blue-congress {
|
|
5170
5194
|
--tw-text-opacity: 1;
|
|
5171
5195
|
color: rgba(0, 82, 147, var(--tw-text-opacity));
|
|
@@ -5217,6 +5241,9 @@ video {
|
|
|
5217
5241
|
}
|
|
5218
5242
|
.lg\:last\:border-0:last-child {
|
|
5219
5243
|
border-width: 0px;
|
|
5244
|
+
}
|
|
5245
|
+
.lg\:last\:pr-8:last-child {
|
|
5246
|
+
padding-right: 2rem;
|
|
5220
5247
|
}
|
|
5221
5248
|
.lg\:odd\:pr-4:nth-child(odd) {
|
|
5222
5249
|
padding-right: 1rem;
|
|
@@ -5249,8 +5276,8 @@ video {
|
|
|
5249
5276
|
right: 0px;
|
|
5250
5277
|
}
|
|
5251
5278
|
|
|
5252
|
-
.tablet\:top-
|
|
5253
|
-
top:
|
|
5279
|
+
.tablet\:top-20 {
|
|
5280
|
+
top: 5rem;
|
|
5254
5281
|
}
|
|
5255
5282
|
|
|
5256
5283
|
.tablet\:ml-half-screen {
|
|
@@ -281,7 +281,15 @@ document.addEventListener('alpine:init', () => {
|
|
|
281
281
|
toggle() {
|
|
282
282
|
this.dropped = !this.dropped
|
|
283
283
|
},
|
|
284
|
-
|
|
284
|
+
correctFlyoutPos(){
|
|
285
|
+
if(this.$screen('lg')){
|
|
286
|
+
let elementBoundingClientRec = this.$el.getBoundingClientRect()
|
|
287
|
+
let parentElementBoundingClientRec = this.$el.closest(".relative").getBoundingClientRect()
|
|
288
|
+
this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left = (elementBoundingClientRec.left - Math.abs(parentElementBoundingClientRec.left))+"px";
|
|
289
|
+
} else {
|
|
290
|
+
this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left = "0px";
|
|
291
|
+
}
|
|
292
|
+
},
|
|
285
293
|
// toggles visibility of service nav and sets global variables in stores
|
|
286
294
|
toggleServiceNav() {
|
|
287
295
|
this.dropped = !this.dropped
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export default function slider() {
|
|
2
|
+
|
|
3
|
+
return {
|
|
4
|
+
isScrollable:false,
|
|
5
|
+
arrowLeftDisplay:false,
|
|
6
|
+
arrowRightDisplay:true,
|
|
7
|
+
|
|
8
|
+
arrowsDisplay(e) {
|
|
9
|
+
e.scrollLeft > 1 ? this.arrowLeftDisplay=true : this.arrowLeftDisplay=false;
|
|
10
|
+
e.scrollLeft + e.offsetWidth >= e.scrollWidth ? this.arrowRightDisplay=false : this.arrowRightDisplay=true;
|
|
11
|
+
},
|
|
12
|
+
|
|
13
|
+
prev(e) {
|
|
14
|
+
e.scrollLeft -= 200;
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
next(e) {
|
|
18
|
+
e.scrollLeft += 200;
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
updateIndex(e) {
|
|
22
|
+
this.arrowsDisplay(e);
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
checkIfScrollable(e){
|
|
26
|
+
e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;
|
|
27
|
+
this.arrowsDisplay(e);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<div x-data="slider()"
|
|
2
|
+
x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
|
|
3
|
+
@resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
|
|
4
|
+
class="relative w-full"
|
|
5
|
+
ax-load
|
|
6
|
+
x-ignore
|
|
7
|
+
ax-load-src={{resourceUrl "assets/js/vendor/horizontal_scroll_container.alpine.js" }}
|
|
8
|
+
>
|
|
9
|
+
<template x-if="isScrollable && $screen('{{_viewport}}')">
|
|
10
|
+
<div>
|
|
11
|
+
<button class="{{#if _onDarkBackground}}arrow-left-background-blue{{else}}arrow-left-background{{/if}} absolute z-10 left-0 flex items-center justify-start w-8 h-full disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
|
|
12
|
+
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-blue-congress') }}
|
|
13
|
+
</button>
|
|
14
|
+
<button class="{{#if _onDarkBackground}}arrow-right-background-blue{{else}}arrow-right-background{{/if}} absolute z-10 right-0 flex items-center justify-end w-8 h-full group disabled:hidden" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
|
|
15
|
+
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-blue-congress') }}
|
|
16
|
+
</button>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
<div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
|
|
20
|
+
{{> @partial-block }}
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
@@ -1,22 +1,6 @@
|
|
|
1
|
-
<div
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
class="sb-brand-navigation lg:container w-full md:px-5 lg:px-10 px-3.5 h-10 lg:h-8">
|
|
5
|
-
|
|
6
|
-
<div class="flex justify-center text-xs list-none text-gray-scorpion ">
|
|
7
|
-
|
|
8
|
-
<template x-if="isScrollable">
|
|
9
|
-
<div>
|
|
10
|
-
<button class="absolute left-0 w-12 h-full pt-1 arrow-left-background disabled:hidden" @click="prev($refs.container)" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
|
|
11
|
-
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="pb-1 mr-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current"}}
|
|
12
|
-
</button>
|
|
13
|
-
<button class="absolute right-0 w-12 h-full pt-1 group arrow-right-background disabled:hidden" @click="next($refs.container)" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
|
|
14
|
-
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="pb-1 ml-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current "}}
|
|
15
|
-
</button>
|
|
16
|
-
</div>
|
|
17
|
-
</template>
|
|
18
|
-
|
|
19
|
-
<nav x-ref="container" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-pointer hide-scroll-bar max-h-10 align-center">
|
|
1
|
+
<div class="sb-brand-navigation lg:container w-full md:px-1 lg:px-6 px-3.5 h-10 md:h-8">
|
|
2
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" }}
|
|
3
|
+
<nav class="flex w-full text-xs list-none text-grey-scorpion">
|
|
20
4
|
<span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
|
|
21
5
|
{{#with this.brandNavigationItems}}
|
|
22
6
|
<ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">
|
|
@@ -24,45 +8,7 @@
|
|
|
24
8
|
{{> components/site_header/brand_navigation/brand_navigation_item }}
|
|
25
9
|
{{/each}}
|
|
26
10
|
</ul>
|
|
27
|
-
{{/with}}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<script type="text/javascript">
|
|
35
|
-
|
|
36
|
-
function slider() {
|
|
37
|
-
|
|
38
|
-
return {
|
|
39
|
-
|
|
40
|
-
isScrollable:false,
|
|
41
|
-
arrowLeftDisplay:false,
|
|
42
|
-
arrowRightDisplay:true,
|
|
43
|
-
|
|
44
|
-
arrowsDisplay(e) {
|
|
45
|
-
e.scrollLeft > 1 ? this.arrowLeftDisplay=true : this.arrowLeftDisplay=false;
|
|
46
|
-
e.scrollLeft + e.offsetWidth == e.scrollWidth ? this.arrowRightDisplay=false : this.arrowRightDisplay=true;
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
prev(e) {
|
|
50
|
-
e.scrollLeft -= 200;
|
|
51
|
-
},
|
|
52
|
-
|
|
53
|
-
next(e) {
|
|
54
|
-
e.scrollLeft += 200;
|
|
55
|
-
},
|
|
56
|
-
|
|
57
|
-
updateIndex(e) {
|
|
58
|
-
this.arrowsDisplay(e);
|
|
59
|
-
},
|
|
60
|
-
|
|
61
|
-
checkIfScrollable(e){
|
|
62
|
-
e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;
|
|
63
|
-
this.arrowsDisplay(e);
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
</script>
|
|
11
|
+
{{/with}}
|
|
12
|
+
</nav>
|
|
13
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
14
|
+
</div>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<li class="sb-brand-navigation-item{{#if this.selected}} h-10
|
|
2
|
-
<a class="link-focus-inset leading-10
|
|
1
|
+
<li class="sb-brand-navigation-item{{#if this.selected}} h-10 md:h-8 font-bold text-blue-congress {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-blue-science">
|
|
2
|
+
<a class="link-focus-inset leading-10 md:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
|
|
3
3
|
</li>
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
x-ref="sectionnavigation"
|
|
54
54
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
55
55
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
56
|
-
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-
|
|
57
|
-
>
|
|
56
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"
|
|
57
|
+
>
|
|
58
58
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
59
59
|
</div>
|
|
60
60
|
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
x-data="flyoutHandler"
|
|
4
4
|
x-ref="{{getRandom}}"
|
|
5
5
|
id="flyout-{{getRandom}}"
|
|
6
|
-
@resize.window.debounce="setFlyoutAnimationStyle();"
|
|
6
|
+
@resize.window.debounce=" dropped = false; setFlyoutAnimationStyle();"
|
|
7
7
|
{{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
|
|
8
8
|
{{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()" :class ="shouldFlyoutBeHidden() ? 'hidden' : ''" {{/if}}
|
|
9
9
|
|
|
10
|
-
class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md
|
|
10
|
+
class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md
|
|
11
11
|
{{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out
|
|
12
12
|
{{#unless this.showAsFlyout}}
|
|
13
13
|
{{#if ../this.selected}}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
|
|
16
16
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}
|
|
17
17
|
{{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
|
|
18
|
-
{{#if this.showAsFlyout}} lg:rounded-b lg:pl-4{{/if}}"
|
|
18
|
+
{{#if this.showAsFlyout}} lg:rounded-b lg:pl-4 lg:absolute{{else}} lg:fixed{{/if}}"
|
|
19
19
|
|
|
20
20
|
aria-labelledby="flyout-{{getRandom}}-1"
|
|
21
21
|
{{#if this.showAsFlyout}}
|
|
@@ -39,7 +39,6 @@
|
|
|
39
39
|
</div>
|
|
40
40
|
{{/unless}}
|
|
41
41
|
{{/unless}}
|
|
42
|
-
|
|
43
42
|
<div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">
|
|
44
43
|
{{#if this.showAsFlyout}}
|
|
45
44
|
{{#each this.columns}}
|
|
@@ -1,27 +1,30 @@
|
|
|
1
1
|
<div
|
|
2
2
|
id="sectionNav"
|
|
3
|
-
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container
|
|
3
|
+
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container "
|
|
4
4
|
x-effect="$el.setAttribute('aria-expanded', $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
|
|
5
5
|
>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{{
|
|
15
|
-
|
|
16
|
-
{{
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
{{/
|
|
21
|
-
{{/
|
|
22
|
-
{{/
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
6
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _onDarkBackground="true"}}
|
|
7
|
+
<div class="flex w-full">
|
|
8
|
+
<span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
|
|
9
|
+
|
|
10
|
+
{{#with this.sectionNavigationSSILinks}}
|
|
11
|
+
<ul class="flex flex-col items-center w-full text-left text-white list-none lg:flex-row lg:h-auto lg:mt-1">
|
|
12
|
+
{{#each this}}
|
|
13
|
+
{{#if (isStorybook)}}
|
|
14
|
+
{{> components/site_header/section_navigation/section_navigation_item }}
|
|
15
|
+
{{else}}
|
|
16
|
+
{{{this}}}
|
|
17
|
+
{{/if}}
|
|
18
|
+
{{#if @first}}
|
|
19
|
+
{{#with ../../this.topTopicsNavigation }}
|
|
20
|
+
{{> components/site_header/section_navigation/section_navigation_top_topics }}
|
|
21
|
+
{{/with}}
|
|
22
|
+
{{/if}}
|
|
23
|
+
{{/each}}
|
|
24
|
+
</ul>
|
|
25
|
+
{{/with}}
|
|
26
|
+
|
|
26
27
|
</div>
|
|
28
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
29
|
+
|
|
27
30
|
</div>
|
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
@click.outside="dropped = false"
|
|
4
4
|
@close-servicemenu.window="dropped = false"
|
|
5
5
|
:class="dropped ? 'border-b-0 lg:bg-white lg:text-blue-congress h-auto' : 'h-10 lg:hover:underline'"
|
|
6
|
-
class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">
|
|
6
|
+
class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">
|
|
7
7
|
{{#if this.isCluster ~}}
|
|
8
8
|
{{!-- Gilt z.B. fΓΌr REGIONEN: --}}
|
|
9
9
|
<button id="button-{{nextRandom}}-1"
|
|
10
|
-
@click.debounce.100ms="toggle()"
|
|
10
|
+
@click.debounce.100ms="toggle(); correctFlyoutPos()"
|
|
11
|
+
@resize.window="dropped=false; correctFlyoutPos()"
|
|
11
12
|
:class="dropped ? 'first:font-bold lg:first:font-normal lg:underline' : 'first:font-normal'"
|
|
12
13
|
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4 {{#if this.selected}} font-bold{{/if}}"
|
|
13
14
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<li class="order-1 w-full
|
|
2
|
-
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:p-0 lg:bg-transparent lg:h-10">
|
|
1
|
+
<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
|
|
2
|
+
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:pb-1 lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
|
-
<li class="{{#unless @last}}mr-3 {{/unless}}bg-
|
|
4
|
+
<li class="{{#unless @last}}mr-3 {{/unless}}{{#if this.selected}}bg-blue-200 hover:bg-blue-300 text-blue-astronautBlue{{else}}bg-white hover:bg-grey-alto text-blue-congress{{/if}} rounded px-2 pt-px inline-block w-auto tracking-wide text-base leading-5.5 font-heading">
|
|
5
5
|
{{#decorator 'components/base/link'}}
|
|
6
|
-
{{text}}
|
|
6
|
+
{{this.text}}
|
|
7
7
|
{{/decorator}}
|
|
8
8
|
</li>
|
|
9
9
|
{{/each}}
|
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.
|
|
9
|
+
"version": "1.13.0",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -104,13 +104,13 @@
|
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
.-currentBrand {
|
|
107
|
-
@apply before:content-['']
|
|
107
|
+
@apply before:content-[''] md:before:relative md:before:-right-1/2 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-white md:before:border-b-8 md:before:border-blue-congress md:before:mt-6;
|
|
108
108
|
}
|
|
109
109
|
.-currentService {
|
|
110
110
|
@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;
|
|
111
111
|
}
|
|
112
112
|
.-currentSection {
|
|
113
|
-
@apply
|
|
113
|
+
@apply lg:!pr-0 after:content-[''] after:w-0 after:h-0 after:mr-2 after:-ml-13-2 after:border-r-0 after:border-t-7 after:border-t-transparent after:border-l-8 after:border-l-white after:border-b-7 after:border-b-transparent after:mb-0.5 lg:after:relative lg:after:right-1/2 lg:after:mb-0 lg:after:w-0 lg:after:h-0 lg:after:mr-0 lg:after:ml-0 lg:after:border-t-0 lg:after:border-r-8 lg:after:border-r-transparent lg:after:border-l-8 lg:after:border-l-transparent lg:after:border-b-8 lg:after:border-b-white lg:after:mt-8;
|
|
114
114
|
}
|
|
115
115
|
.-warnung {
|
|
116
116
|
@apply text-red-600 !important;
|
|
@@ -12,11 +12,22 @@
|
|
|
12
12
|
{
|
|
13
13
|
"title": "Unwetter",
|
|
14
14
|
"text": "Unwetter",
|
|
15
|
+
"selected": true,
|
|
15
16
|
"link": {
|
|
16
17
|
"url": "http://www.Unwetter.de",
|
|
17
18
|
"hasIcon": false,
|
|
18
19
|
"iconName": "extern"
|
|
19
20
|
}
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"title": "Lottozahlen",
|
|
24
|
+
"text": "Lottozahlen",
|
|
25
|
+
"selected": false,
|
|
26
|
+
"link": {
|
|
27
|
+
"url": "http://www.Lotto.de",
|
|
28
|
+
"hasIcon": false,
|
|
29
|
+
"iconName": "extern"
|
|
30
|
+
}
|
|
20
31
|
}
|
|
21
32
|
]
|
|
22
33
|
}
|
package/src/assets/tailwind.css
CHANGED
|
@@ -874,6 +874,14 @@
|
|
|
874
874
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
|
|
875
875
|
transition: transform 150ms ease-in-out 0s;
|
|
876
876
|
}
|
|
877
|
+
.arrow-left-background-blue {
|
|
878
|
+
background: linear-gradient(to left, rgba(255, 255, 255, 0),theme('colors.blue.congress') 50%);
|
|
879
|
+
transition: transform 150ms ease-in-out 0s;
|
|
880
|
+
}
|
|
881
|
+
.arrow-right-background-blue {
|
|
882
|
+
background: linear-gradient(to right, rgba(255, 255, 255, 0), theme('colors.blue.congress') 50%);
|
|
883
|
+
transition: transform 150ms ease-in-out 0s;
|
|
884
|
+
}
|
|
877
885
|
.c-videoplayer .ardplayer {
|
|
878
886
|
position: absolute;
|
|
879
887
|
top: 0;
|
|
@@ -281,7 +281,15 @@ document.addEventListener('alpine:init', () => {
|
|
|
281
281
|
toggle() {
|
|
282
282
|
this.dropped = !this.dropped
|
|
283
283
|
},
|
|
284
|
-
|
|
284
|
+
correctFlyoutPos(){
|
|
285
|
+
if(this.$screen('lg')){
|
|
286
|
+
let elementBoundingClientRec = this.$el.getBoundingClientRect()
|
|
287
|
+
let parentElementBoundingClientRec = this.$el.closest(".relative").getBoundingClientRect()
|
|
288
|
+
this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left = (elementBoundingClientRec.left - Math.abs(parentElementBoundingClientRec.left))+"px";
|
|
289
|
+
} else {
|
|
290
|
+
this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left = "0px";
|
|
291
|
+
}
|
|
292
|
+
},
|
|
285
293
|
// toggles visibility of service nav and sets global variables in stores
|
|
286
294
|
toggleServiceNav() {
|
|
287
295
|
this.dropped = !this.dropped
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export default function slider() {
|
|
2
|
+
|
|
3
|
+
return {
|
|
4
|
+
isScrollable:false,
|
|
5
|
+
arrowLeftDisplay:false,
|
|
6
|
+
arrowRightDisplay:true,
|
|
7
|
+
|
|
8
|
+
arrowsDisplay(e) {
|
|
9
|
+
e.scrollLeft > 1 ? this.arrowLeftDisplay=true : this.arrowLeftDisplay=false;
|
|
10
|
+
e.scrollLeft + e.offsetWidth >= e.scrollWidth ? this.arrowRightDisplay=false : this.arrowRightDisplay=true;
|
|
11
|
+
},
|
|
12
|
+
|
|
13
|
+
prev(e) {
|
|
14
|
+
e.scrollLeft -= 200;
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
next(e) {
|
|
18
|
+
e.scrollLeft += 200;
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
updateIndex(e) {
|
|
22
|
+
this.arrowsDisplay(e);
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
checkIfScrollable(e){
|
|
26
|
+
e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;
|
|
27
|
+
this.arrowsDisplay(e);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<div x-data="slider()"
|
|
2
|
+
x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
|
|
3
|
+
@resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
|
|
4
|
+
class="relative w-full"
|
|
5
|
+
ax-load
|
|
6
|
+
x-ignore
|
|
7
|
+
ax-load-src={{resourceUrl "assets/js/vendor/horizontal_scroll_container.alpine.js" }}
|
|
8
|
+
>
|
|
9
|
+
<template x-if="isScrollable && $screen('{{_viewport}}')">
|
|
10
|
+
<div>
|
|
11
|
+
<button class="{{#if _onDarkBackground}}arrow-left-background-blue{{else}}arrow-left-background{{/if}} absolute z-10 left-0 flex items-center justify-start w-8 h-full disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
|
|
12
|
+
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-blue-congress') }}
|
|
13
|
+
</button>
|
|
14
|
+
<button class="{{#if _onDarkBackground}}arrow-right-background-blue{{else}}arrow-right-background{{/if}} absolute z-10 right-0 flex items-center justify-end w-8 h-full group disabled:hidden" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
|
|
15
|
+
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-blue-congress') }}
|
|
16
|
+
</button>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
<div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
|
|
20
|
+
{{> @partial-block }}
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
@@ -1,22 +1,6 @@
|
|
|
1
|
-
<div
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
class="sb-brand-navigation lg:container w-full md:px-5 lg:px-10 px-3.5 h-10 lg:h-8">
|
|
5
|
-
|
|
6
|
-
<div class="flex justify-center text-xs list-none text-gray-scorpion ">
|
|
7
|
-
|
|
8
|
-
<template x-if="isScrollable">
|
|
9
|
-
<div>
|
|
10
|
-
<button class="absolute left-0 w-12 h-full pt-1 arrow-left-background disabled:hidden" @click="prev($refs.container)" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
|
|
11
|
-
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="pb-1 mr-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current"}}
|
|
12
|
-
</button>
|
|
13
|
-
<button class="absolute right-0 w-12 h-full pt-1 group arrow-right-background disabled:hidden" @click="next($refs.container)" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
|
|
14
|
-
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="pb-1 ml-4 inline-block w-3.5 h-3.5 text-blue-congress fill-current "}}
|
|
15
|
-
</button>
|
|
16
|
-
</div>
|
|
17
|
-
</template>
|
|
18
|
-
|
|
19
|
-
<nav x-ref="container" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-pointer hide-scroll-bar max-h-10 align-center">
|
|
1
|
+
<div class="sb-brand-navigation lg:container w-full md:px-1 lg:px-6 px-3.5 h-10 md:h-8">
|
|
2
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" }}
|
|
3
|
+
<nav class="flex w-full text-xs list-none text-grey-scorpion">
|
|
20
4
|
<span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>
|
|
21
5
|
{{#with this.brandNavigationItems}}
|
|
22
6
|
<ul class="flex pl-0.5 pr-3 md:px-0 flex-nowrap lg:mr-0">
|
|
@@ -24,45 +8,7 @@
|
|
|
24
8
|
{{> components/site_header/brand_navigation/brand_navigation_item }}
|
|
25
9
|
{{/each}}
|
|
26
10
|
</ul>
|
|
27
|
-
{{/with}}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<script type="text/javascript">
|
|
35
|
-
|
|
36
|
-
function slider() {
|
|
37
|
-
|
|
38
|
-
return {
|
|
39
|
-
|
|
40
|
-
isScrollable:false,
|
|
41
|
-
arrowLeftDisplay:false,
|
|
42
|
-
arrowRightDisplay:true,
|
|
43
|
-
|
|
44
|
-
arrowsDisplay(e) {
|
|
45
|
-
e.scrollLeft > 1 ? this.arrowLeftDisplay=true : this.arrowLeftDisplay=false;
|
|
46
|
-
e.scrollLeft + e.offsetWidth == e.scrollWidth ? this.arrowRightDisplay=false : this.arrowRightDisplay=true;
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
prev(e) {
|
|
50
|
-
e.scrollLeft -= 200;
|
|
51
|
-
},
|
|
52
|
-
|
|
53
|
-
next(e) {
|
|
54
|
-
e.scrollLeft += 200;
|
|
55
|
-
},
|
|
56
|
-
|
|
57
|
-
updateIndex(e) {
|
|
58
|
-
this.arrowsDisplay(e);
|
|
59
|
-
},
|
|
60
|
-
|
|
61
|
-
checkIfScrollable(e){
|
|
62
|
-
e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;
|
|
63
|
-
this.arrowsDisplay(e);
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
</script>
|
|
11
|
+
{{/with}}
|
|
12
|
+
</nav>
|
|
13
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
14
|
+
</div>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<li class="sb-brand-navigation-item{{#if this.selected}} h-10
|
|
2
|
-
<a class="link-focus-inset leading-10
|
|
1
|
+
<li class="sb-brand-navigation-item{{#if this.selected}} h-10 md:h-8 font-bold text-blue-congress {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-blue-science">
|
|
2
|
+
<a class="link-focus-inset leading-10 md:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
|
|
3
3
|
</li>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"hasOpenSubNavigation":false,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"video-podcast","text":"Video & Podcast","icon":"videopodcast-ds","flyoutStartLinkText":"Γbersicht Video & Podcast","selected":false,"isCluster":false,"url":"https://www.video-podcast.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Aktuelle Sendung","text":"Aktuelle Sendung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Archiv - alle Sendungen","text":"Archiv - alle Sendungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Newsflash","text":"Newsflash","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"DAS THEMA","text":"DAS THEMA","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Die hessenschau in 100 Sekunden","text":"Die hessenschau in 100 Sekunden","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Podcasts","text":"Podcasts","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"hessenschau in der ARD Mediathek","text":"hessenschau in der ARD Mediathek","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}],[{"title":"hessenschau auf YouTube","text":"hessenschau auf YouTube","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Livestream hr-fernsehen","text":"Livestream hr-fernsehen","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"weather","text":"Wetter","icon":"wetter-ds","flyoutStartLinkText":"Γbersicht Wetter","url":"https://www.weather.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Unwetterwarnungen","text":"Unwetterwarnungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Regenradar","text":"Regenradar","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wolkenfilm","text":"Wolkenfilm","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Messwerte","text":"Messwerte","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterkameras","text":"Wetterkameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterbilder-Galerie","text":"Wetterbilder-Galerie","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"mehr Wetter","text":"mehr Wetter","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}],[{"title":"Thema des Tages","text":"Thema des Tages","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Foto einsenden","text":"Foto einsenden","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"traffic","text":"Verkehr","icon":"verkehr-ds","flyoutStartLinkText":"Γbersicht Verkehr","url":"https://www.traffic.de","subNavigation":{"showAsFlyout":true,"columnCount":"1","items":false,"columns":[[{"title":"Verkehrskameras","text":"Verkehrskameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Blitzer","text":"Blitzer","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"SchulausfΓ€lle","text":"SchulausfΓ€lle","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"FlugplΓ€ne Frankfurt / Parkhausbelegung","text":"FlugplΓ€ne Frankfurt / Parkhausbelegung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Werden Sie hr-Staureporter!","text":"Werden Sie hr-Staureporter!","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]}}]}],"
|
|
1
|
+
{"hasOpenSubNavigation":false,"brandNavigationItems":[{"name":"hessenschau.DE","text":"hessenschau","site":"hessenscha","selected":true,"extern":false},{"name":"HR1","text":"hr1","site":"hr1","extern":true},{"name":"HR2","text":"hr2-kultur","site":"hr2","extern":true},{"name":"HR3","text":"hr3","site":"hr3","extern":true},{"name":"HR4","text":"hr4","site":"hr4","extern":true},{"name":"HR-info","text":"hr-iNFO","site":"hr-inforadio","extern":true},{"name":"you-fm","text":"YOU FM","site":"you-fm","extern":true},{"name":"HR-fernsehen","text":"hr-fernsehen","site":"hr-fernsehen","extern":true},{"name":"HR-Sinfonieorchester","text":"hr-Sinfonieorchester","site":"hr-sinfonieorchester","extern":true},{"name":"HR-Bigband","text":"hr-Bigband","site":"hr-bigband","extern":true},{"name":"Der HR","text":"Der hr","site":"hr","extern":true}],"serviceNavigationSSILinks":[{"navigationItems":[{"id":"video-podcast","text":"Video & Podcast","icon":"videopodcast-ds","flyoutStartLinkText":"Γbersicht Video & Podcast","selected":false,"isCluster":false,"url":"https://www.video-podcast.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Aktuelle Sendung","text":"Aktuelle Sendung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Archiv - alle Sendungen","text":"Archiv - alle Sendungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Newsflash","text":"Newsflash","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"DAS THEMA","text":"DAS THEMA","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Die hessenschau in 100 Sekunden","text":"Die hessenschau in 100 Sekunden","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Podcasts","text":"Podcasts","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"hessenschau in der ARD Mediathek","text":"hessenschau in der ARD Mediathek","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}],[{"title":"hessenschau auf YouTube","text":"hessenschau auf YouTube","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Livestream hr-fernsehen","text":"Livestream hr-fernsehen","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"weather","text":"Wetter","icon":"wetter-ds","flyoutStartLinkText":"Γbersicht Wetter","url":"https://www.weather.de","subNavigation":{"showAsFlyout":true,"columnCount":"2","items":false,"columns":[[{"title":"Unwetterwarnungen","text":"Unwetterwarnungen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Regenradar","text":"Regenradar","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wolkenfilm","text":"Wolkenfilm","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Messwerte","text":"Messwerte","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterkameras","text":"Wetterkameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wetterbilder-Galerie","text":"Wetterbilder-Galerie","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"mehr Wetter","text":"mehr Wetter","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}],[{"title":"Thema des Tages","text":"Thema des Tages","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}},{"title":"Foto einsenden","text":"Foto einsenden","link":{"url":"http://www.test.de","hasIcon":true,"iconName":"extern"}}]]}}]},{"navigationItems":[{"id":"traffic","text":"Verkehr","icon":"verkehr-ds","flyoutStartLinkText":"Γbersicht Verkehr","url":"https://www.traffic.de","subNavigation":{"showAsFlyout":true,"columnCount":"1","items":false,"columns":[[{"title":"Verkehrskameras","text":"Verkehrskameras","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Blitzer","text":"Blitzer","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"SchulausfΓ€lle","text":"SchulausfΓ€lle","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"FlugplΓ€ne Frankfurt / Parkhausbelegung","text":"FlugplΓ€ne Frankfurt / Parkhausbelegung","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Werden Sie hr-Staureporter!","text":"Werden Sie hr-Staureporter!","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]}}]}],"topTopicsNavigation":{"items":[{"title":"Corona","text":"Corona","link":{"url":"http://www.Corona.de","hasIcon":false,"iconName":"extern"}},{"title":"Unwetter","text":"Unwetter","selected":true,"link":{"url":"http://www.Unwetter.de","hasIcon":false,"iconName":"extern"}},{"title":"Lottozahlen","text":"Lottozahlen","selected":false,"link":{"url":"http://www.Lotto.de","hasIcon":false,"iconName":"extern"}}]},"sectionNavigationSSILinks":[{"navigationItems":[{"name":"hessenschau","text":"Start","hiddenText":"hessenschau","url":"index.html","labelText":"Startseite der hessenschau","subNavigationFromIndex":true,"selected":true}]},{"navigationItems":[{"name":"regionen","text":"Regionen","url":"rheinmain/index.html","isCluster":"true","subNavigation":{"showAsFlyout":true,"columnCount":"1","columns":[[{"title":"Nordhessen","text":"Nordhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Osthessen","text":"Osthessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Mittelhessen","text":"Mittelhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Rhein-Main","text":"Rhein-Main","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"SΓΌdhessen","text":"SΓΌdhessen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]]},"clusterItems":[{"name":"nordhessen","text":"Nordhessen","url":"nordhessen/index.html"},{"name":"osthessen","text":"Osthessen","url":"osthessen/index.html"},{"name":"mittelhessen","text":"Mittelhessen","url":"mittelhessen/index.html"},{"name":"rheinmain","text":"Rhein-Main","url":"rheinmain/index.html"},{"name":"suedhessen","text":"SΓΌdhessen","url":"suedhessen/index.html"}]}]},{"navigationItems":[{"name":"politik","text":"Politik","url":"politik/index.html","qualifiedRelatedContentOn404":true,"isCluster":false,"subNavigation":{"showAsFlyout":false,"columnCount":"1","items":[{"title":"Bundestagswahl 2021","text":"Bundestagswahl 2021","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Landtag","text":"Landtag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Videos aus dem Landtag","text":"Videos aus dem Landtag","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Wahlen","text":"Wahlen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}},{"title":"Direktwahlen","text":"Direktwahlen","link":{"url":"http://www.test.de","hasIcon":false,"iconName":"extern"}}]}}]},{"navigationItems":[{"name":"gesellschaft","text":"Gesellschaft","url":"gesellschaft/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"wirtschaft","text":"Wirtschaft","url":"wirtschaft/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"kultur","text":"Kultur","url":"kultur/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"sport","text":"Sport","url":"sport/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"panorama","text":"Panorama","url":"panorama/index.html","qualifiedRelatedContentOn404":true}]},{"navigationItems":[{"name":"freizeit","text":"Freizeit","url":"freizeit/index.html","qualifiedRelatedContentOn404":true}]}]}
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
x-ref="sectionnavigation"
|
|
54
54
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
55
55
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
56
|
-
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-
|
|
57
|
-
>
|
|
56
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"
|
|
57
|
+
>
|
|
58
58
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
59
59
|
</div>
|
|
60
60
|
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
x-data="flyoutHandler"
|
|
4
4
|
x-ref="{{getRandom}}"
|
|
5
5
|
id="flyout-{{getRandom}}"
|
|
6
|
-
@resize.window.debounce="setFlyoutAnimationStyle();"
|
|
6
|
+
@resize.window.debounce=" dropped = false; setFlyoutAnimationStyle();"
|
|
7
7
|
{{#if this.showAsFlyout}} x-show="dropped" {{else}} {{#if ../this.selected}} x-show="$screen('lg') ? true : dropped" {{else}} x-show="dropped" {{/if}} {{/if}}
|
|
8
8
|
{{#if ../_isSectionNav}} x-init="sectionNavFlyoutWatcher()" :class ="shouldFlyoutBeHidden() ? 'hidden' : ''" {{/if}}
|
|
9
9
|
|
|
10
|
-
class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md
|
|
10
|
+
class="sb-navigation-flyout bg-white md:filter md:drop-shadow-md
|
|
11
11
|
{{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out
|
|
12
12
|
{{#unless this.showAsFlyout}}
|
|
13
13
|
{{#if ../this.selected}}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
|
|
16
16
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}
|
|
17
17
|
{{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
|
|
18
|
-
{{#if this.showAsFlyout}} lg:rounded-b lg:pl-4{{/if}}"
|
|
18
|
+
{{#if this.showAsFlyout}} lg:rounded-b lg:pl-4 lg:absolute{{else}} lg:fixed{{/if}}"
|
|
19
19
|
|
|
20
20
|
aria-labelledby="flyout-{{getRandom}}-1"
|
|
21
21
|
{{#if this.showAsFlyout}}
|
|
@@ -39,7 +39,6 @@
|
|
|
39
39
|
</div>
|
|
40
40
|
{{/unless}}
|
|
41
41
|
{{/unless}}
|
|
42
|
-
|
|
43
42
|
<div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">
|
|
44
43
|
{{#if this.showAsFlyout}}
|
|
45
44
|
{{#each this.columns}}
|
|
@@ -1,27 +1,30 @@
|
|
|
1
1
|
<div
|
|
2
2
|
id="sectionNav"
|
|
3
|
-
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container
|
|
3
|
+
class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container "
|
|
4
4
|
x-effect="$el.setAttribute('aria-expanded', $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
|
|
5
5
|
>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{{
|
|
15
|
-
|
|
16
|
-
{{
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
{{/
|
|
21
|
-
{{/
|
|
22
|
-
{{/
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
6
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _onDarkBackground="true"}}
|
|
7
|
+
<div class="flex w-full">
|
|
8
|
+
<span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>
|
|
9
|
+
|
|
10
|
+
{{#with this.sectionNavigationSSILinks}}
|
|
11
|
+
<ul class="flex flex-col items-center w-full text-left text-white list-none lg:flex-row lg:h-auto lg:mt-1">
|
|
12
|
+
{{#each this}}
|
|
13
|
+
{{#if (isStorybook)}}
|
|
14
|
+
{{> components/site_header/section_navigation/section_navigation_item }}
|
|
15
|
+
{{else}}
|
|
16
|
+
{{{this}}}
|
|
17
|
+
{{/if}}
|
|
18
|
+
{{#if @first}}
|
|
19
|
+
{{#with ../../this.topTopicsNavigation }}
|
|
20
|
+
{{> components/site_header/section_navigation/section_navigation_top_topics }}
|
|
21
|
+
{{/with}}
|
|
22
|
+
{{/if}}
|
|
23
|
+
{{/each}}
|
|
24
|
+
</ul>
|
|
25
|
+
{{/with}}
|
|
26
|
+
|
|
26
27
|
</div>
|
|
28
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
29
|
+
|
|
27
30
|
</div>
|
package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs
CHANGED
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
@click.outside="dropped = false"
|
|
4
4
|
@close-servicemenu.window="dropped = false"
|
|
5
5
|
:class="dropped ? 'border-b-0 lg:bg-white lg:text-blue-congress h-auto' : 'h-10 lg:hover:underline'"
|
|
6
|
-
class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">
|
|
6
|
+
class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">
|
|
7
7
|
{{#if this.isCluster ~}}
|
|
8
8
|
{{!-- Gilt z.B. fΓΌr REGIONEN: --}}
|
|
9
9
|
<button id="button-{{nextRandom}}-1"
|
|
10
|
-
@click.debounce.100ms="toggle()"
|
|
10
|
+
@click.debounce.100ms="toggle(); correctFlyoutPos()"
|
|
11
|
+
@resize.window="dropped=false; correctFlyoutPos()"
|
|
11
12
|
:class="dropped ? 'first:font-bold lg:first:font-normal lg:underline' : 'first:font-normal'"
|
|
12
13
|
class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4 {{#if this.selected}} font-bold{{/if}}"
|
|
13
14
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen || $screen('lg') ? '0' : '-1')"
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<li class="order-1 w-full
|
|
2
|
-
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:p-0 lg:bg-transparent lg:h-10">
|
|
1
|
+
<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
|
|
2
|
+
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:pb-1 lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
|
-
<li class="{{#unless @last}}mr-3 {{/unless}}bg-
|
|
4
|
+
<li class="{{#unless @last}}mr-3 {{/unless}}{{#if this.selected}}bg-blue-200 hover:bg-blue-300 text-blue-astronautBlue{{else}}bg-white hover:bg-grey-alto text-blue-congress{{/if}} rounded px-2 pt-px inline-block w-auto tracking-wide text-base leading-5.5 font-heading">
|
|
5
5
|
{{#decorator 'components/base/link'}}
|
|
6
|
-
{{text}}
|
|
6
|
+
{{this.text}}
|
|
7
7
|
{{/decorator}}
|
|
8
8
|
</li>
|
|
9
9
|
{{/each}}
|