hr-design-system-handlebars 1.114.130 → 1.114.132

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v1.114.132 (Mon Mar 24 2025)
+
+#### 🐛 Bug Fix
+
+- Enhance social sharing functionality with browser detection and impro… [#1273](https://github.com/mumprod/hr-design-system-handlebars/pull/1273) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.114.131 (Thu Mar 20 2025)
+
+#### 🐛 Bug Fix
+
+- Refactor ticker timeline component for improved layout and user conse… [#1272](https://github.com/mumprod/hr-design-system-handlebars/pull/1272) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.114.130 (Thu Mar 20 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1148,9 +1148,6 @@ article #commentList {
   bottom: 0px;
   left: 0px;
 }
-.-left-4 {
-  left: -1rem;
-}
 .-left-5 {
   left: -1.25rem;
 }
@@ -1173,6 +1170,9 @@ article #commentList {
 .left-0 {
   left: 0px;
 }
+.left-1 {
+  left: 0.25rem;
+}
 .left-1\/2 {
   left: 50%;
 }
@@ -3336,9 +3336,6 @@ article #commentList {
   font-size: 2.125rem;
   line-height: 2.375rem;
 }
-.text-\[15px\] {
-  font-size: 15px;
-}
 .text-base {
   font-size: 1rem;
   line-height: 1.375rem;
@@ -3415,9 +3412,6 @@ article #commentList {
 .leading-\[1\.625rem\] {
   line-height: 1.625rem;
 }
-.leading-\[18px\] {
-  line-height: 18px;
-}
 .leading-\[34px\] {
   line-height: 34px;
 }
@@ -3863,7 +3857,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1742478939840;
+  counter-reset: cnt1742821545333;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4308,7 +4302,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1742478939840 1;
+  counter-increment: cnt1742821545333 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4326,7 +4320,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1742478939840);
+  content: counter(cnt1742821545333);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/social_sharing/socialSharingHandler.alpine.js

