hr-design-system-handlebars 1.42.3 → 1.43.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 +25 -0
- package/dist/assets/index.css +77 -19
- package/dist/assets/js/components/podcast/podcast_player.alpine.js +4 -1
- package/dist/views/components/article/components/podcast/podcast_episode_article.hbs +35 -34
- package/dist/views/components/content/content_footer/content_footer.hbs +8 -8
- package/dist/views/components/grid/grid_item.hbs +1 -1
- package/dist/views/components/podcast/components/podcast_playbutton.hbs +2 -2
- package/dist/views/components/podcast/components/podcast_player_shorttext.hbs +1 -1
- package/dist/views/components/podcast/components/podcast_player_ui.hbs +5 -5
- package/dist/views/components/podcast/components/podcast_title.hbs +2 -2
- package/dist/views/components/podcast/podcast_player.hbs +55 -55
- package/dist/views/components/socialmedia/socialmedia.hbs +19 -19
- package/dist/views_static/components/article/components/podcast/podcast_episode_article.hbs +35 -34
- package/dist/views_static/components/content/content_footer/content_footer.hbs +8 -8
- package/dist/views_static/components/grid/grid_item.hbs +1 -1
- package/dist/views_static/components/podcast/components/podcast_playbutton.hbs +2 -2
- package/dist/views_static/components/podcast/components/podcast_player_shorttext.hbs +1 -1
- package/dist/views_static/components/podcast/components/podcast_player_ui.hbs +5 -5
- package/dist/views_static/components/podcast/components/podcast_title.hbs +2 -2
- package/dist/views_static/components/podcast/podcast_player.hbs +55 -55
- package/dist/views_static/components/socialmedia/socialmedia.hbs +19 -19
- package/package.json +1 -1
- package/src/assets/css/custom-utilities.css +30 -0
- package/src/assets/tailwind.css +3 -0
- package/src/stories/views/components/article/components/podcast/podcast_episode_article.hbs +35 -34
- package/src/stories/views/components/content/content_footer/content_footer.hbs +8 -8
- package/src/stories/views/components/grid/grid_item.hbs +1 -1
- package/src/stories/views/components/podcast/components/podcast_playbutton.hbs +2 -2
- package/src/stories/views/components/podcast/components/podcast_player_shorttext.hbs +1 -1
- package/src/stories/views/components/podcast/components/podcast_player_ui.hbs +5 -5
- package/src/stories/views/components/podcast/components/podcast_title.hbs +2 -2
- package/src/stories/views/components/podcast/podcast_player.alpine.js +4 -1
- package/src/stories/views/components/podcast/podcast_player.hbs +55 -55
- package/src/stories/views/components/socialmedia/socialmedia.hbs +19 -19
- package/tailwind.config.js +5 -1
|
@@ -1,40 +1,41 @@
|
|
|
1
1
|
<article class="grid grid-page">
|
|
2
|
-
<div class="
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
</div>
|
|
2
|
+
<div class="grid pt-6 col-main grid-content">
|
|
3
|
+
<div class="p-5 head bg-highlight-1 dark:bg-highlight-1-dark rounded-tl-hr rounded-br-hr">
|
|
4
|
+
{{> components/podcast/podcast_player _linkTitle=true _isSinglePage=true _isArticlePlayer=true}}
|
|
5
|
+
</div>
|
|
6
|
+
<div class="pt-6 main">
|
|
7
|
+
{{> components/podcast/components/podcast_player_shorttext }}
|
|
8
|
+
{{> components/content/content_footer/content_footer
|
|
9
|
+
_author=this.audioAuthor
|
|
10
|
+
_showDate=this.hasDwellTime
|
|
11
|
+
_date=this.airdateDate
|
|
12
|
+
_copyright=this.copyright
|
|
13
|
+
_isArchiveContent=this.isArchiveContent
|
|
14
|
+
_posterCopyright="poster_copyright"}}
|
|
15
|
+
</div>
|
|
17
16
|
|
|
18
|
-
<aside class="order-4
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
17
|
+
<aside class="order-4 pt-6 aside md:order-2 sm:ml-8 sm:w-[220px]"
|
|
18
|
+
aria-label='{{loca "appendix_title"}}'>
|
|
19
|
+
<div class="c-appendix">
|
|
20
|
+
{{#unless _webview}}
|
|
21
|
+
{{!-- {{~#with this.backLinkUrl ~}}
|
|
22
|
+
{{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
|
|
23
|
+
{{~/with~}}
|
|
25
24
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
{{~#with this.geotag ~}}
|
|
26
|
+
{{~> modules/geotag/geotag-list ~}}
|
|
27
|
+
{{~/with~}}
|
|
29
28
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
{{~#with this.topictags ~}}
|
|
30
|
+
{{~> modules/topictag/topictag-list ~}}
|
|
31
|
+
{{~/with~}} --}}
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
{{~#with this.socialSharing ~}}
|
|
34
|
+
{{~> components/socialmedia/socialmedia ~}}
|
|
35
|
+
{{~/with~}}
|
|
36
|
+
{{/unless}}
|
|
37
|
+
</div>
|
|
38
|
+
</aside>
|
|
38
39
|
</div>
|
|
39
|
-
</
|
|
40
|
-
|
|
40
|
+
</article>
|
|
41
|
+
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
<footer class="flex flex-col
|
|
1
|
+
<footer class="flex flex-col mt-10 text-xs font-copy{{#if _addClass}} {{_addClass}}{{/if}}">
|
|
2
2
|
{{~#with _author ~}}
|
|
3
|
-
<p
|
|
3
|
+
<p>
|
|
4
4
|
Autor: {{this}}
|
|
5
5
|
</p>
|
|
6
6
|
{{~/with~}}
|
|
7
7
|
{{#if _showDate ~}}
|
|
8
8
|
{{#with _date}}
|
|
9
|
-
<p
|
|
9
|
+
<p>
|
|
10
10
|
<time datetime="{{this.htmlDateTime}}">{{loca "date_published" this.date this.time }}</time>
|
|
11
11
|
</p>
|
|
12
12
|
{{/with~}}
|
|
13
13
|
{{/if}}
|
|
14
14
|
|
|
15
15
|
{{~#with _source}}
|
|
16
|
-
<p
|
|
16
|
+
<p>
|
|
17
17
|
{{~loca "copyright_source"~}}
|
|
18
18
|
{{~#each this}}
|
|
19
19
|
{{~#if @first}} {{this}}{{else}}, {{this}}{{/if~}}
|
|
@@ -22,20 +22,20 @@
|
|
|
22
22
|
{{/with~}}
|
|
23
23
|
|
|
24
24
|
{{~#with _copyright ~}}
|
|
25
|
-
<p
|
|
25
|
+
<p>
|
|
26
26
|
{{~loca "copyright_source"}} {{loca "copyright_symbol" this ~}}
|
|
27
27
|
</p>
|
|
28
28
|
{{~/with~}}
|
|
29
29
|
|
|
30
30
|
{{~#if _isArchiveContent}}
|
|
31
|
-
<p
|
|
31
|
+
<p>
|
|
32
32
|
{{loca "archive_content"}}
|
|
33
33
|
</p>
|
|
34
34
|
{{/if}}
|
|
35
35
|
|
|
36
36
|
{{~#with _posterCopyright ~}}
|
|
37
37
|
{{~#with ../teaseritem.copyrightWithLinks}}
|
|
38
|
-
<p
|
|
38
|
+
<p>
|
|
39
39
|
{{~loca ../this this}}
|
|
40
40
|
</p>
|
|
41
41
|
{{~/with~}}
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
|
|
44
44
|
<!-- TODO teaseritem.copyrightWithLinks dont work in gallery, generalize model -->
|
|
45
45
|
{{~#with _galleryCopyright ~}}
|
|
46
|
-
<p
|
|
46
|
+
<p>
|
|
47
47
|
{{~loca this ../copyrightWithLinks}}
|
|
48
48
|
</p>
|
|
49
49
|
{{~/with~}}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<article class="col-span-12 {{inline-switch _size '["12","8","6","4","3"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}" >
|
|
1
|
+
<article class="col-span-12 {{inline-switch _size '["12","9","8","6","4","3"]' '["","md:col-span-9","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}" >
|
|
2
2
|
{{> @partial-block }}
|
|
3
3
|
</article>
|
|
@@ -5,10 +5,10 @@
|
|
|
5
5
|
class="flex justify-start cursor-pointer group ds-button-round {{_css}}"
|
|
6
6
|
aria-label="Podcast starten"
|
|
7
7
|
>
|
|
8
|
-
<div class="text-white rounded-full js-playbutton bg-podcast ring-white ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
|
|
8
|
+
<div class="text-white rounded-full js-playbutton bg-podcast dark:bg-podcast-dark ring-white dark:ring-podcast dark:text-podcast-text ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
|
|
9
9
|
{{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
|
|
10
10
|
</div>
|
|
11
|
-
<div class="hidden bg-white rounded-full js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
|
|
11
|
+
<div class="hidden bg-white rounded-full dark:bg-podcast-dark js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
|
|
12
12
|
{{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}
|
|
13
13
|
</div>
|
|
14
14
|
</button>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{{#unless _isSinglePage}}
|
|
2
2
|
{{#unless this.hideShortText}}
|
|
3
3
|
{{~#with this.shorttext}}
|
|
4
|
-
<div class="col-span-12 text-sm md:text-base font-copy
|
|
4
|
+
<div class="col-span-12 text-sm md:text-base font-copy">
|
|
5
5
|
<span class="c-teaser__shorttext"> {{this}} </span>
|
|
6
6
|
</div>
|
|
7
7
|
{{/with~}}
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
min="0"
|
|
53
53
|
max="1000"
|
|
54
54
|
value="0"
|
|
55
|
-
class="h-1 my-4 bg-white appearance-none cursor-pointer ds-link grow seek_slider"
|
|
55
|
+
class="h-1 my-4 bg-white appearance-none cursor-pointer dark:bg-podcast-text ds-link grow seek_slider"
|
|
56
56
|
aria-label="Schieberegler" >
|
|
57
57
|
</div>
|
|
58
58
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
{{> components/podcast/components/podcast_timedisplay
|
|
63
63
|
_id=_id
|
|
64
64
|
_duration=duration
|
|
65
|
-
_currentTimeClasses="font-bold text-podcast-text"
|
|
66
|
-
_durationClasses="text-podcast-text"
|
|
65
|
+
_currentTimeClasses="font-bold text-podcast-text dark:text-podcast-text-dark"
|
|
66
|
+
_durationClasses="text-podcast-text dark:text-podcast-text-dark"
|
|
67
67
|
_containerCss="flex text-sm grow font-heading" }}
|
|
68
68
|
</div>
|
|
69
69
|
{{/if}}
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
{{> components/podcast/components/podcast_timedisplay
|
|
77
77
|
_id=_id
|
|
78
78
|
_duration=duration
|
|
79
|
-
_currentTimeClasses="font-bold text-podcast-text"
|
|
80
|
-
_durationClasses="text-podcast-text"
|
|
79
|
+
_currentTimeClasses="font-bold text-podcast-text dark:text-podcast-text-dark"
|
|
80
|
+
_durationClasses="text-podcast-text dark:text-podcast-text-dark"
|
|
81
81
|
_containerCss="pl-16 -mt-3 flex text-sm grow font-heading"}}
|
|
82
82
|
</div>
|
|
83
83
|
{{/unless}}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{{#if this.isSingleChannel}}
|
|
2
|
-
{{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
|
|
2
|
+
{{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text dark:text-podcast-text-dark"}}
|
|
3
3
|
<span class="mt-0.5 group-hover:underline {{#if _ordered-adjust_context}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize-adjust_context '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
|
|
4
4
|
{{~_title-adjust_context~}}
|
|
5
5
|
</span>
|
|
6
6
|
{{/components/base/link}}
|
|
7
7
|
{{else}}
|
|
8
|
-
<div class="font-title text-base mt-2.5 text-podcast-text">
|
|
8
|
+
<div class="font-title text-base mt-2.5 text-podcast-text dark:text-podcast-text-dark">
|
|
9
9
|
<span class="mt-0.5 {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
|
|
10
10
|
{{~_title~}}
|
|
11
11
|
</span>
|
|
@@ -101,6 +101,9 @@ export default function playaudio() {
|
|
|
101
101
|
},
|
|
102
102
|
|
|
103
103
|
updateCurrentTime(range, timeDisplay, newTime, id) {
|
|
104
|
+
let darkmodeColor;
|
|
105
|
+
window.matchMedia('(prefers-color-scheme: dark)').matches && document.getElementsByTagName('html')[0].classList.contains('tw-dark') ? darkmodeColor = "var(--color-podcast) " : darkmodeColor = "white "
|
|
106
|
+
|
|
104
107
|
timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(
|
|
105
108
|
newTime,
|
|
106
109
|
false
|
|
@@ -108,7 +111,7 @@ export default function playaudio() {
|
|
|
108
111
|
range.style.background =
|
|
109
112
|
'linear-gradient(to right, var(--color-podcast) ' +
|
|
110
113
|
range.value / 10 +
|
|
111
|
-
'%,
|
|
114
|
+
'%,'+ darkmodeColor +
|
|
112
115
|
range.value / 10 +
|
|
113
116
|
'% )'
|
|
114
117
|
range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
|
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
<div class="flex col-span-12 p-5">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
<div class="flex col-span-12 {{#unless _isArticlePlayer}} p-5 {{/unless}} {{#if _isArticlePlayer}} bg-highlight-1 {{/if}}">
|
|
2
|
+
<div class="flex flex-col grow">
|
|
3
|
+
{{!-- First Row --}}
|
|
4
|
+
<div class="flex flex-row {{#if ../_ordered}} pl-8 {{/if}} ">
|
|
5
|
+
<div class="flex flex-col grow">
|
|
6
|
+
<div class="flex max-h-6">
|
|
7
|
+
{{!-- Label / Airdate --}}
|
|
8
|
+
{{#with label}}
|
|
9
|
+
<div class="">
|
|
10
10
|
<span class='sb-label mr-2 rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading bg-labelMedia'>
|
|
11
|
-
|
|
11
|
+
{{ loca this.loca }}
|
|
12
12
|
</span>
|
|
13
13
|
</div>
|
|
14
14
|
{{/with}}
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
<div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text">
|
|
17
|
+
<div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text dark:text-podcast-text-dark">
|
|
18
18
|
{{~#with airdateDate}}
|
|
19
19
|
<time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
|
|
20
20
|
{{/with}}
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
{{!-- Download --}}
|
|
23
|
+
{{> components/podcast/components/podcast_downloadbutton
|
|
24
|
+
_addClass=""
|
|
25
|
+
_iconClass="h-6 w-6 text-podcast-text fill-current"
|
|
26
|
+
_url=this.podcastDownloadUrl }}
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
{{!-- Überschrift: --}}
|
|
32
|
+
<div class="flex pb-5 pr-2 md:pr-5">
|
|
33
|
+
{{> components/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
</div>
|
|
35
37
|
|
|
36
|
-
|
|
38
|
+
{{!-- Podcast Image --}}
|
|
39
|
+
<div class="flex flex-col ">
|
|
40
|
+
<div class="w-22 {{#if _isArticlePlayer }} md:w-32 lg:w-42 {{else}} {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}} {{/if}}">
|
|
41
|
+
{{> components/base/image/responsive_image this.teaseritem
|
|
42
|
+
_type="podcastEpisodePlayer"
|
|
43
|
+
_variant="default"
|
|
44
|
+
_addClass="overflow-hidden"
|
|
45
|
+
_noDelay=this.dontLazyload
|
|
46
|
+
_addClassImg="w-full block"
|
|
47
|
+
}}
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
37
50
|
|
|
38
|
-
{{!-- Podcast Image --}}
|
|
39
|
-
<div class="flex flex-col ">
|
|
40
|
-
<div class="w-22 {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}">
|
|
41
|
-
{{> components/base/image/responsive_image this.teaseritem
|
|
42
|
-
_type="podcastEpisodePlayer"
|
|
43
|
-
_variant="default"
|
|
44
|
-
_addClass="overflow-hidden"
|
|
45
|
-
_noDelay=this.dontLazyload
|
|
46
|
-
_addClassImg="w-full block"
|
|
47
|
-
}}
|
|
48
51
|
</div>
|
|
49
|
-
</div>
|
|
50
52
|
|
|
51
|
-
|
|
53
|
+
{{!-- Player UI --}}
|
|
54
|
+
<div class="flex {{#if _isArticlePlayer }} lg:pr-48 lg:-mt-14 {{else}} {{inline-switch this.realTeaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14"," "]'}} {{/if}}"
|
|
55
|
+
x-data="podcastPlayer()"
|
|
56
|
+
x-init="listenToGlobalStop()"
|
|
57
|
+
ax-load
|
|
58
|
+
x-ignore>
|
|
59
|
+
{{> components/podcast/components/podcast_player_ui
|
|
60
|
+
_isPlaylistPlayer=false
|
|
61
|
+
_podcastDuration=duration
|
|
62
|
+
_id=(nextRandom)
|
|
63
|
+
_first=true
|
|
64
|
+
}}
|
|
65
|
+
</div>
|
|
52
66
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
x-ignore>
|
|
59
|
-
{{> components/podcast/components/podcast_player_ui
|
|
60
|
-
_isPlaylistPlayer=false
|
|
61
|
-
_podcastDuration=duration
|
|
62
|
-
_id=(nextRandom)
|
|
63
|
-
_first=true
|
|
64
|
-
}}
|
|
65
|
-
</div>
|
|
66
|
-
|
|
67
|
-
{{!-- Abo-Dropdown --}}
|
|
68
|
-
<div class="flex flex-row pt-5">
|
|
69
|
-
{{#with this.podcastChannel}}
|
|
70
|
-
{{> components/podcast/components/podcast_subscribe_button}}
|
|
71
|
-
{{/with}}
|
|
67
|
+
{{!-- Abo-Dropdown --}}
|
|
68
|
+
<div class="flex flex-row pt-5">
|
|
69
|
+
{{#with this.podcastChannel}}
|
|
70
|
+
{{> components/podcast/components/podcast_subscribe_button}}
|
|
71
|
+
{{/with}}
|
|
72
72
|
|
|
73
73
|
{{#with this.podcastChannel}}
|
|
74
74
|
{{!-- Sendungs-Link --}}
|
|
75
75
|
<div class="flex justify-end w-full pl-4">
|
|
76
|
-
<div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text">
|
|
76
|
+
<div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text dark:text-podcast-text-dark">
|
|
77
77
|
<span class="self-end font-bold">Zur Sendung</span>
|
|
78
78
|
<a class="self-end underline ds-link" href="{{this.url}}">{{this.title}}</a>
|
|
79
79
|
</div>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<div class="w-full flex
|
|
2
|
-
<div class="flex flex-wrap
|
|
3
|
-
<span class="inline-flex text-
|
|
4
|
-
|
|
5
|
-
<ul class="flex flex-wrap w-full
|
|
1
|
+
<div class="w-full flex first:border-t last:border-b py-6 border-dotted border-[#797979] -socialsharing">
|
|
2
|
+
<div class="flex flex-wrap">
|
|
3
|
+
<span class="inline-flex text-xl font-headingSerif">{{loca "share_headline" }}</span>
|
|
4
|
+
|
|
5
|
+
<ul class="flex flex-wrap w-full pt-2 gap-x-2 gap-y-2 -socialsharing">
|
|
6
6
|
{{~#with this.twitterLink ~}}
|
|
7
|
-
<li
|
|
8
|
-
<a class="
|
|
7
|
+
<li>
|
|
8
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}}"
|
|
9
9
|
href="{{this}}"
|
|
10
10
|
target="_blank"
|
|
11
11
|
rel="noopener noreferrer"
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
</li>
|
|
20
20
|
{{~/with~}}
|
|
21
21
|
{{~#with this.facebookLink ~}}
|
|
22
|
-
<li
|
|
23
|
-
<a class="
|
|
22
|
+
<li>
|
|
23
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}}"
|
|
24
24
|
href="{{this}}"
|
|
25
25
|
target="_blank"
|
|
26
26
|
rel="noopener noreferrer"
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
|
|
30
30
|
{{/with}}
|
|
31
31
|
>
|
|
32
|
-
{{~> components/base/image/icon _addClass="
|
|
32
|
+
{{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#3b5999]" _icon="facebook" _iconmap="icons" ~}}
|
|
33
33
|
</a>
|
|
34
34
|
</li>
|
|
35
35
|
{{~/with~}}
|
|
36
36
|
{{~#with this.whatsappLink ~}}
|
|
37
|
-
<li
|
|
38
|
-
<a class="
|
|
37
|
+
<li>
|
|
38
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}}"
|
|
39
39
|
href="{{this}}"
|
|
40
40
|
target="_blank"
|
|
41
41
|
rel="noopener noreferrer"
|
|
@@ -44,33 +44,33 @@
|
|
|
44
44
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
|
|
45
45
|
{{/with}}
|
|
46
46
|
>
|
|
47
|
-
{{~> components/base/image/icon _addClass="
|
|
47
|
+
{{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#4dc247]" _icon="whatsapp" _iconmap="icons" ~}}
|
|
48
48
|
</a>
|
|
49
49
|
</li>
|
|
50
50
|
{{~/with~}}
|
|
51
51
|
{{~#with this.mailtoLink ~}}
|
|
52
|
-
<li
|
|
53
|
-
<a class="
|
|
52
|
+
<li>
|
|
53
|
+
<a class="{{#with ../../this.content.trackingData}} js-load{{/with}}"
|
|
54
54
|
href="{{this}}"
|
|
55
55
|
title="{{loca "share_mail_linktitle" }}"
|
|
56
56
|
{{#with ../../this.content.trackingData}}
|
|
57
57
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
|
|
58
58
|
{{/with}}
|
|
59
59
|
>
|
|
60
|
-
{{~> components/base/image/icon _addClass="
|
|
60
|
+
{{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#006dc1]" _icon="mail" _iconmap="icons" ~}}
|
|
61
61
|
</a>
|
|
62
62
|
</li>
|
|
63
63
|
{{~/with~}}
|
|
64
64
|
|
|
65
|
-
<li
|
|
66
|
-
<a class="
|
|
65
|
+
<li>
|
|
66
|
+
<a class="{{#with ../this.content.trackingData}} js-load{{/with}}"
|
|
67
67
|
href="javascript:window.print()"
|
|
68
68
|
title="{{loca "share_print_linktitle" }}"
|
|
69
69
|
{{#with ../this.content.trackingData}}
|
|
70
70
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
|
|
71
71
|
{{/with}}
|
|
72
72
|
>
|
|
73
|
-
{{~> components/base/image/icon _addClass="
|
|
73
|
+
{{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#606060]" _icon="print" _iconmap="icons" ~}}
|
|
74
74
|
</a>
|
|
75
75
|
</li>
|
|
76
76
|
</ul>
|
package/tailwind.config.js
CHANGED
|
@@ -258,7 +258,8 @@ module.exports = {
|
|
|
258
258
|
tarawera: '#0a3355',
|
|
259
259
|
turquoiseCerulian: '#007fa0',
|
|
260
260
|
linkWater: '#d3e2f4',
|
|
261
|
-
blueLuxury: '#007396'
|
|
261
|
+
blueLuxury: '#007396',
|
|
262
|
+
nightRider:'#2d2d2d',
|
|
262
263
|
},
|
|
263
264
|
'black': {
|
|
264
265
|
DEFAULT: '#000000',
|
|
@@ -338,6 +339,7 @@ module.exports = {
|
|
|
338
339
|
'primary': 'var(--color-primary-ds)',
|
|
339
340
|
'secondary': 'var(--color-secondary-ds)',
|
|
340
341
|
'highlight-1': 'var(--color-highlight-1)',
|
|
342
|
+
'highlight-1-dark': 'var(--color-highlight-1-dark)',
|
|
341
343
|
'highlight-2': 'var(--color-highlight-2)',
|
|
342
344
|
'highlight-3': 'var(--color-highlight-3)',
|
|
343
345
|
'top-topic-background': 'var(--color-top-topic-background)',
|
|
@@ -387,7 +389,9 @@ module.exports = {
|
|
|
387
389
|
'focus-state': 'var(--color-focus-state)',
|
|
388
390
|
'content-nav': 'var(--color-content-nav)',
|
|
389
391
|
'podcast': 'var(--color-podcast)',
|
|
392
|
+
'podcast-dark': 'var(--color-podcast-dark)',
|
|
390
393
|
'podcast-text': 'var(--color-podcast-text)',
|
|
394
|
+
'podcast-text-dark': 'var(--color-standard-text-dark)',
|
|
391
395
|
'event-status': 'var(--color-event-status)',
|
|
392
396
|
'event-calendar-primary': 'var(--color-eventcalendar-primary)',
|
|
393
397
|
'event-calendar-secondary': 'var(--color-eventcalendar-secondary)',
|