hr-design-system-handlebars 1.63.5 → 1.63.7
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/icons/icons/svgmap/sharing.svg +11 -0
- package/dist/assets/icons/icons/svgmap.min.svg +1 -1
- package/dist/assets/index.css +29 -37
- package/dist/assets/js/alpine.js +3 -0
- package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js +1 -0
- package/dist/views/components/page/index/page_test_story.hbs +36 -0
- package/dist/views/components/site_header/header.hbs +1 -0
- package/dist/views/components/social_sharing/social_sharing_compact.hbs +13 -10
- package/dist/views/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
- package/dist/views/components/top_button/top_button.hbs +1 -1
- package/dist/views_static/components/page/index/page_test_story.hbs +36 -0
- package/dist/views_static/components/site_header/header.hbs +1 -0
- package/dist/views_static/components/social_sharing/social_sharing_compact.hbs +13 -10
- package/dist/views_static/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
- package/dist/views_static/components/top_button/top_button.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/icons/icons/svgmap/sharing.svg +11 -0
- package/src/assets/icons/icons/svgmap.min.svg +1 -1
- package/src/assets/js/alpine.js +3 -0
- package/src/stories/views/components/page/components/metadatabox.stories.js +1 -1
- package/src/stories/views/components/page/index/page.data.js +6 -2
- package/src/stories/views/components/page/index/page.stories.js +15 -0
- package/src/stories/views/components/page/index/page_test_story.hbs +36 -0
- package/src/stories/views/components/site_header/header.hbs +1 -0
- package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js +1 -0
- package/src/stories/views/components/social_sharing/social_sharing_compact.hbs +13 -10
- package/src/stories/views/components/social_sharing/social_sharing_compact.stories.js +1 -1
- package/src/stories/views/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
- package/src/stories/views/components/top_button/top_button.hbs +1 -1
package/dist/assets/index.css
CHANGED
|
@@ -1067,6 +1067,9 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1067
1067
|
.right-0 {
|
|
1068
1068
|
right: 0px;
|
|
1069
1069
|
}
|
|
1070
|
+
.right-\[60px\] {
|
|
1071
|
+
right: 60px;
|
|
1072
|
+
}
|
|
1070
1073
|
.right-auto {
|
|
1071
1074
|
right: auto;
|
|
1072
1075
|
}
|
|
@@ -1088,15 +1091,15 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1088
1091
|
.top-0\.5 {
|
|
1089
1092
|
top: 0.125rem;
|
|
1090
1093
|
}
|
|
1091
|
-
.top-1 {
|
|
1092
|
-
top: 0.25rem;
|
|
1093
|
-
}
|
|
1094
1094
|
.top-1\/2 {
|
|
1095
1095
|
top: 50%;
|
|
1096
1096
|
}
|
|
1097
1097
|
.top-10 {
|
|
1098
1098
|
top: 2.5rem;
|
|
1099
1099
|
}
|
|
1100
|
+
.top-40 {
|
|
1101
|
+
top: 10rem;
|
|
1102
|
+
}
|
|
1100
1103
|
.top-8 {
|
|
1101
1104
|
top: 2rem;
|
|
1102
1105
|
}
|
|
@@ -1446,12 +1449,18 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
1446
1449
|
.mt-4\.5 {
|
|
1447
1450
|
margin-top: 1.125rem;
|
|
1448
1451
|
}
|
|
1452
|
+
.mt-40 {
|
|
1453
|
+
margin-top: 10rem;
|
|
1454
|
+
}
|
|
1449
1455
|
.mt-5 {
|
|
1450
1456
|
margin-top: 1.25rem;
|
|
1451
1457
|
}
|
|
1452
1458
|
.mt-6 {
|
|
1453
1459
|
margin-top: 1.5rem;
|
|
1454
1460
|
}
|
|
1461
|
+
.mt-60 {
|
|
1462
|
+
margin-top: 15rem;
|
|
1463
|
+
}
|
|
1455
1464
|
.mt-7 {
|
|
1456
1465
|
margin-top: 1.75rem;
|
|
1457
1466
|
}
|
|
@@ -2527,9 +2536,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2527
2536
|
.fill-blue-midnight {
|
|
2528
2537
|
fill: #023770;
|
|
2529
2538
|
}
|
|
2530
|
-
.fill-button {
|
|
2531
|
-
fill: var(--color-button);
|
|
2532
|
-
}
|
|
2533
2539
|
.fill-content-nav {
|
|
2534
2540
|
fill: #005293;
|
|
2535
2541
|
fill: var(--color-content-nav);
|
|
@@ -2579,9 +2585,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2579
2585
|
.p-2 {
|
|
2580
2586
|
padding: 0.5rem;
|
|
2581
2587
|
}
|
|
2582
|
-
.p-3 {
|
|
2583
|
-
padding: 0.75rem;
|
|
2584
|
-
}
|
|
2585
2588
|
.p-4 {
|
|
2586
2589
|
padding: 1rem;
|
|
2587
2590
|
}
|
|
@@ -3321,7 +3324,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3321
3324
|
border-bottom-color: var(--color-secondary-ds);
|
|
3322
3325
|
}
|
|
3323
3326
|
.counter-reset {
|
|
3324
|
-
counter-reset:
|
|
3327
|
+
counter-reset: cnt1712845768365;
|
|
3325
3328
|
}
|
|
3326
3329
|
.hyphens-auto {
|
|
3327
3330
|
-webkit-hyphens: auto;
|
|
@@ -3700,7 +3703,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3700
3703
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3701
3704
|
}
|
|
3702
3705
|
.-ordered {
|
|
3703
|
-
counter-increment:
|
|
3706
|
+
counter-increment: cnt1712845768365 1;
|
|
3704
3707
|
}
|
|
3705
3708
|
.-ordered::before {
|
|
3706
3709
|
position: absolute;
|
|
@@ -3716,7 +3719,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3716
3719
|
letter-spacing: .0125em;
|
|
3717
3720
|
--tw-text-opacity: 1;
|
|
3718
3721
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3719
|
-
content: counter(
|
|
3722
|
+
content: counter(cnt1712845768365);
|
|
3720
3723
|
}
|
|
3721
3724
|
/*! ****************************/
|
|
3722
3725
|
/*! DataPolicy stuff */
|
|
@@ -5172,22 +5175,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
5172
5175
|
--tw-bg-opacity: 1;
|
|
5173
5176
|
background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
|
|
5174
5177
|
}
|
|
5175
|
-
.hover\:fill-\[\#0f1419\]:hover {
|
|
5176
|
-
fill: #0f1419;
|
|
5177
|
-
}
|
|
5178
|
-
.hover\:fill-\[\#3b5999\]:hover {
|
|
5179
|
-
fill: #3b5999;
|
|
5180
|
-
}
|
|
5181
|
-
.hover\:fill-\[\#4dc247\]:hover {
|
|
5182
|
-
fill: #4dc247;
|
|
5183
|
-
}
|
|
5184
|
-
.hover\:fill-black:hover {
|
|
5185
|
-
fill: #000000;
|
|
5186
|
-
}
|
|
5187
|
-
.hover\:fill-link-dark:hover {
|
|
5188
|
-
fill: #006eb7;
|
|
5189
|
-
fill: var(--color-link-dark);
|
|
5190
|
-
}
|
|
5191
5178
|
.hover\:fill-media-button:hover {
|
|
5192
5179
|
fill: #276b9e;
|
|
5193
5180
|
fill: var(--color-media-button);
|
|
@@ -5281,9 +5268,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
5281
5268
|
.group:hover .group-hover\:static {
|
|
5282
5269
|
position: static;
|
|
5283
5270
|
}
|
|
5284
|
-
.group:hover .group-hover\:fill-button--dark {
|
|
5285
|
-
fill: var(--color-button--dark);
|
|
5286
|
-
}
|
|
5287
5271
|
.group:hover .group-hover\:fill-media-button {
|
|
5288
5272
|
fill: #276b9e;
|
|
5289
5273
|
fill: var(--color-media-button);
|
|
@@ -6001,6 +5985,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
6001
5985
|
position: absolute;
|
|
6002
5986
|
}
|
|
6003
5987
|
|
|
5988
|
+
.md\:relative {
|
|
5989
|
+
position: relative;
|
|
5990
|
+
}
|
|
5991
|
+
|
|
6004
5992
|
.md\:left-0 {
|
|
6005
5993
|
left: 0px;
|
|
6006
5994
|
}
|
|
@@ -6009,6 +5997,10 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
6009
5997
|
left: auto;
|
|
6010
5998
|
}
|
|
6011
5999
|
|
|
6000
|
+
.md\:right-0 {
|
|
6001
|
+
right: 0px;
|
|
6002
|
+
}
|
|
6003
|
+
|
|
6012
6004
|
.md\:top-12 {
|
|
6013
6005
|
top: 3rem;
|
|
6014
6006
|
}
|
|
@@ -7335,20 +7327,20 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
7335
7327
|
}
|
|
7336
7328
|
@media (min-width: 1040px) {
|
|
7337
7329
|
|
|
7338
|
-
.socialShareDesktop
|
|
7339
|
-
|
|
7330
|
+
.socialShareDesktop\:-left-2 {
|
|
7331
|
+
left: -0.5rem;
|
|
7340
7332
|
}
|
|
7341
7333
|
|
|
7342
|
-
.socialShareDesktop\:
|
|
7343
|
-
|
|
7334
|
+
.socialShareDesktop\:bottom-auto {
|
|
7335
|
+
bottom: auto;
|
|
7344
7336
|
}
|
|
7345
7337
|
|
|
7346
7338
|
.socialShareDesktop\:top-0 {
|
|
7347
7339
|
top: 0px;
|
|
7348
7340
|
}
|
|
7349
7341
|
|
|
7350
|
-
.socialShareDesktop\:top-
|
|
7351
|
-
top:
|
|
7342
|
+
.socialShareDesktop\:top-32 {
|
|
7343
|
+
top: 8rem;
|
|
7352
7344
|
}
|
|
7353
7345
|
}
|
|
7354
7346
|
.\[\&\:has\(\+\.-hideOnMobile\)\]\:order-1[\:has\(\%2B.-hideOnMobile\)] {
|
package/dist/assets/js/alpine.js
CHANGED
|
@@ -39,6 +39,9 @@ Alpine.store('serviceID', {
|
|
|
39
39
|
Alpine.store('navIsVisible', true)
|
|
40
40
|
Alpine.store('subNavIsVisible', false)
|
|
41
41
|
Alpine.store('footerIsVisible', false)
|
|
42
|
+
Alpine.store('globalPercent', {
|
|
43
|
+
current: '0'
|
|
44
|
+
})
|
|
42
45
|
|
|
43
46
|
// Initialization of data handlers
|
|
44
47
|
Alpine.data('mainNavigationHandler', mainNavigationHandler)
|
|
@@ -34,6 +34,7 @@ export default () => ({
|
|
|
34
34
|
let winScroll = document.body.scrollTop || document.documentElement.scrollTop
|
|
35
35
|
winScroll > lastScrollTop ? (this.scrollingDown = true) : (this.scrollingDown = false)
|
|
36
36
|
this.percent = Math.round((winScroll / height) * 100)
|
|
37
|
+
this.$store.globalPercent.current = this.percent
|
|
37
38
|
lastScrollTop = winScroll
|
|
38
39
|
this.$store.navIsVisible = !this.isNavHidden()
|
|
39
40
|
this.$store.subNavIsVisible = !this.isSubNavHidden()
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html
|
|
3
|
+
class="no-js no-js-burgerMenu preload noMicroInteraction"
|
|
4
|
+
data-theme="hessenschau"
|
|
5
|
+
lang="de"
|
|
6
|
+
>
|
|
7
|
+
<head>
|
|
8
|
+
|
|
9
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
10
|
+
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
|
11
|
+
<title>hessenschau.de | Nachrichten aus Hessen</title>
|
|
12
|
+
<meta name="application-name" content="hessenschau.de" />
|
|
13
|
+
<meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
|
|
14
|
+
<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
|
|
15
|
+
<meta name="publisher" content="hessenschau.de" />
|
|
16
|
+
<meta name="language" content="Deutsch" />
|
|
17
|
+
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body itemscope itemtype="http://schema.org/WebPage">
|
|
21
|
+
{{> components/site_header/header }}
|
|
22
|
+
<div class="js-pageSwap">
|
|
23
|
+
<main
|
|
24
|
+
onclick="void(0)"
|
|
25
|
+
role="main"
|
|
26
|
+
id="content"
|
|
27
|
+
class="flex flex-col items-center justify-center"
|
|
28
|
+
>
|
|
29
|
+
|
|
30
|
+
{{> components/page/story/story_article }}
|
|
31
|
+
{{> components/top_button/top_button }}
|
|
32
|
+
</main>
|
|
33
|
+
|
|
34
|
+
</div>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
|
+
x-ref="headerWrapper"
|
|
5
6
|
@resize.window="resetNav()"
|
|
6
7
|
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
7
8
|
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 ">
|
|
@@ -40,28 +40,30 @@
|
|
|
40
40
|
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
41
41
|
x-id="['dropdown-button']"
|
|
42
42
|
class="flex self-center justify-end grow "
|
|
43
|
-
x-intersect:leave="sharingIsVisible = false"
|
|
44
|
-
x-intersect:enter="sharingIsVisible = true"
|
|
43
|
+
x-intersect:leave.margin.-160px.0px.0px.0px="sharingIsVisible = false"
|
|
44
|
+
x-intersect:enter.margin.-160px.0px.0px.0px="sharingIsVisible = true"
|
|
45
|
+
|
|
45
46
|
>
|
|
46
|
-
|
|
47
|
+
{{!-- <div class="fixed left-1 top-40">
|
|
47
48
|
sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
|
|
48
49
|
open:<span x-text="open" ></span><br>
|
|
49
|
-
isDesktop:<span x-text="isDesktop" ></span>
|
|
50
|
-
|
|
50
|
+
isDesktop:<span x-text="isDesktop" ></span><br>
|
|
51
|
+
PercentScrolled:<span x-text="$store.globalPercent.current"></span>
|
|
52
|
+
</div> --}}
|
|
53
|
+
|
|
51
54
|
<div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
|
|
52
55
|
<div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
|
|
53
|
-
<div class="flex gap-3" :class="{ 'bottom-5 socialShareDesktop:top-
|
|
56
|
+
<div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
|
|
54
57
|
<button
|
|
55
|
-
class="order-2
|
|
58
|
+
class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
|
|
56
59
|
x-show="!isDesktop"
|
|
57
60
|
x-ref="button"
|
|
58
61
|
x-on:click="toggle()"
|
|
59
62
|
:aria-expanded="open"
|
|
60
63
|
:aria-controls="$id('dropdown-button')">
|
|
61
|
-
{{> components/base/image/icon _addClass="w-
|
|
64
|
+
{{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
|
|
62
65
|
</button>
|
|
63
66
|
|
|
64
|
-
|
|
65
67
|
<!-- Panel -->
|
|
66
68
|
<div
|
|
67
69
|
x-ref="panel"
|
|
@@ -69,7 +71,8 @@
|
|
|
69
71
|
x-transition.origin.right
|
|
70
72
|
x-on:click.outside="close($refs.button)"
|
|
71
73
|
:id="$id('dropdown-button')"
|
|
72
|
-
class="bg-white"
|
|
74
|
+
class="p-1 bg-white "
|
|
75
|
+
:class="sharingIsVisible ? 'h-8 absolute right-[60px] z-100 md:relative md:right-0' : 'relative right-0 z-1 w-8'"
|
|
73
76
|
>
|
|
74
77
|
<ul class="flex gap-3" :class="{ 'flex-col': ! sharingIsVisible }">
|
|
75
78
|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
|
|
10
10
|
{{/with}}
|
|
11
11
|
>
|
|
12
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
12
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
|
|
13
13
|
</a>
|
|
14
14
|
</li>
|
|
15
15
|
<li class="">
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
|
|
24
24
|
{{/with}}
|
|
25
25
|
>
|
|
26
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
26
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
|
|
27
27
|
</a>
|
|
28
28
|
</li>
|
|
29
29
|
<li class="">
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
|
|
38
38
|
{{/with}}
|
|
39
39
|
>
|
|
40
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
40
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
|
|
41
41
|
</a>
|
|
42
42
|
</li>
|
|
43
43
|
<li class="">
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
|
|
50
50
|
{{/with}}
|
|
51
51
|
>
|
|
52
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
52
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
|
|
53
53
|
</a>
|
|
54
54
|
</li>
|
|
55
55
|
<li class="">
|
|
@@ -61,6 +61,6 @@
|
|
|
61
61
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
|
|
62
62
|
{{/with}}
|
|
63
63
|
>
|
|
64
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
64
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
|
|
65
65
|
</a>
|
|
66
66
|
</li>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
|
|
13
13
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
14
14
|
x-transition:leave-end="opacity-0 translate-y-12"
|
|
15
|
-
class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-
|
|
15
|
+
class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-2 h-max mr-5 hover:scale-105 [@media(min-width:1170px)]:-mr-14"
|
|
16
16
|
>
|
|
17
17
|
{{> components/base/image/icon _icon="arrow-up" _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}
|
|
18
18
|
</button>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html
|
|
3
|
+
class="no-js no-js-burgerMenu preload noMicroInteraction"
|
|
4
|
+
data-theme="hessenschau"
|
|
5
|
+
lang="de"
|
|
6
|
+
>
|
|
7
|
+
<head>
|
|
8
|
+
|
|
9
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
10
|
+
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
|
11
|
+
<title>hessenschau.de | Nachrichten aus Hessen</title>
|
|
12
|
+
<meta name="application-name" content="hessenschau.de" />
|
|
13
|
+
<meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
|
|
14
|
+
<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
|
|
15
|
+
<meta name="publisher" content="hessenschau.de" />
|
|
16
|
+
<meta name="language" content="Deutsch" />
|
|
17
|
+
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body itemscope itemtype="http://schema.org/WebPage">
|
|
21
|
+
{{> components/site_header/header }}
|
|
22
|
+
<div class="js-pageSwap">
|
|
23
|
+
<main
|
|
24
|
+
onclick="void(0)"
|
|
25
|
+
role="main"
|
|
26
|
+
id="content"
|
|
27
|
+
class="flex flex-col items-center justify-center"
|
|
28
|
+
>
|
|
29
|
+
|
|
30
|
+
{{> components/page/story/story_article }}
|
|
31
|
+
{{> components/top_button/top_button }}
|
|
32
|
+
</main>
|
|
33
|
+
|
|
34
|
+
</div>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
|
+
x-ref="headerWrapper"
|
|
5
6
|
@resize.window="resetNav()"
|
|
6
7
|
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
7
8
|
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 ">
|
|
@@ -40,28 +40,30 @@
|
|
|
40
40
|
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
41
41
|
x-id="['dropdown-button']"
|
|
42
42
|
class="flex self-center justify-end grow "
|
|
43
|
-
x-intersect:leave="sharingIsVisible = false"
|
|
44
|
-
x-intersect:enter="sharingIsVisible = true"
|
|
43
|
+
x-intersect:leave.margin.-160px.0px.0px.0px="sharingIsVisible = false"
|
|
44
|
+
x-intersect:enter.margin.-160px.0px.0px.0px="sharingIsVisible = true"
|
|
45
|
+
|
|
45
46
|
>
|
|
46
|
-
|
|
47
|
+
{{!-- <div class="fixed left-1 top-40">
|
|
47
48
|
sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
|
|
48
49
|
open:<span x-text="open" ></span><br>
|
|
49
|
-
isDesktop:<span x-text="isDesktop" ></span>
|
|
50
|
-
|
|
50
|
+
isDesktop:<span x-text="isDesktop" ></span><br>
|
|
51
|
+
PercentScrolled:<span x-text="$store.globalPercent.current"></span>
|
|
52
|
+
</div> --}}
|
|
53
|
+
|
|
51
54
|
<div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
|
|
52
55
|
<div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
|
|
53
|
-
<div class="flex gap-3" :class="{ 'bottom-5 socialShareDesktop:top-
|
|
56
|
+
<div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
|
|
54
57
|
<button
|
|
55
|
-
class="order-2
|
|
58
|
+
class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
|
|
56
59
|
x-show="!isDesktop"
|
|
57
60
|
x-ref="button"
|
|
58
61
|
x-on:click="toggle()"
|
|
59
62
|
:aria-expanded="open"
|
|
60
63
|
:aria-controls="$id('dropdown-button')">
|
|
61
|
-
{{> components/base/image/icon _addClass="w-
|
|
64
|
+
{{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
|
|
62
65
|
</button>
|
|
63
66
|
|
|
64
|
-
|
|
65
67
|
<!-- Panel -->
|
|
66
68
|
<div
|
|
67
69
|
x-ref="panel"
|
|
@@ -69,7 +71,8 @@
|
|
|
69
71
|
x-transition.origin.right
|
|
70
72
|
x-on:click.outside="close($refs.button)"
|
|
71
73
|
:id="$id('dropdown-button')"
|
|
72
|
-
class="bg-white"
|
|
74
|
+
class="p-1 bg-white "
|
|
75
|
+
:class="sharingIsVisible ? 'h-8 absolute right-[60px] z-100 md:relative md:right-0' : 'relative right-0 z-1 w-8'"
|
|
73
76
|
>
|
|
74
77
|
<ul class="flex gap-3" :class="{ 'flex-col': ! sharingIsVisible }">
|
|
75
78
|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
|
|
10
10
|
{{/with}}
|
|
11
11
|
>
|
|
12
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
12
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
|
|
13
13
|
</a>
|
|
14
14
|
</li>
|
|
15
15
|
<li class="">
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
|
|
24
24
|
{{/with}}
|
|
25
25
|
>
|
|
26
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
26
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
|
|
27
27
|
</a>
|
|
28
28
|
</li>
|
|
29
29
|
<li class="">
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
|
|
38
38
|
{{/with}}
|
|
39
39
|
>
|
|
40
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
40
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
|
|
41
41
|
</a>
|
|
42
42
|
</li>
|
|
43
43
|
<li class="">
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
|
|
50
50
|
{{/with}}
|
|
51
51
|
>
|
|
52
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
52
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
|
|
53
53
|
</a>
|
|
54
54
|
</li>
|
|
55
55
|
<li class="">
|
|
@@ -61,6 +61,6 @@
|
|
|
61
61
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
|
|
62
62
|
{{/with}}
|
|
63
63
|
>
|
|
64
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
64
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
|
|
65
65
|
</a>
|
|
66
66
|
</li>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
|
|
13
13
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
14
14
|
x-transition:leave-end="opacity-0 translate-y-12"
|
|
15
|
-
class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-
|
|
15
|
+
class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-2 h-max mr-5 hover:scale-105 [@media(min-width:1170px)]:-mr-14"
|
|
16
16
|
>
|
|
17
17
|
{{> components/base/image/icon _icon="arrow-up" _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}
|
|
18
18
|
</button>
|
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.63.
|
|
9
|
+
"version": "1.63.7",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
|
5
|
+
<path d="M43.9,36.8c0,3.6-3.1,6.6-6.7,6.4c-3.8-0.3-6.4-3.5-6-7.2c0-0.2-0.2-0.6-0.4-0.7c-4-2-8-4-12-6c-0.5-0.3-0.7,0-1,0.3
|
|
6
|
+
c-2.2,2.2-4.8,3-7.8,2.2C6.9,30.9,5,29,4.3,26c-0.9-3.5,0.7-7.1,3.8-8.9c3.1-1.8,7.1-1.2,9.5,1.4c0.6,0.6,0.9,0.6,1.6,0.2
|
|
7
|
+
c3.8-1.9,7.6-3.8,11.5-5.7c0.5-0.2,0.6-0.4,0.5-1c-0.5-3.5,2-6.6,5.5-7.2c3.4-0.5,6.7,1.9,7.2,5.2c0.6,3.6-1.7,6.9-5.2,7.5
|
|
8
|
+
c-2.1,0.4-4-0.1-5.5-1.6c-0.4-0.4-0.7-0.4-1.2-0.2c-3.9,2-7.7,3.9-11.6,5.8c-0.6,0.3-0.7,0.6-0.6,1.2c0.1,0.9,0,1.8,0,2.8
|
|
9
|
+
c0,0.3,0.2,0.6,0.3,0.7c4,2,8.1,4.1,12.1,6.1c0.2,0.1,0.7-0.1,0.9-0.2c3.6-3.3,9.4-1.6,10.5,3.2C43.8,35.9,43.8,36.4,43.9,36.8
|
|
10
|
+
L43.9,36.8z"/>
|
|
11
|
+
</svg>
|