hr-design-system-handlebars 0.93.1 → 0.95.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.95.0 (Thu Dec 01 2022)
+
+#### 🚀 Enhancement
+
+- Pocast delivery integration fixes v3 [#408](https://github.com/mumprod/hr-design-system-handlebars/pull/408) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.94.0 (Wed Nov 30 2022)
+
+#### 🚀 Enhancement
+
+- Delete not needed param and add mt-12 to safeList to be sure the css-… [#407](https://github.com/mumprod/hr-design-system-handlebars/pull/407) ([@mariokinzel](https://github.com/mariokinzel))
+
+#### Authors: 1
+
+- [@mariokinzel](https://github.com/mariokinzel)
+
+---
+
 # v0.93.1 (Wed Nov 30 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -797,6 +797,9 @@ video {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+.mt-12 {
+  margin-top: 3rem;
+}
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -1058,14 +1061,17 @@ video {
 .w-9 {
   width: 2.25rem;
 }
-.w-24 {
-  width: 6rem;
+.w-22 {
+  width: 5.5rem;
 }
 .w-fit {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
+.w-24 {
+  width: 6rem;
+}
 .w-0 {
   width: 0px;
 }
@@ -2253,7 +2259,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1669814302552;
+  counter-reset: cnt1669895465574;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2639,7 +2645,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1669814302552 1;
+  counter-increment: cnt1669895465574 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2655,7 +2661,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1669814302552);
+  content: counter(cnt1669895465574);
 }
 .\[-T\:\+Z\] {
   --t: +Z;
@@ -3349,6 +3355,12 @@ video {
     display: none;
   }
 }
+@media (min-width: 360px) {
+
+  .xs\:w-24 {
+    width: 6rem;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\:mx-0 {

package/dist/assets/vendor/js/podcast_player.alpine.js

@@ -56,8 +56,7 @@ export default function playaudio(){
             },
 
             updateCurrentTime(range,timeDisplay,newTime, id) {
-
-                timeDisplay.querySelector('#currentTime').innerHTML = this.fancyTimeFormat(newTime, false)
+                timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(newTime, false)            
                 range.style.background = 'linear-gradient(to right, #006dc1 ' + (range.value/10)  + '%, white ' + (range.value/10) + '% )'
                 range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
             }, 

package/dist/views/components/teaser/group_teaser/group_teaser.hbs

@@ -1,4 +1,4 @@
-{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} 
+{{#>components/grid/grid_group _backgroundColor=this.backgroundColor }} 
         {{~#if this.hasGroupTitle}}
             <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
                 {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}

package/dist/views/components/teaser/podcast/podcast-playlist.hbs

@@ -1,4 +1,4 @@
 
-    <div id="4" class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6"," "]'}}" >
+    <div id="4" class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
         {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
     </div>

package/dist/views/components/teaser/podcast/podcast.hbs

@@ -1,3 +1,3 @@
-<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{~inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
-    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}
+<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-blue-accented rounded-tl-3xl rounded-br-3xl{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
+    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _teaserSize=this.teaserSize _type="podcastEpisodePlayerTeaser" }}
 </div>

package/dist/views/components/teaser/podcast/podcast_player.hbs

@@ -1,7 +1,7 @@
-<div class="flex col-span-12">   
+<div class="flex col-span-12 p-5">   
   <div class="flex flex-col grow">
   {{!-- First Row --}}
-    <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">
+    <div class="flex flex-row {{#if ../_ordered}} pl-8 {{/if}} ">
       <div class="flex flex-col grow">  
         <div class="flex max-h-6">
           {{!-- Label / Airdate --}}
@@ -35,13 +35,13 @@
 
       {{!-- Podcast Image      --}}
       <div class="flex flex-col ">
-        <div class="w-24 md:w-42">
+        <div class="w-22 xs:w-24 {{inline-switch _teaserSize '["50"]' '["","md:w-42"]'}}">
           {{> components/base/image/responsive_image this.teaseritem 
             _type="podcastEpisodePlayer"
             _variant="default"
             _addClass="overflow-hidden"
             _noDelay=this.dontLazyload 
-            _addClassImg="w-full h-24 md:h-42 block"
+            _addClassImg="w-full block"
           }}
         </div>
       </div>
@@ -49,7 +49,7 @@
     </div>
 
     {{!-- Player UI --}}
-    <div class="flex px-5 md:pl-5 md:pr-52 md:-mt-14" 
+    <div class="flex {{inline-switch _teaserSize '["50"]' '["","md:pr-52 md:-mt-14"]'}}" 
       x-data="playaudio()"
       x-init="listenToGlobalStop()"
       ax-load
@@ -64,16 +64,16 @@
     </div>
   
     {{!-- Abo-Dropdown    --}}
-    <div class="flex flex-row p-5 md:pr-0">
+    <div class="flex flex-row pt-5">
       {{#with this.podcastChannel}}       
         {{> components/teaser/podcast/podcast_subscribe_button}}
       {{/with}}
 
       {{#with this.podcastChannel}}    
         {{!-- Sendungs-Link --}}
-        <div class="flex justify-end w-full pl-4 md:pr-52">
-          <div class="flex flex-wrap self-end text-xs font-heading text-blue-science">
-            <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>
+        <div class="flex justify-end w-full pl-4">
+          <div class="flex flex-col flex-wrap self-end text-xs font-heading text-blue-science">
+            <span class="self-end font-bold">Zur Sendung</span>
             <a class="underline" href="{{this.url}}">{{this.title}}</a>
           </div>
         </div>

package/dist/views/components/teaser/podcast/podcast_player_ui.hbs

@@ -58,9 +58,10 @@
                     <div x-init="setTime( '{{_podcastDuration}}', '{{_id}}' ); " class="flex w-full"> 
                         {{> components/teaser/podcast/podcast_timedisplay 
                         _id=_id
+                        _duration=duration
                         _currentTimeClasses="font-bold text-orange-layout" 
                         _durationClasses="text-blue-science" 
-                        _containerCss="flex text-xs grow font-headingSerif" }}
+                        _containerCss="flex text-sm grow font-heading" }}
                     </div>
                 {{/if}}
             </div>
@@ -70,11 +71,11 @@
             {{!-- Meta Time usw. --}}
             <div x-init="setTime( '{{_podcastDuration}}', '{{_id}}' ); " >
             {{> components/teaser/podcast/podcast_timedisplay 
+                _id=_id
                 _duration=duration 
                 _currentTimeClasses="font-bold text-orange-layout" 
                 _durationClasses="text-blue-science" 
-                _id=_id
-                _containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}              
+                _containerCss="pl-16 -mt-3 flex text-sm grow font-heading"}}              
             </div>
         {{/unless}}
         

package/dist/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -68,7 +68,7 @@
     ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
       {{#with this.playlistItems}}
         {{#each this}}
-          <div class="flex pb-5 border-b {{#unless @last}}border-white{{/unless}}" >
+          <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}" >
             {{> components/teaser/podcast/podcast_player_ui 
             _isPlaylistPlayer=true
             _podcastDuration=duration

package/dist/views/components/teaser/podcast/podcast_timedisplay.hbs

@@ -1,5 +1,5 @@
 <div id="timedisplay{{_id}}" class="{{_containerCss}}">
-    <span class="{{_currentTimeClasses}} js-currentTime" id="currentTime" >00:00</span>
+    <span class="{{_currentTimeClasses}} js-currentTime" id="currentTime" >0:00</span>
     <span class="{{_durationClasses}} px-0.5"> / </span>
     <span class="{{_durationClasses}} js-audioDuration" id="audioDurationFancy">{{_duration}}</span>
 </div>

package/package.json

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

package/src/assets/fixtures/teaser/teaser_podcast_50.json

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser_podcast_episode",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        } 
+    ]
+}

package/src/assets/vendor/js/podcast_player.alpine.js

@@ -56,8 +56,7 @@ export default function playaudio(){
             },
 
             updateCurrentTime(range,timeDisplay,newTime, id) {
-
-                timeDisplay.querySelector('#currentTime').innerHTML = this.fancyTimeFormat(newTime, false)
+                timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(newTime, false)            
                 range.style.background = 'linear-gradient(to right, #006dc1 ' + (range.value/10)  + '%, white ' + (range.value/10) + '% )'
                 range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10
             }, 

package/src/stories/views/components/teaser/fixtures/teaser_podcast_50.json

@@ -0,0 +1 @@
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/podcast/podcast","includeModel":{"byline":"Byline","title":"\"Ich höre bei jedem Geräusch gleich die Tonhöhe\" | Komponist und Theatermacher Heiner Goebbels erneuert das Musiktheater","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"50","isMobile1to1":false,"airdateDate":{"htmlDateTime":"2022-10-31T19:30+0200","htmlDate":"31.10.2022","date":"31.10.22","dateSeparatorTime":"31.10.22, 19:30"},"teaseritem":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/heiner-goebbels-102_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"}]}},"duration":"53:13","teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"podcastChannel":{"title":"hr2 Doppelkopf","url":"#ChannelURL","podcastHoster":[{"podcastHosterUrl":"https://podcasts.apple.com/podcast/hr2-doppelkopf/id212822590","podcastHosterName":"ITunes"},{"podcastHosterUrl":"https://podcast.hr.de/hr2_doppelkopf/podcast.xml","podcastHosterName":"RSS"},{"podcastHosterUrl":"https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2hyMl9kb3BwZWxrb3BmL3BvZGNhc3QueG1s?hl=de","podcastHosterName":"Google Podcasts"},{"podcastHosterUrl":"https://www.ardaudiothek.de/episode/hr2-doppelkopf/ich-hoere-bei-jedem-geraeusch-gleich-die-tonhoehe-oder-komponist-und-theatermacher-heiner-goebbels-erneuert-das-musiktheater/hr2-kultur/12056783/","podcastHosterName":"ARD Audiothek"}]},"audioUrl":"https://mp3podcasthrdl-a.akamaihd.net/mp3/podcast/hr2_doppelkopf/hr2_doppelkopf_20221031_96251016.mp3","podcastDownloadUrl":"https://mp3podcasthrdl-a.akamaihd.net/mp3/podcast/hr2_doppelkopf/hr2_doppelkopf_20221031_96251016.mp3","teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/heiner-goebbels-102_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"}]}},"documentSection":"Kultur","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":false,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":true,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Stefan Fricke","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":true,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h2","icon":"ortsmarke","imageVariant":"topteaser","hideShortText":false,"shorttext":"Bla ..... 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 liebe Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"isPodcast":true,"toModel":{"audioElement":{"isPodcast":true,"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":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt,  entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","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":"50"},"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":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt,  entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","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":"50"}}}},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"podcast","loca":"label_podcast","byline":{"bylineSsi":"53:13 min","bylineText":""}}}}}

package/src/stories/views/components/teaser/group_teaser/group_teaser.hbs

@@ -1,4 +1,4 @@
-{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} 
+{{#>components/grid/grid_group _backgroundColor=this.backgroundColor }} 
         {{~#if this.hasGroupTitle}}
             <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
                 {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}

package/src/stories/views/components/teaser/podcast/podcast-playlist.hbs

@@ -1,4 +1,4 @@
 
-    <div id="4" class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6"," "]'}}" >
+    <div id="4" class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
         {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
     </div>

package/src/stories/views/components/teaser/podcast/podcast.hbs

@@ -1,3 +1,3 @@
-<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-0 md:pt-5 bg-blue-accented rounded-tl-3xl rounded-br-3xl col-span-12 {{~inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
-    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}
+<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-blue-accented rounded-tl-3xl rounded-br-3xl{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
+    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _teaserSize=this.teaserSize _type="podcastEpisodePlayerTeaser" }}
 </div>

package/src/stories/views/components/teaser/podcast/podcast.stories.mdx

@@ -3,6 +3,7 @@ import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
 import podcast from './podcast.hbs'
 import podcastPlaylist from './podcast-playlist.hbs'
 import episodeJson from '../fixtures/teaser_podcast.json'
+import episodeJson50 from '../fixtures/teaser_podcast_50.json'
 import playlistJson100 from '../fixtures/teaser_podcast_playlist.json'
 import playlistJson50 from '../fixtures/teaser_podcast_playlist_50.json'
 
@@ -47,7 +48,10 @@ export const playlistTemplate = (args, { globals: { customConditionalToolbar } }
 <Preview withToolbar>    
     <Story  name="100% Episode Player" args={episodeJson.logicItem.includeModel}>
         {episodeTemplate.bind({})} 
-    </Story> 
+    </Story>
+    <Story  name="50% Episode Player" args={episodeJson50.logicItem.includeModel}>
+        {episodeTemplate.bind({})} 
+    </Story>  
     <Story  name="100% Channel Player" args={playlistJson100.logicItem.includeModel}>
         {playlistTemplate.bind({})} 
     </Story>

package/src/stories/views/components/teaser/podcast/podcast_player.hbs

@@ -1,7 +1,7 @@
-<div class="flex col-span-12">   
+<div class="flex col-span-12 p-5">   
   <div class="flex flex-col grow">
   {{!-- First Row --}}
-    <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">
+    <div class="flex flex-row {{#if ../_ordered}} pl-8 {{/if}} ">
       <div class="flex flex-col grow">  
         <div class="flex max-h-6">
           {{!-- Label / Airdate --}}
@@ -35,13 +35,13 @@
 
       {{!-- Podcast Image      --}}
       <div class="flex flex-col ">
-        <div class="w-24 md:w-42">
+        <div class="w-22 xs:w-24 {{inline-switch _teaserSize '["50"]' '["","md:w-42"]'}}">
           {{> components/base/image/responsive_image this.teaseritem 
             _type="podcastEpisodePlayer"
             _variant="default"
             _addClass="overflow-hidden"
             _noDelay=this.dontLazyload 
-            _addClassImg="w-full h-24 md:h-42 block"
+            _addClassImg="w-full block"
           }}
         </div>
       </div>
@@ -49,7 +49,7 @@
     </div>
 
     {{!-- Player UI --}}
-    <div class="flex px-5 md:pl-5 md:pr-52 md:-mt-14" 
+    <div class="flex {{inline-switch _teaserSize '["50"]' '["","md:pr-52 md:-mt-14"]'}}" 
       x-data="playaudio()"
       x-init="listenToGlobalStop()"
       ax-load
@@ -64,16 +64,16 @@
     </div>
   
     {{!-- Abo-Dropdown    --}}
-    <div class="flex flex-row p-5 md:pr-0">
+    <div class="flex flex-row pt-5">
       {{#with this.podcastChannel}}       
         {{> components/teaser/podcast/podcast_subscribe_button}}
       {{/with}}
 
       {{#with this.podcastChannel}}    
         {{!-- Sendungs-Link --}}
-        <div class="flex justify-end w-full pl-4 md:pr-52">
-          <div class="flex flex-wrap self-end text-xs font-heading text-blue-science">
-            <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>
+        <div class="flex justify-end w-full pl-4">
+          <div class="flex flex-col flex-wrap self-end text-xs font-heading text-blue-science">
+            <span class="self-end font-bold">Zur Sendung</span>
             <a class="underline" href="{{this.url}}">{{this.title}}</a>
           </div>
         </div>

package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs

@@ -58,9 +58,10 @@
                     <div x-init="setTime( '{{_podcastDuration}}', '{{_id}}' ); " class="flex w-full"> 
                         {{> components/teaser/podcast/podcast_timedisplay 
                         _id=_id
+                        _duration=duration
                         _currentTimeClasses="font-bold text-orange-layout" 
                         _durationClasses="text-blue-science" 
-                        _containerCss="flex text-xs grow font-headingSerif" }}
+                        _containerCss="flex text-sm grow font-heading" }}
                     </div>
                 {{/if}}
             </div>
@@ -70,11 +71,11 @@
             {{!-- Meta Time usw. --}}
             <div x-init="setTime( '{{_podcastDuration}}', '{{_id}}' ); " >
             {{> components/teaser/podcast/podcast_timedisplay 
+                _id=_id
                 _duration=duration 
                 _currentTimeClasses="font-bold text-orange-layout" 
                 _durationClasses="text-blue-science" 
-                _id=_id
-                _containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}              
+                _containerCss="pl-16 -mt-3 flex text-sm grow font-heading"}}              
             </div>
         {{/unless}}
         

package/src/stories/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -68,7 +68,7 @@
     ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
       {{#with this.playlistItems}}
         {{#each this}}
-          <div class="flex pb-5 border-b {{#unless @last}}border-white{{/unless}}" >
+          <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}" >
             {{> components/teaser/podcast/podcast_player_ui 
             _isPlaylistPlayer=true
             _podcastDuration=duration

package/src/stories/views/components/teaser/podcast/podcast_timedisplay.hbs

@@ -1,5 +1,5 @@
 <div id="timedisplay{{_id}}" class="{{_containerCss}}">
-    <span class="{{_currentTimeClasses}} js-currentTime" id="currentTime" >00:00</span>
+    <span class="{{_currentTimeClasses}} js-currentTime" id="currentTime" >0:00</span>
     <span class="{{_durationClasses}} px-0.5"> / </span>
     <span class="{{_durationClasses}} js-audioDuration" id="audioDurationFancy">{{_duration}}</span>
 </div>

package/tailwind.config.js

@@ -6,6 +6,9 @@ module.exports = {
     experimental: {
         optimizeUniversalDefaults: true,
     },
+    safelist: [
+        "mt-12"
+    ],
     content: [
         './src/stories/*.mdx',
         './src/stories/views/**/*.{mdx,hbs,js}',