@@ -1,4 +1,5 @@
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+import { fireEvent, getJSONCookie } from 'hrQuery'
 
 export default (module) => ({
     open: false,
@@ -7,31 +8,80 @@ export default (module) => ({
     sharingModuleWasNeverShown: true,
     desktopSharingModuleWasNeverShown: true,
     copySuccess: false,
-    toggle() {
-        
-        var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
-        var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-        var isMobile= isMobileApple || isMobileOther;
-        
-        if (navigator.share && isMobile) {
-            navigator.share({
-                title: document.title,
-                url: window.location.href,
+    cookie: {},
+    isMobileApple: false,
+    isMobileOther: false,
+    isMobile: false,
+    isWebview: false, 
+    initBrowserDetection(){
+        console.log('Pre initBrowserDetection', this.isMobileApple,this.isMobileOther,this.isMobile,this.isWebview);
+        this.isMobileApple = /iP/.test(navigator.userAgent) || /Mac/.test(navigator.userAgent) && navigator.maxTouchPoints > 4;
+        this.isMobileOther = /(Android|webOS|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
+        this.isMobile = this.isMobileApple || this.isMobileOther;
+
+        try {
+            this.isWebview = window.parent.document.documentElement.classList.contains('webview');
+        } catch (e) {
+            this.isWebview = false;
+            console.warn("Could not access window.parent.document due to cross-origin restrictions", e);
+        }
+        console.log('initBrowserDetection', this.isMobileApple,this.isMobileOther,this.isMobile,this.isWebview);
+    },
+    readAppVersionCookie() {
+        this.cookie = getJSONCookie('appSettings') || {}
+    },
+    nativeShare(title, url, uxActionValue) {
+        console.log("Native Share", title, url, uxActionValue);
+        navigator
+            .share({
+                title,
+                url,
             })
-            .then(() => {
-                console.log('Shared successfully');
-                uxAction('socialShareClick::'+module+'::nativeShare');
-                console.log('tracked: socialShareClick::'+module+'::nativeShare');
+            .then(function () {
+                console.log('Native Shared successfully');
+                if (uxActionValue) {
+                    uxAction(uxActionValue);
+                }
+                console.log('tracked: '+ uxActionValue);
             })
             .catch((error) => console.error('Sharing failed:', error));
-        } else {
-            if (this.$store.sharingIsOpen[module]) {
-                return this.close(true)
+    },
+    shareInWebview(title, url) {
+        this.readAppVersionCookie();
+        if(this.isMobileApple){
+            console.log('apple mobile browser')
+            this.nativeShare(title, url, 'socialShareClick::webview::nativeShareApple');
+        } else if (this.isMobileOther) {
+            console.log('non-apple mobile browser')
+            /*Check Build Version of App*/
+            if (this.cookie['fireCustomJsShareEvent'] === true) {
+                /*Custom Event für App unter Android*/
+                fireEvent('hr:global:shareCompactClickAndroidApp', {
+                    title: title,
+                    url: url,
+                })
+                uxAction('socialShareClick::webview::nativeShareAndroid::customEvent');
+                console.log('Custom-Event für Android')
+            } else {
+                this.nativeShare(title, url, 'socialShareClick::webview::nativeShareAndroid::noCustomEventCookie');
             }
-            this.$refs.button.focus()
-            this.$store.sharingIsOpen[module] = true
-            uxAction('socialShareClick::'+module+'::sharingIconOpen');
-        }               
+        }
+    },
+    toggle(title, url) {
+        if (this.isWebview) {
+            this.shareInWebview(title,url)
+        }  else {  
+            if (navigator.share && this.isMobile) {
+                this.nativeShare(document.title, window.location.href,'socialShareClick::'+module+'::nativeShare')
+            } else {
+                if (this.$store.sharingIsOpen[module]) {
+                    return this.close(true)
+                }
+                this.$refs.button.focus()
+                this.$store.sharingIsOpen[module] = true
+                uxAction('socialShareClick::'+module+'::sharingIconOpen');
+            }    
+        }           
     },
     close(trackClick) {
         if (!this.$store.sharingIsOpen[module]) return

package/dist/views/components/social_sharing/social_sharing_horizontal.hbs

@@ -1,7 +1,7 @@
 {{~#with this.socialSharing ~}}
     <div 
         x-data="socialSharingHandler('metadatabox')"
-        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
+        x-init="initBrowserDetection(); $watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
         class="flex self-center justify-end ml-3 print:hidden grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"

package/dist/views/components/social_sharing/social_sharing_mobile.hbs

@@ -1,6 +1,7 @@
 
 {{~#with this.socialSharing ~}}    
 <div x-data="socialSharingHandler('mobilesticky')"
+    x-init="initBrowserDetection();"    
     class=" relative ml-5 z-100 h-9.5 w-9.5"
     :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
     x-on:resize.window="$store.sharingIsOpen.mobilesticky = false"    

package/dist/views/components/social_sharing/social_sharing_ticker_item.hbs

@@ -2,6 +2,7 @@
     <div 
         x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
         class="flex self-center justify-end ml-3 print:hidden grow"
+        x-init="initBrowserDetection();"
         x-on:resize.window="$store.sharingIsOpen.ticker = false"       
         x-on:keydown.escape.prevent.stop="close()"
         @click.outside="close()"
@@ -13,7 +14,7 @@
             <button 
                 class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
                 x-ref="button"
-                x-on:click="toggle()"
+                x-on:click="toggle('{{../this.escapedTitle}}','{{../this.socialSharingUrl}}')"
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"

package/dist/views/components/teaser/ticker/teaser_ticker_timeline.hbs

@@ -6,31 +6,34 @@
             {{else}}
                 <li class="relative h-auto [&:not(:last-child)]:pb-5">
             {{/if}}
-                <div class="absolute h-full">
-                    <div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-tickerTeaserTimelineScore -left-5"></div>
+                <div class="absolute h-full -left-5 top-0.5">
+                    <div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-tickerTeaserTimelineScore "></div>
                     {{#unless @last}}
-                        <div class="relative flex flex-col w-0 h-full timelineBorder -left-4">
+                        <div class="relative flex flex-col w-0 h-full timelineBorder left-1">
                             <div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-boulder{{/if}}"></div>
                             <div class="h-2"></div>
                         </div>
                     {{/unless}}
                 </div>
-                {{#unless this.hideDateTime}}
-                    {{#with this.tickerItemDateTime~}}
-                        <div class="font-headingSerif {{#if ../../../_isTickerpage}}text-sm{{else}}text-xs{{/if}}{{#if ../../../_color}} text-{{../../../_color}}{{else}} text-gray-scorpion dark:text-gray-mercury{{/if}}">
-                            {{#if ../../../this.isMultiDay}}
-                                {{this.broadcastDate }}
-                            {{else}}
-                                {{#if ../../../this.isOlderThanToday}}
+                
+                <a class="font-headingSerif {{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white {{#if ../../_isTickerpage}}text-sm{{else}}text-base{{/if}} js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-link dark:text-link-dark{{/if}} ds-link{{#if this.hideDateTime}} align-top{{/if}}" href="{{this.tickerItemUrl}}" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "TickerTeaser::{{../../this.sophoraId}}-TeaserPostLink geklickt"}]}'>
+                    {{#unless this.hideDateTime}}
+                        {{#with this.tickerItemDateTime~}}
+                            <div class="font-headingSerif text-xs pb-0.5{{#if ../../../_color}} text-{{../../../_color}}{{else}} text-gray-scorpion dark:text-gray-mercury{{/if}}">
+                                {{#if ../../../this.isMultiDay}}
                                     {{this.broadcastDate }}
                                 {{else}}
-                                    {{this.time }}
+                                    {{#if ../../../this.isOlderThanToday}}
+                                        {{this.broadcastDate }}
+                                    {{else}}
+                                        {{this.time }}
+                                    {{/if}}
                                 {{/if}}
-                            {{/if}}
-                        </div>
-                    {{~/with}}
-                {{/unless}}
-                <a class="font-headingSerif {{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white {{#if ../../_isTickerpage}}text-[15px] leading-[18px]{{else}}text-base{{/if}} js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-link dark:text-link-dark{{/if}} ds-link{{#if this.hideDateTime}} align-top{{/if}}" href="{{this.tickerItemUrl}}" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "TickerTeaser::{{../../this.sophoraId}}-TeaserPostLink geklickt"}]}'>{{this.relevantTitle}}</a>
+                            </div>
+                        {{~/with}}
+                    {{/unless}}
+                    {{this.relevantTitle}}
+                </a>
             </li>
         {{~/each~}}
     </ul>

package/dist/views_static/components/social_sharing/social_sharing_horizontal.hbs

@@ -1,7 +1,7 @@
 {{~#with this.socialSharing ~}}
     <div 
         x-data="socialSharingHandler('metadatabox')"
-        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
+        x-init="initBrowserDetection(); $watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
         class="flex self-center justify-end ml-3 print:hidden grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"

package/dist/views_static/components/social_sharing/social_sharing_mobile.hbs

@@ -1,6 +1,7 @@
 
 {{~#with this.socialSharing ~}}    
 <div x-data="socialSharingHandler('mobilesticky')"
+    x-init="initBrowserDetection();"    
     class=" relative ml-5 z-100 h-9.5 w-9.5"
     :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
     x-on:resize.window="$store.sharingIsOpen.mobilesticky = false"    

package/dist/views_static/components/social_sharing/social_sharing_ticker_item.hbs

@@ -2,6 +2,7 @@
     <div 
         x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
         class="flex self-center justify-end ml-3 print:hidden grow"
+        x-init="initBrowserDetection();"
         x-on:resize.window="$store.sharingIsOpen.ticker = false"       
         x-on:keydown.escape.prevent.stop="close()"
         @click.outside="close()"
@@ -13,7 +14,7 @@
             <button 
                 class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
                 x-ref="button"
-                x-on:click="toggle()"
+                x-on:click="toggle('{{../this.escapedTitle}}','{{../this.socialSharingUrl}}')"
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"

package/dist/views_static/components/teaser/ticker/teaser_ticker_timeline.hbs

@@ -6,31 +6,34 @@
             {{else}}
                 <li class="relative h-auto [&:not(:last-child)]:pb-5">
             {{/if}}
-                <div class="absolute h-full">
-                    <div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-tickerTeaserTimelineScore -left-5"></div>
+                <div class="absolute h-full -left-5 top-0.5">
+                    <div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-tickerTeaserTimelineScore "></div>
                     {{#unless @last}}
-                        <div class="relative flex flex-col w-0 h-full timelineBorder -left-4">
+                        <div class="relative flex flex-col w-0 h-full timelineBorder left-1">
                             <div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-boulder{{/if}}"></div>
                             <div class="h-2"></div>
                         </div>
                     {{/unless}}
                 </div>
-                {{#unless this.hideDateTime}}
-                    {{#with this.tickerItemDateTime~}}
-                        <div class="font-headingSerif {{#if ../../../_isTickerpage}}text-sm{{else}}text-xs{{/if}}{{#if ../../../_color}} text-{{../../../_color}}{{else}} text-gray-scorpion dark:text-gray-mercury{{/if}}">
-                            {{#if ../../../this.isMultiDay}}
-                                {{this.broadcastDate }}
-                            {{else}}
-                                {{#if ../../../this.isOlderThanToday}}
+                
+                <a class="font-headingSerif {{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white {{#if ../../_isTickerpage}}text-sm{{else}}text-base{{/if}} js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-link dark:text-link-dark{{/if}} ds-link{{#if this.hideDateTime}} align-top{{/if}}" href="{{this.tickerItemUrl}}" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "TickerTeaser::{{../../this.sophoraId}}-TeaserPostLink geklickt"}]}'>
+                    {{#unless this.hideDateTime}}
+                        {{#with this.tickerItemDateTime~}}
+                            <div class="font-headingSerif text-xs pb-0.5{{#if ../../../_color}} text-{{../../../_color}}{{else}} text-gray-scorpion dark:text-gray-mercury{{/if}}">
+                                {{#if ../../../this.isMultiDay}}
                                     {{this.broadcastDate }}
                                 {{else}}
-                                    {{this.time }}
+                                    {{#if ../../../this.isOlderThanToday}}
+                                        {{this.broadcastDate }}
+                                    {{else}}
+                                        {{this.time }}
+                                    {{/if}}
                                 {{/if}}
-                            {{/if}}
-                        </div>
-                    {{~/with}}
-                {{/unless}}
-                <a class="font-headingSerif {{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white {{#if ../../_isTickerpage}}text-[15px] leading-[18px]{{else}}text-base{{/if}} js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-link dark:text-link-dark{{/if}} ds-link{{#if this.hideDateTime}} align-top{{/if}}" href="{{this.tickerItemUrl}}" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "TickerTeaser::{{../../this.sophoraId}}-TeaserPostLink geklickt"}]}'>{{this.relevantTitle}}</a>
+                            </div>
+                        {{~/with}}
+                    {{/unless}}
+                    {{this.relevantTitle}}
+                </a>
             </li>
         {{~/each~}}
     </ul>

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.114.130",
+  "version": "1.114.132",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/stories/views/components/social_sharing/socialSharingHandler.alpine.js

@@ -1,4 +1,5 @@
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+import { fireEvent, getJSONCookie } from 'hrQuery'
 
 export default (module) => ({
     open: false,
@@ -7,31 +8,80 @@ export default (module) => ({
     sharingModuleWasNeverShown: true,
     desktopSharingModuleWasNeverShown: true,
     copySuccess: false,
-    toggle() {
-        
-        var isMobileApple = /^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;
-        var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-        var isMobile= isMobileApple || isMobileOther;
-        
-        if (navigator.share && isMobile) {
-            navigator.share({
-                title: document.title,
-                url: window.location.href,
+    cookie: {},
+    isMobileApple: false,
+    isMobileOther: false,
+    isMobile: false,
+    isWebview: false, 
+    initBrowserDetection(){
+        console.log('Pre initBrowserDetection', this.isMobileApple,this.isMobileOther,this.isMobile,this.isWebview);
+        this.isMobileApple = /iP/.test(navigator.userAgent) || /Mac/.test(navigator.userAgent) && navigator.maxTouchPoints > 4;
+        this.isMobileOther = /(Android|webOS|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
+        this.isMobile = this.isMobileApple || this.isMobileOther;
+
+        try {
+            this.isWebview = window.parent.document.documentElement.classList.contains('webview');
+        } catch (e) {
+            this.isWebview = false;
+            console.warn("Could not access window.parent.document due to cross-origin restrictions", e);
+        }
+        console.log('initBrowserDetection', this.isMobileApple,this.isMobileOther,this.isMobile,this.isWebview);
+    },
+    readAppVersionCookie() {
+        this.cookie = getJSONCookie('appSettings') || {}
+    },
+    nativeShare(title, url, uxActionValue) {
+        console.log("Native Share", title, url, uxActionValue);
+        navigator
+            .share({
+                title,
+                url,
             })
-            .then(() => {
-                console.log('Shared successfully');
-                uxAction('socialShareClick::'+module+'::nativeShare');
-                console.log('tracked: socialShareClick::'+module+'::nativeShare');
+            .then(function () {
+                console.log('Native Shared successfully');
+                if (uxActionValue) {
+                    uxAction(uxActionValue);
+                }
+                console.log('tracked: '+ uxActionValue);
             })
             .catch((error) => console.error('Sharing failed:', error));
-        } else {
-            if (this.$store.sharingIsOpen[module]) {
-                return this.close(true)
+    },
+    shareInWebview(title, url) {
+        this.readAppVersionCookie();
+        if(this.isMobileApple){
+            console.log('apple mobile browser')
+            this.nativeShare(title, url, 'socialShareClick::webview::nativeShareApple');
+        } else if (this.isMobileOther) {
+            console.log('non-apple mobile browser')
+            /*Check Build Version of App*/
+            if (this.cookie['fireCustomJsShareEvent'] === true) {
+                /*Custom Event für App unter Android*/
+                fireEvent('hr:global:shareCompactClickAndroidApp', {
+                    title: title,
+                    url: url,
+                })
+                uxAction('socialShareClick::webview::nativeShareAndroid::customEvent');
+                console.log('Custom-Event für Android')
+            } else {
+                this.nativeShare(title, url, 'socialShareClick::webview::nativeShareAndroid::noCustomEventCookie');
             }
-            this.$refs.button.focus()
-            this.$store.sharingIsOpen[module] = true
-            uxAction('socialShareClick::'+module+'::sharingIconOpen');
-        }               
+        }
+    },
+    toggle(title, url) {
+        if (this.isWebview) {
+            this.shareInWebview(title,url)
+        }  else {  
+            if (navigator.share && this.isMobile) {
+                this.nativeShare(document.title, window.location.href,'socialShareClick::'+module+'::nativeShare')
+            } else {
+                if (this.$store.sharingIsOpen[module]) {
+                    return this.close(true)
+                }
+                this.$refs.button.focus()
+                this.$store.sharingIsOpen[module] = true
+                uxAction('socialShareClick::'+module+'::sharingIconOpen');
+            }    
+        }           
     },
     close(trackClick) {
         if (!this.$store.sharingIsOpen[module]) return

package/src/stories/views/components/social_sharing/social_sharing_horizontal.hbs

@@ -1,7 +1,7 @@
 {{~#with this.socialSharing ~}}
     <div 
         x-data="socialSharingHandler('metadatabox')"
-        x-init="$watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
+        x-init="initBrowserDetection(); $watch('$store.sharingIsVisible', () => {$store.sharingIsOpen.metadatabox = false; $store.sharingIsOpen.mobilesticky = false})"
         class="flex self-center justify-end ml-3 print:hidden grow"
         x-intersect:leave="$store.sharingIsVisible=false"
         x-intersect:enter="$store.sharingIsVisible=true"

package/src/stories/views/components/social_sharing/social_sharing_mobile.hbs

@@ -1,6 +1,7 @@
 
 {{~#with this.socialSharing ~}}    
 <div x-data="socialSharingHandler('mobilesticky')"
+    x-init="initBrowserDetection();"    
     class=" relative ml-5 z-100 h-9.5 w-9.5"
     :class="$store.footerIsVisible ? '-mt-6' : '-mt-12'"  
     x-on:resize.window="$store.sharingIsOpen.mobilesticky = false"    

package/src/stories/views/components/social_sharing/social_sharing_ticker_item.hbs

@@ -2,6 +2,7 @@
     <div 
         x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
         class="flex self-center justify-end ml-3 print:hidden grow"
+        x-init="initBrowserDetection();"
         x-on:resize.window="$store.sharingIsOpen.ticker = false"       
         x-on:keydown.escape.prevent.stop="close()"
         @click.outside="close()"
@@ -13,7 +14,7 @@
             <button 
                 class="order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group lg:hidden"
                 x-ref="button"
-                x-on:click="toggle()"
+                x-on:click="toggle('{{../this.escapedTitle}}','{{../this.socialSharingUrl}}')"
                 :aria-expanded="open"
                 :aria-controls="$id('dropdown-button')"
                 aria-label="{{loca "share_linktitle" }}"

package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.hbs

@@ -6,31 +6,34 @@
             {{else}}
                 <li class="relative h-auto [&:not(:last-child)]:pb-5">
             {{/if}}
-                <div class="absolute h-full">
-                    <div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-tickerTeaserTimelineScore -left-5"></div>
+                <div class="absolute h-full -left-5 top-0.5">
+                    <div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-tickerTeaserTimelineScore "></div>
                     {{#unless @last}}
-                        <div class="relative flex flex-col w-0 h-full timelineBorder -left-4">
+                        <div class="relative flex flex-col w-0 h-full timelineBorder left-1">
                             <div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-boulder{{/if}}"></div>
                             <div class="h-2"></div>
                         </div>
                     {{/unless}}
                 </div>
-                {{#unless this.hideDateTime}}
-                    {{#with this.tickerItemDateTime~}}
-                        <div class="font-headingSerif {{#if ../../../_isTickerpage}}text-sm{{else}}text-xs{{/if}}{{#if ../../../_color}} text-{{../../../_color}}{{else}} text-gray-scorpion dark:text-gray-mercury{{/if}}">
-                            {{#if ../../../this.isMultiDay}}
-                                {{this.broadcastDate }}
-                            {{else}}
-                                {{#if ../../../this.isOlderThanToday}}
+                
+                <a class="font-headingSerif {{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white {{#if ../../_isTickerpage}}text-sm{{else}}text-base{{/if}} js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-link dark:text-link-dark{{/if}} ds-link{{#if this.hideDateTime}} align-top{{/if}}" href="{{this.tickerItemUrl}}" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "TickerTeaser::{{../../this.sophoraId}}-TeaserPostLink geklickt"}]}'>
+                    {{#unless this.hideDateTime}}
+                        {{#with this.tickerItemDateTime~}}
+                            <div class="font-headingSerif text-xs pb-0.5{{#if ../../../_color}} text-{{../../../_color}}{{else}} text-gray-scorpion dark:text-gray-mercury{{/if}}">
+                                {{#if ../../../this.isMultiDay}}
                                     {{this.broadcastDate }}
                                 {{else}}
-                                    {{this.time }}
+                                    {{#if ../../../this.isOlderThanToday}}
+                                        {{this.broadcastDate }}
+                                    {{else}}
+                                        {{this.time }}
+                                    {{/if}}
                                 {{/if}}
-                            {{/if}}
-                        </div>
-                    {{~/with}}
-                {{/unless}}
-                <a class="font-headingSerif {{if (isUserConsentNeeded this.tickerItemUrl) 'js-user-consent-needed ' ''}}link-focus-white {{#if ../../_isTickerpage}}text-[15px] leading-[18px]{{else}}text-base{{/if}} js-load {{#if ../../_color}} text-{{../../_color}}{{else}} text-link dark:text-link-dark{{/if}} ds-link{{#if this.hideDateTime}} align-top{{/if}}" href="{{this.tickerItemUrl}}" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "TickerTeaser::{{../../this.sophoraId}}-TeaserPostLink geklickt"}]}'>{{this.relevantTitle}}</a>
+                            </div>
+                        {{~/with}}
+                    {{/unless}}
+                    {{this.relevantTitle}}
+                </a>
             </li>
         {{~/each~}}
     </ul>