hr-design-system-handlebars 0.106.0 → 0.107.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 +24 -0
- package/dist/assets/index.css +60 -58
- package/dist/views/components/button/button.hbs +1 -1
- package/dist/views/components/mediaplayer/media_player.hbs +4 -10
- package/dist/views/components/teaser/components/teaser_av_consumption_close_button.hbs +1 -1
- package/dist/views/components/teaser/components/teaser_body.hbs +1 -1
- package/dist/views/components/teaser/components/teaser_image.hbs +1 -3
- package/dist/views/components/teaser/components/teaser_text.hbs +11 -11
- package/dist/views/components/teaser/teaser_alternativ.hbs +3 -3
- package/dist/views/components/teaser/teaser_poster.hbs +2 -2
- package/dist/views/components/teaser/teaser_standard.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/css/custom-components.css +37 -7
- package/src/assets/fixtures/teaser/teaser_alternative_without_teaserimage_50_serif.json +1 -1
- package/src/assets/fixtures/teaser/teaser_images.inc.json +1 -1
- package/src/assets/fixtures/teaser/teaser_standard_without_teaserimage_25_serif.json +1 -1
- package/src/stories/views/components/button/button.hbs +1 -1
- package/src/stories/views/components/mediaplayer/media_player.hbs +4 -10
- package/src/stories/views/components/teaser/components/teaser_av_consumption_close_button.hbs +1 -1
- package/src/stories/views/components/teaser/components/teaser_body.hbs +1 -1
- package/src/stories/views/components/teaser/components/teaser_image.hbs +1 -3
- package/src/stories/views/components/teaser/components/teaser_text.hbs +11 -11
- package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_audio.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_comments.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_label.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_alternative_without_teaserimage_50_serif.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_standard_without_teaserimage_25_serif.json +1 -1
- package/src/stories/views/components/teaser/teaser_alternativ.hbs +3 -3
- package/src/stories/views/components/teaser/teaser_poster.hbs +2 -2
- package/src/stories/views/components/teaser/teaser_standard.hbs +1 -1
- package/dist/views/components/teaser/teaser_standard_event.hbs +0 -133
- package/src/stories/views/components/teaser/teaser_standard_event.hbs +0 -133
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v0.107.0 (Tue Dec 13 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- Feature/dpe 1933 [#436](https://github.com/mumprod/hr-design-system-handlebars/pull/436) ([@szuelch](https://github.com/szuelch))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- [@szuelch](https://github.com/szuelch)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.106.1 (Mon Dec 12 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- fix buttom-position-problem [#435](https://github.com/mumprod/hr-design-system-handlebars/pull/435) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v0.106.0 (Mon Dec 12 2022)
|
|
2
26
|
|
|
3
27
|
#### 🚀 Enhancement
|
package/dist/assets/index.css
CHANGED
|
@@ -423,7 +423,7 @@ video {
|
|
|
423
423
|
--tw-scale-y: 1;
|
|
424
424
|
}
|
|
425
425
|
|
|
426
|
-
.btn--secondary, .teaser-
|
|
426
|
+
.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
|
|
427
427
|
--tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
|
|
428
428
|
--tw-ring-shadow: 0 0 rgba(0,0,0,0);
|
|
429
429
|
--tw-shadow: 0 0 rgba(0,0,0,0);
|
|
@@ -575,8 +575,10 @@ video {
|
|
|
575
575
|
cursor: pointer;
|
|
576
576
|
border-radius: 50%;
|
|
577
577
|
}
|
|
578
|
-
.
|
|
579
|
-
|
|
578
|
+
.ds-focus {
|
|
579
|
+
z-index: 20;
|
|
580
|
+
}
|
|
581
|
+
.ds-focus:focus {
|
|
580
582
|
--tw-shadow: 0 0 0 0.25rem;
|
|
581
583
|
--tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
|
|
582
584
|
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
@@ -584,29 +586,58 @@ video {
|
|
|
584
586
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
585
587
|
--tw-shadow-color: var(--color-focus-state);
|
|
586
588
|
--tw-shadow: var(--tw-shadow-colored);
|
|
589
|
+
outline: 2px solid transparent;
|
|
590
|
+
outline-offset: 2px;
|
|
591
|
+
}
|
|
592
|
+
.ds-focus:focus:not(:focus-visible) {
|
|
593
|
+
--tw-shadow: 0 0 rgba(0,0,0,0);
|
|
594
|
+
--tw-shadow-colored: 0 0 rgba(0,0,0,0);
|
|
595
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
596
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
597
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
587
598
|
}
|
|
588
|
-
.teaser-
|
|
599
|
+
.ds-teaser-focus::before {
|
|
600
|
+
position: absolute;
|
|
601
|
+
top: 0px;
|
|
602
|
+
right: 0px;
|
|
603
|
+
bottom: 0px;
|
|
604
|
+
left: 0px;
|
|
605
|
+
z-index: 10;
|
|
606
|
+
--tw-content: '';
|
|
607
|
+
content: var(--tw-content);
|
|
608
|
+
}
|
|
609
|
+
.ds-teaser-focus:focus::before,
|
|
610
|
+
.ds-teaser-focus:focus + .ds-cta span {
|
|
611
|
+
--tw-shadow: 0 0 0 0.25rem;
|
|
612
|
+
--tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
|
|
613
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
614
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
615
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
616
|
+
--tw-shadow-color: var(--color-focus-state);
|
|
617
|
+
--tw-shadow: var(--tw-shadow-colored);
|
|
618
|
+
}
|
|
619
|
+
.ds-teaser-focus:focus + .ds-cta span {
|
|
589
620
|
background-color: #ffffff;
|
|
590
621
|
background-color: var(--color-button-inverted);
|
|
591
622
|
color: #006dc1;
|
|
592
623
|
color: var(--color-button-hollow);
|
|
593
624
|
border-style: none;
|
|
594
625
|
}
|
|
595
|
-
.teaser-
|
|
596
|
-
.teaser-
|
|
626
|
+
.ds-teaser-focus:focus:not(:focus-visible)::before,
|
|
627
|
+
.ds-teaser-focus:focus:not(:focus-visible) + .ds-cta span {
|
|
597
628
|
--tw-shadow: 0 0 rgba(0,0,0,0);
|
|
598
629
|
--tw-shadow-colored: 0 0 rgba(0,0,0,0);
|
|
599
630
|
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
600
631
|
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
601
632
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
602
633
|
}
|
|
603
|
-
.teaser-
|
|
634
|
+
.ds-teaser-focus:focus:not(:focus-visible) + .ds-cta span {
|
|
604
635
|
background-color: transparent;
|
|
605
636
|
color: #ffffff;
|
|
606
637
|
color: var(--color-button-inverted);
|
|
607
638
|
border-style: solid;
|
|
608
639
|
}
|
|
609
|
-
.teaser-
|
|
640
|
+
.ds-teaser-focus:focus {
|
|
610
641
|
outline: 2px solid transparent;
|
|
611
642
|
outline-offset: 2px;
|
|
612
643
|
}
|
|
@@ -700,6 +731,9 @@ video {
|
|
|
700
731
|
.z-10 {
|
|
701
732
|
z-index: 10;
|
|
702
733
|
}
|
|
734
|
+
.z-20 {
|
|
735
|
+
z-index: 20;
|
|
736
|
+
}
|
|
703
737
|
.z-10001 {
|
|
704
738
|
z-index: 10001;
|
|
705
739
|
}
|
|
@@ -709,9 +743,6 @@ video {
|
|
|
709
743
|
.z-10002 {
|
|
710
744
|
z-index: 10002;
|
|
711
745
|
}
|
|
712
|
-
.z-20 {
|
|
713
|
-
z-index: 20;
|
|
714
|
-
}
|
|
715
746
|
.-z-1000 {
|
|
716
747
|
z-index: -1000;
|
|
717
748
|
}
|
|
@@ -973,9 +1004,6 @@ video {
|
|
|
973
1004
|
.h-7 {
|
|
974
1005
|
height: 1.75rem;
|
|
975
1006
|
}
|
|
976
|
-
.h-2\/5 {
|
|
977
|
-
height: 40%;
|
|
978
|
-
}
|
|
979
1007
|
.h-3\.5 {
|
|
980
1008
|
height: 0.875rem;
|
|
981
1009
|
}
|
|
@@ -1116,21 +1144,15 @@ video {
|
|
|
1116
1144
|
.grow {
|
|
1117
1145
|
flex-grow: 1;
|
|
1118
1146
|
}
|
|
1119
|
-
.basis-
|
|
1120
|
-
flex-basis:
|
|
1147
|
+
.basis-full {
|
|
1148
|
+
flex-basis: 100%;
|
|
1121
1149
|
}
|
|
1122
1150
|
.basis-2\/5 {
|
|
1123
1151
|
flex-basis: 40%;
|
|
1124
1152
|
}
|
|
1125
|
-
.basis-1\/3 {
|
|
1126
|
-
flex-basis: 33.333333%;
|
|
1127
|
-
}
|
|
1128
1153
|
.basis-3\/5 {
|
|
1129
1154
|
flex-basis: 60%;
|
|
1130
1155
|
}
|
|
1131
|
-
.basis-full {
|
|
1132
|
-
flex-basis: 100%;
|
|
1133
|
-
}
|
|
1134
1156
|
.-translate-x-1\/2 {
|
|
1135
1157
|
--tw-translate-x: -50%;
|
|
1136
1158
|
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));
|
|
@@ -1266,9 +1288,6 @@ video {
|
|
|
1266
1288
|
-moz-column-gap: 1rem;
|
|
1267
1289
|
column-gap: 1rem;
|
|
1268
1290
|
}
|
|
1269
|
-
.gap-y-4 {
|
|
1270
|
-
row-gap: 1rem;
|
|
1271
|
-
}
|
|
1272
1291
|
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
1273
1292
|
--tw-divide-y-reverse: 0;
|
|
1274
1293
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
@@ -1317,12 +1336,12 @@ video {
|
|
|
1317
1336
|
.rounded {
|
|
1318
1337
|
border-radius: 0.25rem;
|
|
1319
1338
|
}
|
|
1320
|
-
.rounded-3xl {
|
|
1321
|
-
border-radius: 1.5rem;
|
|
1322
|
-
}
|
|
1323
1339
|
.rounded-full {
|
|
1324
1340
|
border-radius: 9999px;
|
|
1325
1341
|
}
|
|
1342
|
+
.rounded-3xl {
|
|
1343
|
+
border-radius: 1.5rem;
|
|
1344
|
+
}
|
|
1326
1345
|
.rounded-lg {
|
|
1327
1346
|
border-radius: 0.5rem;
|
|
1328
1347
|
}
|
|
@@ -1380,15 +1399,15 @@ video {
|
|
|
1380
1399
|
.border-r {
|
|
1381
1400
|
border-right-width: 1px;
|
|
1382
1401
|
}
|
|
1383
|
-
.border-l-2 {
|
|
1384
|
-
border-left-width: 2px;
|
|
1385
|
-
}
|
|
1386
1402
|
.border-b-0 {
|
|
1387
1403
|
border-bottom-width: 0px;
|
|
1388
1404
|
}
|
|
1389
1405
|
.border-t {
|
|
1390
1406
|
border-top-width: 1px;
|
|
1391
1407
|
}
|
|
1408
|
+
.border-l-2 {
|
|
1409
|
+
border-left-width: 2px;
|
|
1410
|
+
}
|
|
1392
1411
|
.border-l-0 {
|
|
1393
1412
|
border-left-width: 0px;
|
|
1394
1413
|
}
|
|
@@ -1404,9 +1423,6 @@ video {
|
|
|
1404
1423
|
.border-dashed {
|
|
1405
1424
|
border-style: dashed;
|
|
1406
1425
|
}
|
|
1407
|
-
.border-dotted {
|
|
1408
|
-
border-style: dotted;
|
|
1409
|
-
}
|
|
1410
1426
|
.border-button-hollow {
|
|
1411
1427
|
border-color: #006dc1;
|
|
1412
1428
|
border-color: var(--color-button-hollow);
|
|
@@ -1435,10 +1451,6 @@ video {
|
|
|
1435
1451
|
border-color: #005293;
|
|
1436
1452
|
border-color: var(--color-primary);
|
|
1437
1453
|
}
|
|
1438
|
-
.border-slate-600 {
|
|
1439
|
-
--tw-border-opacity: 1;
|
|
1440
|
-
border-color: rgba(71, 85, 105, var(--tw-border-opacity));
|
|
1441
|
-
}
|
|
1442
1454
|
.border-gray-200 {
|
|
1443
1455
|
--tw-border-opacity: 1;
|
|
1444
1456
|
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
|
|
@@ -1739,9 +1751,6 @@ video {
|
|
|
1739
1751
|
.pr-2 {
|
|
1740
1752
|
padding-right: 0.5rem;
|
|
1741
1753
|
}
|
|
1742
|
-
.pt-5 {
|
|
1743
|
-
padding-top: 1.25rem;
|
|
1744
|
-
}
|
|
1745
1754
|
.pt-1 {
|
|
1746
1755
|
padding-top: 0.25rem;
|
|
1747
1756
|
}
|
|
@@ -1781,6 +1790,9 @@ video {
|
|
|
1781
1790
|
.pb-4 {
|
|
1782
1791
|
padding-bottom: 1rem;
|
|
1783
1792
|
}
|
|
1793
|
+
.pt-5 {
|
|
1794
|
+
padding-top: 1.25rem;
|
|
1795
|
+
}
|
|
1784
1796
|
.pt-1\.5 {
|
|
1785
1797
|
padding-top: 0.375rem;
|
|
1786
1798
|
}
|
|
@@ -2200,7 +2212,7 @@ video {
|
|
|
2200
2212
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
2201
2213
|
}
|
|
2202
2214
|
.counter-reset {
|
|
2203
|
-
counter-reset:
|
|
2215
|
+
counter-reset: cnt1670928977094;
|
|
2204
2216
|
}
|
|
2205
2217
|
.line-clamp-4 {
|
|
2206
2218
|
overflow: hidden;
|
|
@@ -2432,7 +2444,7 @@ video {
|
|
|
2432
2444
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2433
2445
|
}
|
|
2434
2446
|
.-ordered {
|
|
2435
|
-
counter-increment:
|
|
2447
|
+
counter-increment: cnt1670928977094 1;
|
|
2436
2448
|
}
|
|
2437
2449
|
.-ordered::before {
|
|
2438
2450
|
position: absolute;
|
|
@@ -2448,7 +2460,7 @@ video {
|
|
|
2448
2460
|
letter-spacing: .0125em;
|
|
2449
2461
|
--tw-text-opacity: 1;
|
|
2450
2462
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2451
|
-
content: counter(
|
|
2463
|
+
content: counter(cnt1670928977094);
|
|
2452
2464
|
}
|
|
2453
2465
|
/*! ****************************/
|
|
2454
2466
|
/*! text-shadow */
|
|
@@ -3312,10 +3324,6 @@ video {
|
|
|
3312
3324
|
color: #006dc1;
|
|
3313
3325
|
color: var(--color-topline);
|
|
3314
3326
|
}
|
|
3315
|
-
.hover\:text-link:hover {
|
|
3316
|
-
color: #006eb7;
|
|
3317
|
-
color: var(--color-link);
|
|
3318
|
-
}
|
|
3319
3327
|
.hover\:text-content-nav:hover {
|
|
3320
3328
|
color: #005293;
|
|
3321
3329
|
color: var(--color-content-nav);
|
|
@@ -3365,12 +3373,6 @@ video {
|
|
|
3365
3373
|
.before\:absolute::before {
|
|
3366
3374
|
position: absolute;
|
|
3367
3375
|
}
|
|
3368
|
-
.before\:inset-0::before {
|
|
3369
|
-
top: 0px;
|
|
3370
|
-
right: 0px;
|
|
3371
|
-
bottom: 0px;
|
|
3372
|
-
left: 0px;
|
|
3373
|
-
}
|
|
3374
3376
|
.before\:-top-5::before {
|
|
3375
3377
|
top: -1.25rem;
|
|
3376
3378
|
}
|
|
@@ -3763,6 +3765,10 @@ video {
|
|
|
3763
3765
|
flex: 1 1 auto;
|
|
3764
3766
|
}
|
|
3765
3767
|
|
|
3768
|
+
.md\:basis-2\/3 {
|
|
3769
|
+
flex-basis: 66.666667%;
|
|
3770
|
+
}
|
|
3771
|
+
|
|
3766
3772
|
.md\:basis-1\/3 {
|
|
3767
3773
|
flex-basis: 33.333333%;
|
|
3768
3774
|
}
|
|
@@ -3771,10 +3777,6 @@ video {
|
|
|
3771
3777
|
flex-basis: 50%;
|
|
3772
3778
|
}
|
|
3773
3779
|
|
|
3774
|
-
.md\:basis-2\/3 {
|
|
3775
|
-
flex-basis: 66.666667%;
|
|
3776
|
-
}
|
|
3777
|
-
|
|
3778
3780
|
.md\:basis-full {
|
|
3779
3781
|
flex-basis: 100%;
|
|
3780
3782
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
{{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}}
|
|
4
4
|
{{~#if _name}} name="{{_name}}"{{/if}}
|
|
5
5
|
{{~#if _title}} title="{{_title}}"{{/if}}
|
|
6
|
-
class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _buttonColor}} {{_buttonColor}}{{/if}}{{#if _buttonSpace}} {{> components/button/button_round_classes _teaserSize=_teaserSize _teaserType=_teaserType}}{{/if}}{{#if _webview}} -webview{{/if}}"
|
|
6
|
+
class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _buttonColor}} {{_buttonColor}}{{/if}}{{#if _buttonSpace}} {{> components/button/button_round_classes _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}{{/if}}{{#if _webview}} -webview{{/if}}"
|
|
7
7
|
{{~#if _value}} value="{{_value}}"{{/if}}
|
|
8
8
|
{{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}}
|
|
9
9
|
{{~#if _x-show}} x-show="{{_x-show}}"{{/if}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
|
|
1
|
+
<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto{{#if _isTeaser}} z-20{{/if}} js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
|
|
2
2
|
</div>
|
|
3
3
|
{{#if _isTeaser}}
|
|
4
4
|
<div class="relative {{_aspectRatio}}" x-show="!avStart" >
|
|
@@ -9,18 +9,12 @@
|
|
|
9
9
|
{{/with~}}
|
|
10
10
|
{{/unless}}
|
|
11
11
|
{{/unless}}
|
|
12
|
-
{{#with _teaser}}
|
|
13
|
-
{{
|
|
14
|
-
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}
|
|
15
|
-
{{else}}
|
|
16
|
-
{{#decorator 'components/base/link' _cssClasses="c-teaser__mediaLink" _isAriaHidden=true }}
|
|
17
|
-
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}
|
|
18
|
-
{{/decorator }}
|
|
19
|
-
{{/if}}
|
|
12
|
+
{{#with _teaser}}
|
|
13
|
+
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}
|
|
20
14
|
{{/with}}
|
|
21
15
|
{{> components/button/button_round
|
|
22
16
|
_isButton="true"
|
|
23
|
-
_addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
|
|
17
|
+
_addClass='absolute bottom-0 right-0 fill-white hover:text-white ds-focus rounded-full js-mediaplayer__button'
|
|
24
18
|
_buttonColor=(if _isLivestream ' text-orange-spicyCarrot hover:fill-orange-spicyCarrot' ' text-blue-jellyBean hover:fill-blue-jellyBean')
|
|
25
19
|
_teaserType=_teaserType
|
|
26
20
|
_teaserSize=_teaserSize
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}
|
|
1
|
+
{{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0 z-20" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div class="{{~#if this.isMobile1to1}}basis-3/5{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
|
|
2
2
|
<header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
3
|
-
{{#decorator 'components/base/link' _css="hover:text-toplineColor" }}
|
|
3
|
+
{{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }}
|
|
4
4
|
{{> components/teaser/components/teaser_heading
|
|
5
5
|
_fontVariant=this.headingFontVariant
|
|
6
6
|
_headlineTag=this.headlineTag
|
|
@@ -6,9 +6,7 @@
|
|
|
6
6
|
{{/with~}}
|
|
7
7
|
{{/unless}}
|
|
8
8
|
{{/unless}}
|
|
9
|
-
{{
|
|
10
|
-
{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=../this.dontLazyload _addClassImg="" ~}}
|
|
11
|
-
{{/decorator}}
|
|
9
|
+
{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=../this.dontLazyload _addClassImg="" ~}}
|
|
12
10
|
{{#if this.isProgram}}
|
|
13
11
|
{{#if this.showMediatheksLink}}
|
|
14
12
|
{{#decorator 'components/base/link' _isAriaHidden=true}}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
|
|
2
|
+
<span class='flex space-around {{inline-switch _size '["25"]' '["hidden ","hidden md:block "]'~}}
|
|
3
|
+
text-base mt-3 font-copy'>
|
|
4
|
+
{{~_text~}}
|
|
5
|
+
</span>
|
|
6
|
+
|
|
7
|
+
{{#if this.isExtOrBrandLink}}
|
|
8
|
+
{{#decorator 'components/base/link' _css="relative inline-flex flex-end text-link z-20 ds-focus"}}
|
|
9
|
+
<span class="inline-flex flex-wrap items-end hover:underline decoration-1 font-copy">{{this.link.readMoreText.readMore}}{{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1"}}{{/if~}}</span>
|
|
10
|
+
{{/decorator}}
|
|
11
|
+
{{/if}}
|
|
12
12
|
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
<article class="col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
|
|
1
|
+
<article class="relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
|
|
2
2
|
x-data="{ avStart: false }"
|
|
3
3
|
{{#if this.isMobile1to1}}
|
|
4
4
|
:class="avStart ? 'flex-col' : 'flex-row'"
|
|
5
5
|
{{/if}}
|
|
6
6
|
>
|
|
7
7
|
{{#if this.teaserImage}}
|
|
8
|
-
<figure class="relative {{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/3"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/2"]'~}}"
|
|
8
|
+
<figure class="relative {{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-full md:basis-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/3"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/2"]'~}}"
|
|
9
9
|
{{#if this.isMobile1to1}}
|
|
10
10
|
:class="avStart ? '!ar-16-9' : ''"
|
|
11
11
|
{{/if}}
|
|
12
12
|
>
|
|
13
13
|
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.teaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }}
|
|
14
14
|
</figure>
|
|
15
|
-
{{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.teaserSize '["hero","100","50"]' '["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]') }}
|
|
15
|
+
{{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.teaserSize '["hero","100","50"]' '["basis-full md:basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]') }}
|
|
16
16
|
{{else}}
|
|
17
17
|
{{> components/teaser/components/teaser_body _outerCssClasses="basis-full" }}
|
|
18
18
|
{{/if}}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
|
|
4
4
|
</figure>
|
|
5
5
|
<div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">
|
|
6
|
-
{{#decorator 'components/base/link' _css="teaser-
|
|
6
|
+
{{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-3xl before:rounded-br-3xl hover:text-toplineColor"}}
|
|
7
7
|
{{> components/teaser/components/teaser_heading
|
|
8
8
|
_headlineTag="h2"
|
|
9
9
|
_headlineCss="text-shadow text-center text-white mb-4 mx-4 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8 line-clamp-4 xs:line-clamp-6 md:line-clamp-4 lg:line-clamp-5"
|
|
@@ -16,6 +16,6 @@
|
|
|
16
16
|
_teaserType=this.teaserType
|
|
17
17
|
_font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}
|
|
18
18
|
{{/decorator}}
|
|
19
|
-
{{~> components/button/button_pseudo _type="hollow-white" _withLink=true _isLinkAriaHidden=true _linkCss="cta absolute flex w-full h-full items-end justify-center" _buttonCss=(inline-switch this.teaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _buttonText=this.link.readMoreText.readMoreLong ~}}
|
|
19
|
+
{{~> components/button/button_pseudo _type="hollow-white" _withLink=true _isLinkAriaHidden=true _linkCss="ds-cta absolute flex w-full h-full items-end justify-center" _buttonCss=(inline-switch this.teaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _buttonText=this.link.readMoreText.readMoreLong ~}}
|
|
20
20
|
</div>
|
|
21
21
|
</article>
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
{{#if this.teaserImage}}
|
|
11
11
|
<figure class="relative
|
|
12
12
|
{{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
|
|
13
|
-
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}
|
|
13
|
+
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}
|
|
14
14
|
</figure>
|
|
15
15
|
{{#if this.displayTeaserBodyAsImageOverlay}}
|
|
16
16
|
{{#decorator 'components/teaser/components/teaser_image_overlay' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}
|
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": "0.
|
|
9
|
+
"version": "0.107.0",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -70,30 +70,60 @@
|
|
|
70
70
|
border-radius: 50%;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
.
|
|
74
|
-
|
|
73
|
+
.ds-focus {
|
|
74
|
+
@apply z-20;
|
|
75
|
+
@apply focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.ds-focus:focus:not(:focus-visible) {
|
|
79
|
+
@apply shadow-none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.ds-button {
|
|
83
|
+
@apply z-20;
|
|
84
|
+
@apply focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.ds-button:focus:not(:focus-visible) {
|
|
88
|
+
@apply shadow-none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.ds-link {
|
|
92
|
+
@apply focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.ds-link:focus:not(:focus-visible) {
|
|
96
|
+
@apply shadow-none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.ds-teaser-focus {
|
|
100
|
+
@apply before:content-[''] before:absolute before:inset-0 before:z-10;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.ds-teaser-focus:focus::before,
|
|
104
|
+
.ds-teaser-focus:focus + .ds-cta span {
|
|
75
105
|
@apply shadow-teaser-focus;
|
|
76
106
|
@apply shadow-focus-state;
|
|
77
107
|
}
|
|
78
108
|
|
|
79
|
-
.teaser-
|
|
109
|
+
.ds-teaser-focus:focus + .ds-cta span {
|
|
80
110
|
@apply bg-button-inverted;
|
|
81
111
|
@apply text-button-hollow;
|
|
82
112
|
@apply border-none;
|
|
83
113
|
}
|
|
84
114
|
|
|
85
|
-
.teaser-
|
|
86
|
-
.teaser-
|
|
115
|
+
.ds-teaser-focus:focus:not(:focus-visible)::before,
|
|
116
|
+
.ds-teaser-focus:focus:not(:focus-visible) + .ds-cta span {
|
|
87
117
|
@apply shadow-none;
|
|
88
118
|
}
|
|
89
119
|
|
|
90
|
-
.teaser-
|
|
120
|
+
.ds-teaser-focus:focus:not(:focus-visible) + .ds-cta span {
|
|
91
121
|
@apply bg-transparent;
|
|
92
122
|
@apply text-button-inverted;
|
|
93
123
|
@apply border-solid;
|
|
94
124
|
}
|
|
95
125
|
|
|
96
|
-
.teaser-
|
|
126
|
+
.ds-teaser-focus:focus {
|
|
97
127
|
@apply outline-none;
|
|
98
128
|
}
|
|
99
129
|
}
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"fallback": "images/{#image}_v-16to9__medium.jpg",
|
|
24
24
|
"sources": [
|
|
25
25
|
{
|
|
26
|
-
"sizes": "(min-width: 1024px) 650px, (min-width: 768px)
|
|
26
|
+
"sizes": "(min-width: 1024px) 650px, (min-width: 768px) 620px, 100vw",
|
|
27
27
|
"srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9__medium__extended.jpg 640w, images/{#image}_v-16to9.jpg 960w, images/{#image}_v-16to9__retina.jpg 1920w"
|
|
28
28
|
}
|
|
29
29
|
]
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
{{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}}
|
|
4
4
|
{{~#if _name}} name="{{_name}}"{{/if}}
|
|
5
5
|
{{~#if _title}} title="{{_title}}"{{/if}}
|
|
6
|
-
class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _buttonColor}} {{_buttonColor}}{{/if}}{{#if _buttonSpace}} {{> components/button/button_round_classes _teaserSize=_teaserSize _teaserType=_teaserType}}{{/if}}{{#if _webview}} -webview{{/if}}"
|
|
6
|
+
class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _buttonColor}} {{_buttonColor}}{{/if}}{{#if _buttonSpace}} {{> components/button/button_round_classes _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}{{/if}}{{#if _webview}} -webview{{/if}}"
|
|
7
7
|
{{~#if _value}} value="{{_value}}"{{/if}}
|
|
8
8
|
{{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}}
|
|
9
9
|
{{~#if _x-show}} x-show="{{_x-show}}"{{/if}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
|
|
1
|
+
<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto{{#if _isTeaser}} z-20{{/if}} js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
|
|
2
2
|
</div>
|
|
3
3
|
{{#if _isTeaser}}
|
|
4
4
|
<div class="relative {{_aspectRatio}}" x-show="!avStart" >
|
|
@@ -9,18 +9,12 @@
|
|
|
9
9
|
{{/with~}}
|
|
10
10
|
{{/unless}}
|
|
11
11
|
{{/unless}}
|
|
12
|
-
{{#with _teaser}}
|
|
13
|
-
{{
|
|
14
|
-
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}
|
|
15
|
-
{{else}}
|
|
16
|
-
{{#decorator 'components/base/link' _cssClasses="c-teaser__mediaLink" _isAriaHidden=true }}
|
|
17
|
-
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}
|
|
18
|
-
{{/decorator }}
|
|
19
|
-
{{/if}}
|
|
12
|
+
{{#with _teaser}}
|
|
13
|
+
{{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg="ar__content" _noDelay=../_noDelay ~}}
|
|
20
14
|
{{/with}}
|
|
21
15
|
{{> components/button/button_round
|
|
22
16
|
_isButton="true"
|
|
23
|
-
_addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
|
|
17
|
+
_addClass='absolute bottom-0 right-0 fill-white hover:text-white ds-focus rounded-full js-mediaplayer__button'
|
|
24
18
|
_buttonColor=(if _isLivestream ' text-orange-spicyCarrot hover:fill-orange-spicyCarrot' ' text-blue-jellyBean hover:fill-blue-jellyBean')
|
|
25
19
|
_teaserType=_teaserType
|
|
26
20
|
_teaserSize=_teaserSize
|
package/src/stories/views/components/teaser/components/teaser_av_consumption_close_button.hbs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}
|
|
1
|
+
{{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0 z-20" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div class="{{~#if this.isMobile1to1}}basis-3/5{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
|
|
2
2
|
<header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
3
|
-
{{#decorator 'components/base/link' _css="hover:text-toplineColor" }}
|
|
3
|
+
{{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }}
|
|
4
4
|
{{> components/teaser/components/teaser_heading
|
|
5
5
|
_fontVariant=this.headingFontVariant
|
|
6
6
|
_headlineTag=this.headlineTag
|
|
@@ -6,9 +6,7 @@
|
|
|
6
6
|
{{/with~}}
|
|
7
7
|
{{/unless}}
|
|
8
8
|
{{/unless}}
|
|
9
|
-
{{
|
|
10
|
-
{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=../this.dontLazyload _addClassImg="" ~}}
|
|
11
|
-
{{/decorator}}
|
|
9
|
+
{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=../this.dontLazyload _addClassImg="" ~}}
|
|
12
10
|
{{#if this.isProgram}}
|
|
13
11
|
{{#if this.showMediatheksLink}}
|
|
14
12
|
{{#decorator 'components/base/link' _isAriaHidden=true}}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
|
|
2
|
+
<span class='flex space-around {{inline-switch _size '["25"]' '["hidden ","hidden md:block "]'~}}
|
|
3
|
+
text-base mt-3 font-copy'>
|
|
4
|
+
{{~_text~}}
|
|
5
|
+
</span>
|
|
6
|
+
|
|
7
|
+
{{#if this.isExtOrBrandLink}}
|
|
8
|
+
{{#decorator 'components/base/link' _css="relative inline-flex flex-end text-link z-20 ds-focus"}}
|
|
9
|
+
<span class="inline-flex flex-wrap items-end hover:underline decoration-1 font-copy">{{this.link.readMoreText.readMore}}{{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 fill-current ml-1"}}{{/if~}}</span>
|
|
10
|
+
{{/decorator}}
|
|
11
|
+
{{/if}}
|
|
12
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 650px, (min-width: 768px)
|
|
1
|
+
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 650px, (min-width: 768px) 620px, 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}
|
package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_audio.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Der Hasebe-Kane-Nahkampf geht in die zweite Runde","topline":"Eintracht trifft auf Tottenham","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-10-11T19:46+0200","htmlDate":"11.10.2022","date":"11.10.22","dateSeparatorTime":"11.10.22, 19:46"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hasebe-kane-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 650px, (min-width: 768px)
|
|
1
|
+
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Der Hasebe-Kane-Nahkampf geht in die zweite Runde","topline":"Eintracht trifft auf Tottenham","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-10-11T19:46+0200","htmlDate":"11.10.2022","date":"11.10.22","dateSeparatorTime":"11.10.22, 19:46"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hasebe-kane-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 650px, (min-width: 768px) 620px, 100vw","srcset":"images/hasebe-kane-102_v-16to9__small.jpg 320w, images/hasebe-kane-102_v-16to9__medium.jpg 480w, images/hasebe-kane-102_v-16to9__medium__extended.jpg 640w, images/hasebe-kane-102_v-16to9.jpg 960w, images/hasebe-kane-102_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":true,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":true,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":true,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Sport","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Beim Hinspiel brachte Altmeister Makoto Hasebe Sturm-Star Harry Kane bis an den Rande der Verzweiflung. Der bittet im Rückspiel nun zur Revanche. Vorher gibt es aber lobende Worte.","sophoraId":"hasebe-kane-100","profiles":"Von Nicolas Herold aus London","teaserLead":{"avDocument":{"isAudio":true,"toModel":{"audioElement":{"isPodcast":false,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2563","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"100"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2563","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"100"}}}},"image":""},"geotag":[{"title":"Frankfurt"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}
|
package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_comments.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 650px, (min-width: 768px)
|
|
1
|
+
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 650px, (min-width: 768px) 620px, 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}},"commentsSsi":{"commentNumber":"666","hasOneComment":false,"hasManyComments":true,"commentLink":{"link":{"url":"/teaser1-comments","webviewUrl":"/teaser1-comments#webview","isTargetBlank":false,"readMoreText":{"readMoreScreenreader":"Zu den Kommentaren des Artikels"}}}},"documentSection":"Gesellschaft","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}
|
package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_label.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 650px, (min-width: 768px)
|
|
1
|
+
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 650px, (min-width: 768px) 620px, 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"BylineText aus ssi","bylineText":"BylineText"}}}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"50","isMobile1to1":
|
|
1
|
+
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative-ds","teaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"25","isMobile1to1":
|
|
1
|
+
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"25","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
<article class="col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
|
|
1
|
+
<article class="relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
|
|
2
2
|
x-data="{ avStart: false }"
|
|
3
3
|
{{#if this.isMobile1to1}}
|
|
4
4
|
:class="avStart ? 'flex-col' : 'flex-row'"
|
|
5
5
|
{{/if}}
|
|
6
6
|
>
|
|
7
7
|
{{#if this.teaserImage}}
|
|
8
|
-
<figure class="relative {{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/3"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/2"]'~}}"
|
|
8
|
+
<figure class="relative {{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-full md:basis-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/3"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/2"]'~}}"
|
|
9
9
|
{{#if this.isMobile1to1}}
|
|
10
10
|
:class="avStart ? '!ar-16-9' : ''"
|
|
11
11
|
{{/if}}
|
|
12
12
|
>
|
|
13
13
|
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.teaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }}
|
|
14
14
|
</figure>
|
|
15
|
-
{{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.teaserSize '["hero","100","50"]' '["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]') }}
|
|
15
|
+
{{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.teaserSize '["hero","100","50"]' '["basis-full md:basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]') }}
|
|
16
16
|
{{else}}
|
|
17
17
|
{{> components/teaser/components/teaser_body _outerCssClasses="basis-full" }}
|
|
18
18
|
{{/if}}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
|
|
4
4
|
</figure>
|
|
5
5
|
<div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">
|
|
6
|
-
{{#decorator 'components/base/link' _css="teaser-
|
|
6
|
+
{{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-3xl before:rounded-br-3xl hover:text-toplineColor"}}
|
|
7
7
|
{{> components/teaser/components/teaser_heading
|
|
8
8
|
_headlineTag="h2"
|
|
9
9
|
_headlineCss="text-shadow text-center text-white mb-4 mx-4 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8 line-clamp-4 xs:line-clamp-6 md:line-clamp-4 lg:line-clamp-5"
|
|
@@ -16,6 +16,6 @@
|
|
|
16
16
|
_teaserType=this.teaserType
|
|
17
17
|
_font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}
|
|
18
18
|
{{/decorator}}
|
|
19
|
-
{{~> components/button/button_pseudo _type="hollow-white" _withLink=true _isLinkAriaHidden=true _linkCss="cta absolute flex w-full h-full items-end justify-center" _buttonCss=(inline-switch this.teaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _buttonText=this.link.readMoreText.readMoreLong ~}}
|
|
19
|
+
{{~> components/button/button_pseudo _type="hollow-white" _withLink=true _isLinkAriaHidden=true _linkCss="ds-cta absolute flex w-full h-full items-end justify-center" _buttonCss=(inline-switch this.teaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _buttonText=this.link.readMoreText.readMoreLong ~}}
|
|
20
20
|
</div>
|
|
21
21
|
</article>
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
{{#if this.teaserImage}}
|
|
11
11
|
<figure class="relative
|
|
12
12
|
{{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
|
|
13
|
-
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}
|
|
13
|
+
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}
|
|
14
14
|
</figure>
|
|
15
15
|
{{#if this.displayTeaserBodyAsImageOverlay}}
|
|
16
16
|
{{#decorator 'components/teaser/components/teaser_image_overlay' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
<article class="col-span-12 flex gap-y-3 gap-x-4
|
|
2
|
-
{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
|
|
3
|
-
{{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}}
|
|
4
|
-
"
|
|
5
|
-
x-data="{ avStart: false }"
|
|
6
|
-
{{#if this.isMobile1to1}}
|
|
7
|
-
:class="avStart ? 'flex-col' : 'flex-row'"
|
|
8
|
-
{{/if}}
|
|
9
|
-
>
|
|
10
|
-
|
|
11
|
-
{{#if this.isEvent}}
|
|
12
|
-
{{! ---- To handle two events ----}}
|
|
13
|
-
{{#if this.moreThenOneEvent}}
|
|
14
|
-
<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
15
|
-
<figure class="relative
|
|
16
|
-
{{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
|
|
17
|
-
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}
|
|
18
|
-
</figure>
|
|
19
|
-
<div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white
|
|
20
|
-
{{inline-switch teaserSize '["100"]' '["bottom-0 w-full h-2/5 bg-neutral-200 opacity-80"]'}}"
|
|
21
|
-
aria-hidden="true">
|
|
22
|
-
<div class="self-center block mx-4 text-center text-black">
|
|
23
|
-
<span class="text-xl font-headingSerif font-bold">{{ this.firstInstant.startDate.day}}</span>
|
|
24
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}}</span>
|
|
25
|
-
+<br>
|
|
26
|
-
<span class="text-xl font-headingSerif font-bold">{{this.lastInstant.startDate.day}}</span>
|
|
27
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}} </span>
|
|
28
|
-
</div>
|
|
29
|
-
<div class="{{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}
|
|
30
|
-
{{inline-switch teaserSize '["100"]' '["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]'}}
|
|
31
|
-
{{inline-switch teaserSize '["50","33"]' '[" hidden"," hidden"]'}}">
|
|
32
|
-
<header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
33
|
-
{{#decorator 'components/base/link' css="hover:text-toplineColor" }}
|
|
34
|
-
{{> components/teaser/components/teaser_heading
|
|
35
|
-
fontVariant=this.headingFontVariant
|
|
36
|
-
headlineTag=this.headlineTag
|
|
37
|
-
label=this.label
|
|
38
|
-
readMore=this.link.readMoreText.readMoreScreenreader
|
|
39
|
-
size=this.teaserSize
|
|
40
|
-
title=this.title
|
|
41
|
-
topline=this.topline
|
|
42
|
-
teaserType=this.teaserType
|
|
43
|
-
_isMobile1to1=this.isMobile1to1}}
|
|
44
|
-
{{/decorator}}
|
|
45
|
-
</header>
|
|
46
|
-
<section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
47
|
-
{{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
|
|
48
|
-
</section>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</article>
|
|
52
|
-
{{else if this.moreThenTwoEvents}}
|
|
53
|
-
{{! ---- To handle more than two events ----}}
|
|
54
|
-
<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
55
|
-
<figure class="relative
|
|
56
|
-
{{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
|
|
57
|
-
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}
|
|
58
|
-
</figure>
|
|
59
|
-
<div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white" aria-hidden="true">
|
|
60
|
-
<div class="self-center block mx-4 text-center text-black">
|
|
61
|
-
<span class="text-xl font-headingSerif font-bold">{{ this.firstInstant.startDate.day }} </span>
|
|
62
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort }} </span>
|
|
63
|
-
|<br>
|
|
64
|
-
<span class="text-xl font-headingSerif font-bold">{{this.lastInstant.startDate.day }} </span>
|
|
65
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort }} </span>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
</article>
|
|
69
|
-
{{else}}
|
|
70
|
-
{{! ---- To handle a single event ----}}
|
|
71
|
-
<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
72
|
-
<figure class="relative
|
|
73
|
-
{{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
|
|
74
|
-
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}
|
|
75
|
-
</figure>
|
|
76
|
-
<div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white
|
|
77
|
-
{{inline-switch teaserSize '["100"]' '["bottom-0 w-full h-2/5 bg-neutral-200 opacity-80"]'}}"
|
|
78
|
-
aria-hidden="true">
|
|
79
|
-
<div class="self-center block mx-4 text-center text-black">
|
|
80
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.weekdayNameShort }} </span>
|
|
81
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.day }} </span>
|
|
82
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort }} </span>
|
|
83
|
-
</div>
|
|
84
|
-
<div class=" {{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}
|
|
85
|
-
{{inline-switch teaserSize '["100"]' '["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]'}}
|
|
86
|
-
{{inline-switch teaserSize '["50","33"]' '[" hidden"," hidden"]'}}">
|
|
87
|
-
<header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
88
|
-
{{#decorator 'components/base/link' _css="hover:text-toplineColor" }}
|
|
89
|
-
{{> components/teaser/components/teaser_heading
|
|
90
|
-
fontVariant=this.headingFontVariant
|
|
91
|
-
headlineTag=this.headlineTag
|
|
92
|
-
label=this.label
|
|
93
|
-
readMore=this.link.readMoreText.readMoreScreenreader
|
|
94
|
-
size=this.teaserSize
|
|
95
|
-
title=this.title
|
|
96
|
-
topline=this.topline
|
|
97
|
-
teaserType=this.teaserType
|
|
98
|
-
_isMobile1to1=this.isMobile1to1}}
|
|
99
|
-
{{/decorator}}
|
|
100
|
-
</header>
|
|
101
|
-
<section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
102
|
-
{{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
|
|
103
|
-
</section>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</article>
|
|
107
|
-
{{/if}}
|
|
108
|
-
{{else}}
|
|
109
|
-
<figure class="relative
|
|
110
|
-
{{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
|
|
111
|
-
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}
|
|
112
|
-
</figure>
|
|
113
|
-
{{/if}}
|
|
114
|
-
<div class="{{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}{{inline-switch teaserSize '["100"]' '[" hidden"]'}}">
|
|
115
|
-
<header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
116
|
-
{{#decorator 'components/base/link' _css="hover:text-toplineColor" }}
|
|
117
|
-
{{> components/teaser/components/teaser_heading
|
|
118
|
-
fontVariant=this.headingFontVariant
|
|
119
|
-
headlineTag=this.headlineTag
|
|
120
|
-
label=this.label
|
|
121
|
-
readMore=this.link.readMoreText.readMoreScreenreader
|
|
122
|
-
size=this.teaserSize
|
|
123
|
-
title=this.title
|
|
124
|
-
topline=this.topline
|
|
125
|
-
teaserType=this.teaserType
|
|
126
|
-
_isMobile1to1=this.isMobile1to1}}
|
|
127
|
-
{{/decorator}}
|
|
128
|
-
</header>
|
|
129
|
-
<section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
130
|
-
{{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
|
|
131
|
-
</section>
|
|
132
|
-
</div>
|
|
133
|
-
</article>
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
<article class="col-span-12 flex gap-y-3 gap-x-4
|
|
2
|
-
{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
|
|
3
|
-
{{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}}
|
|
4
|
-
"
|
|
5
|
-
x-data="{ avStart: false }"
|
|
6
|
-
{{#if this.isMobile1to1}}
|
|
7
|
-
:class="avStart ? 'flex-col' : 'flex-row'"
|
|
8
|
-
{{/if}}
|
|
9
|
-
>
|
|
10
|
-
|
|
11
|
-
{{#if this.isEvent}}
|
|
12
|
-
{{! ---- To handle two events ----}}
|
|
13
|
-
{{#if this.moreThenOneEvent}}
|
|
14
|
-
<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
15
|
-
<figure class="relative
|
|
16
|
-
{{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
|
|
17
|
-
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}
|
|
18
|
-
</figure>
|
|
19
|
-
<div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white
|
|
20
|
-
{{inline-switch teaserSize '["100"]' '["bottom-0 w-full h-2/5 bg-neutral-200 opacity-80"]'}}"
|
|
21
|
-
aria-hidden="true">
|
|
22
|
-
<div class="self-center block mx-4 text-center text-black">
|
|
23
|
-
<span class="text-xl font-headingSerif font-bold">{{ this.firstInstant.startDate.day}}</span>
|
|
24
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}}</span>
|
|
25
|
-
+<br>
|
|
26
|
-
<span class="text-xl font-headingSerif font-bold">{{this.lastInstant.startDate.day}}</span>
|
|
27
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}} </span>
|
|
28
|
-
</div>
|
|
29
|
-
<div class="{{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}
|
|
30
|
-
{{inline-switch teaserSize '["100"]' '["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]'}}
|
|
31
|
-
{{inline-switch teaserSize '["50","33"]' '[" hidden"," hidden"]'}}">
|
|
32
|
-
<header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
33
|
-
{{#decorator 'components/base/link' css="hover:text-toplineColor" }}
|
|
34
|
-
{{> components/teaser/components/teaser_heading
|
|
35
|
-
fontVariant=this.headingFontVariant
|
|
36
|
-
headlineTag=this.headlineTag
|
|
37
|
-
label=this.label
|
|
38
|
-
readMore=this.link.readMoreText.readMoreScreenreader
|
|
39
|
-
size=this.teaserSize
|
|
40
|
-
title=this.title
|
|
41
|
-
topline=this.topline
|
|
42
|
-
teaserType=this.teaserType
|
|
43
|
-
_isMobile1to1=this.isMobile1to1}}
|
|
44
|
-
{{/decorator}}
|
|
45
|
-
</header>
|
|
46
|
-
<section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
47
|
-
{{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
|
|
48
|
-
</section>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</article>
|
|
52
|
-
{{else if this.moreThenTwoEvents}}
|
|
53
|
-
{{! ---- To handle more than two events ----}}
|
|
54
|
-
<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
55
|
-
<figure class="relative
|
|
56
|
-
{{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
|
|
57
|
-
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}
|
|
58
|
-
</figure>
|
|
59
|
-
<div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white" aria-hidden="true">
|
|
60
|
-
<div class="self-center block mx-4 text-center text-black">
|
|
61
|
-
<span class="text-xl font-headingSerif font-bold">{{ this.firstInstant.startDate.day }} </span>
|
|
62
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort }} </span>
|
|
63
|
-
|<br>
|
|
64
|
-
<span class="text-xl font-headingSerif font-bold">{{this.lastInstant.startDate.day }} </span>
|
|
65
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort }} </span>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
</article>
|
|
69
|
-
{{else}}
|
|
70
|
-
{{! ---- To handle a single event ----}}
|
|
71
|
-
<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
72
|
-
<figure class="relative
|
|
73
|
-
{{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
|
|
74
|
-
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}
|
|
75
|
-
</figure>
|
|
76
|
-
<div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white
|
|
77
|
-
{{inline-switch teaserSize '["100"]' '["bottom-0 w-full h-2/5 bg-neutral-200 opacity-80"]'}}"
|
|
78
|
-
aria-hidden="true">
|
|
79
|
-
<div class="self-center block mx-4 text-center text-black">
|
|
80
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.weekdayNameShort }} </span>
|
|
81
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.day }} </span>
|
|
82
|
-
<span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort }} </span>
|
|
83
|
-
</div>
|
|
84
|
-
<div class=" {{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}
|
|
85
|
-
{{inline-switch teaserSize '["100"]' '["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]'}}
|
|
86
|
-
{{inline-switch teaserSize '["50","33"]' '[" hidden"," hidden"]'}}">
|
|
87
|
-
<header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
88
|
-
{{#decorator 'components/base/link' _css="hover:text-toplineColor" }}
|
|
89
|
-
{{> components/teaser/components/teaser_heading
|
|
90
|
-
fontVariant=this.headingFontVariant
|
|
91
|
-
headlineTag=this.headlineTag
|
|
92
|
-
label=this.label
|
|
93
|
-
readMore=this.link.readMoreText.readMoreScreenreader
|
|
94
|
-
size=this.teaserSize
|
|
95
|
-
title=this.title
|
|
96
|
-
topline=this.topline
|
|
97
|
-
teaserType=this.teaserType
|
|
98
|
-
_isMobile1to1=this.isMobile1to1}}
|
|
99
|
-
{{/decorator}}
|
|
100
|
-
</header>
|
|
101
|
-
<section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
102
|
-
{{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
|
|
103
|
-
</section>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</article>
|
|
107
|
-
{{/if}}
|
|
108
|
-
{{else}}
|
|
109
|
-
<figure class="relative
|
|
110
|
-
{{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
|
|
111
|
-
{{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}
|
|
112
|
-
</figure>
|
|
113
|
-
{{/if}}
|
|
114
|
-
<div class="{{~#if this.isMobile1to1}}basis-3/5 md:basis-full{{/if~}}{{inline-switch teaserSize '["100"]' '[" hidden"]'}}">
|
|
115
|
-
<header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
116
|
-
{{#decorator 'components/base/link' _css="hover:text-toplineColor" }}
|
|
117
|
-
{{> components/teaser/components/teaser_heading
|
|
118
|
-
fontVariant=this.headingFontVariant
|
|
119
|
-
headlineTag=this.headlineTag
|
|
120
|
-
label=this.label
|
|
121
|
-
readMore=this.link.readMoreText.readMoreScreenreader
|
|
122
|
-
size=this.teaserSize
|
|
123
|
-
title=this.title
|
|
124
|
-
topline=this.topline
|
|
125
|
-
teaserType=this.teaserType
|
|
126
|
-
_isMobile1to1=this.isMobile1to1}}
|
|
127
|
-
{{/decorator}}
|
|
128
|
-
</header>
|
|
129
|
-
<section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
130
|
-
{{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
|
|
131
|
-
</section>
|
|
132
|
-
</div>
|
|
133
|
-
</article>
|