hr-design-system-handlebars 0.118.0 → 0.119.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.
Files changed (15) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/index.css +6 -17
  3. package/dist/views/components/mediaplayer/media_player.hbs +1 -1
  4. package/dist/views/components/teaser/components/teaser_body.hbs +2 -1
  5. package/dist/views/components/teaser/components/teaser_image.hbs +23 -24
  6. package/dist/views/components/teaser/podcast/podcast_playbutton.hbs +1 -1
  7. package/dist/views/components/teaser/teaser_alternativ.hbs +2 -2
  8. package/dist/views/components/teaser/teaser_standard.hbs +4 -4
  9. package/package.json +1 -1
  10. package/src/stories/views/components/mediaplayer/media_player.hbs +1 -1
  11. package/src/stories/views/components/teaser/components/teaser_body.hbs +2 -1
  12. package/src/stories/views/components/teaser/components/teaser_image.hbs +23 -24
  13. package/src/stories/views/components/teaser/podcast/podcast_playbutton.hbs +1 -1
  14. package/src/stories/views/components/teaser/teaser_alternativ.hbs +2 -2
  15. package/src/stories/views/components/teaser/teaser_standard.hbs +4 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ # v0.119.0 (Wed Jan 18 2023)
2
+
3
+ #### 🚀 Enhancement
4
+
5
+ - FEATURE: Removes unneccessary div in teaser_image and fixes css problems [#481](https://github.com/mumprod/hr-design-system-handlebars/pull/481) ([@szuelch](https://github.com/szuelch))
6
+
7
+ #### Authors: 1
8
+
9
+ - [@szuelch](https://github.com/szuelch)
10
+
11
+ ---
12
+
13
+ # v0.118.1 (Tue Jan 17 2023)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - Dpe 2013 podcast start not via tab but via leertaste [#480](https://github.com/mumprod/hr-design-system-handlebars/pull/480) ([@StefanVesper](https://github.com/StefanVesper))
18
+
19
+ #### Authors: 1
20
+
21
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
22
+
23
+ ---
24
+
1
25
  # v0.118.0 (Tue Jan 17 2023)
2
26
 
3
27
  #### 🚀 Enhancement
package/dist/assets/index.css CHANGED
@@ -1978,6 +1978,9 @@ video {
1978
1978
  .pb-3 {
1979
1979
  padding-bottom: 0.75rem;
1980
1980
  }
1981
+ .pr-10 {
1982
+ padding-right: 2.5rem;
1983
+ }
1981
1984
  .pt-0 {
1982
1985
  padding-top: 0px;
1983
1986
  }
@@ -2397,7 +2400,7 @@ video {
2397
2400
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2398
2401
  }
2399
2402
  .counter-reset {
2400
- counter-reset: cnt1673967171513;
2403
+ counter-reset: cnt1674029206988;
2401
2404
  }
2402
2405
  .line-clamp-4 {
2403
2406
  overflow: hidden;
@@ -2427,9 +2430,6 @@ video {
2427
2430
  .ar-16-9 {
2428
2431
  aspect-ratio: 16 / 9;
2429
2432
  }
2430
- .\!ar-16-9 {
2431
- aspect-ratio: 16 / 9 !important;
2432
- }
2433
2433
  @supports not (aspect-ratio: 16 / 9) {
2434
2434
  .ar-16-9::before {
2435
2435
  float: left;
@@ -2442,17 +2442,6 @@ video {
2442
2442
  content: '';
2443
2443
  clear: both;
2444
2444
  }
2445
- .\!ar-16-9::before {
2446
- float: left !important;
2447
- padding-top: 56.25% !important;
2448
- content: '' !important;
2449
- }
2450
-
2451
- .ar-16-19::after {
2452
- display: block !important;
2453
- content: '' !important;
2454
- clear: both !important;
2455
- }
2456
2445
  }
2457
2446
  .ar-1-1 {
2458
2447
  aspect-ratio: 1 / 1;
@@ -2629,7 +2618,7 @@ video {
2629
2618
  --tw-ring-color: rgba(255, 255, 255, 0.5);
2630
2619
  }
2631
2620
  .-ordered {
2632
- counter-increment: cnt1673967171513 1;
2621
+ counter-increment: cnt1674029206988 1;
2633
2622
  }
2634
2623
  .-ordered::before {
2635
2624
  position: absolute;
@@ -2645,7 +2634,7 @@ video {
2645
2634
  letter-spacing: .0125em;
2646
2635
  --tw-text-opacity: 1;
2647
2636
  color: rgba(0, 0, 0, var(--tw-text-opacity));
2648
- content: counter(cnt1673967171513);
2637
+ content: counter(cnt1674029206988);
2649
2638
  }
2650
2639
  /*! ****************************/
2651
2640
  /*! text-shadow */
package/dist/views/components/mediaplayer/media_player.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div x-show="avStart" x-cloak 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}}'>
1
+ <div x-show="avStart" x-cloak id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full{{#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" >
package/dist/views/components/teaser/components/teaser_body.hbs CHANGED
@@ -1,4 +1,5 @@
1
- <div class="{{~#if this.isMobile1to1}}basis-3/5{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
1
+ <div class="{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}"
2
+ {{~#if this.isMobile1to1}}:class="{'basis-full w-full pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
2
3
  <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
3
4
  {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }}
4
5
  {{> components/teaser/components/teaser_heading
package/dist/views/components/teaser/components/teaser_image.hbs CHANGED
@@ -1,28 +1,27 @@
1
- <div class="relative{{~#if _isMobile1to1}} ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
2
- {{#unless this.hideGeotag}}
3
- {{~#with this.geotag}}
4
- {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
5
- {{/with~}}
6
- {{/unless}}
7
- {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
8
- {{#if this.isProgram}}
9
- {{#if this.showMediatheksLink}}
10
- {{#decorator 'components/base/link' _isAriaHidden=true}}
11
- {{> components/button/button_round
12
- _isButton="true"
13
- _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
14
- _buttonColor='text-toplineColor hover:fill-toplineColor'
15
- _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
16
- _showIcon=true
17
- _icon='play_button'
18
- _label='Sendung'
19
- _srOnly="true"
20
- _alpineClick=""
21
- }}
22
- {{/decorator}}
23
- {{/if}}
1
+ {{#unless this.hideGeotag}}
2
+ {{~#with this.geotag}}
3
+ {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
4
+ {{/with~}}
5
+ {{/unless}}
6
+ {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
7
+ {{#if this.isProgram}}
8
+ {{#if this.showMediatheksLink}}
9
+ {{#decorator 'components/base/link' _isAriaHidden=true}}
10
+ {{> components/button/button_round
11
+ _isButton="true"
12
+ _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
13
+ _buttonColor='text-toplineColor hover:fill-toplineColor'
14
+ _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
15
+ _showIcon=true
16
+ _icon='play_button'
17
+ _label='Sendung'
18
+ _srOnly="true"
19
+ _alpineClick=""
20
+ }}
21
+ {{/decorator}}
24
22
  {{/if}}
25
- </div>
23
+ {{/if}}
24
+
26
25
  {{#if this.isEvent}}
27
26
  {{#unless this.displayTeaserBodyAsImageOverlay}}
28
27
  {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}
package/dist/views/components/teaser/podcast/podcast_playbutton.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <button id="button{{_id}}" x-on:keydown.tab="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}">
1
+ <button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}">
2
2
  <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring">
3
3
  {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
4
4
  </div>
package/dist/views/components/teaser/teaser_alternativ.hbs CHANGED
@@ -1,4 +1,4 @@
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}}"
1
+ <article class="items-start 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'"
@@ -7,7 +7,7 @@
7
7
  {{#if this.teaserImage}}
8
8
  <figure class="relative {{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3 md:w-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/3 md:w-1/3"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2 md:w-1/2"]'~}}"
9
9
  {{#if this.isMobile1to1}}
10
- :class="avStart ? '!ar-16-9' : ''"
10
+ :class="{'ar-16-9 basis-full w-full' : avStart, 'ar-1-1 basis-2/5 w-2/5': !avStart}"
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"]') }}
package/dist/views/components/teaser/teaser_standard.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <article class="relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4
1
+ <article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4
2
2
  {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
3
3
  {{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}}
4
4
  "
@@ -8,9 +8,9 @@
8
8
  {{/if}}
9
9
  >
10
10
  {{#if this.teaserImage}}
11
- <figure class="relative
12
- {{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}"
13
- {{~#if this.isMobile1to1}} :class="avStart ? '!ar-16-9' : ''"{{/if}} >
11
+ <figure class="relative
12
+ {{~#if this.isMobile1to1}} basis-2/5 w-2/5 ar-1-1 md:basis-full md:w-full md:ar-16-9{{else}} ar-16-9 w-full{{/if~}}"
13
+ {{~#if this.isMobile1to1}} :class="{'ar-16-9 w-full basis-full': avStart,'ar-1-1 basis-2/5 w-2/5':!avStart}"{{/if}} >
14
14
  {{> 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"]')) }}
15
15
  </figure>
16
16
  {{#if this.displayTeaserBodyAsImageOverlay}}
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.118.0",
9
+ "version": "0.119.0",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/stories/views/components/mediaplayer/media_player.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div x-show="avStart" x-cloak 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}}'>
1
+ <div x-show="avStart" x-cloak id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full{{#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" >
package/src/stories/views/components/teaser/components/teaser_body.hbs CHANGED
@@ -1,4 +1,5 @@
1
- <div class="{{~#if this.isMobile1to1}}basis-3/5{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
1
+ <div class="{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}"
2
+ {{~#if this.isMobile1to1}}:class="{'basis-full w-full pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
2
3
  <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
3
4
  {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }}
4
5
  {{> components/teaser/components/teaser_heading
package/src/stories/views/components/teaser/components/teaser_image.hbs CHANGED
@@ -1,28 +1,27 @@
1
- <div class="relative{{~#if _isMobile1to1}} ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
2
- {{#unless this.hideGeotag}}
3
- {{~#with this.geotag}}
4
- {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
5
- {{/with~}}
6
- {{/unless}}
7
- {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
8
- {{#if this.isProgram}}
9
- {{#if this.showMediatheksLink}}
10
- {{#decorator 'components/base/link' _isAriaHidden=true}}
11
- {{> components/button/button_round
12
- _isButton="true"
13
- _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
14
- _buttonColor='text-toplineColor hover:fill-toplineColor'
15
- _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
16
- _showIcon=true
17
- _icon='play_button'
18
- _label='Sendung'
19
- _srOnly="true"
20
- _alpineClick=""
21
- }}
22
- {{/decorator}}
23
- {{/if}}
1
+ {{#unless this.hideGeotag}}
2
+ {{~#with this.geotag}}
3
+ {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
4
+ {{/with~}}
5
+ {{/unless}}
6
+ {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
7
+ {{#if this.isProgram}}
8
+ {{#if this.showMediatheksLink}}
9
+ {{#decorator 'components/base/link' _isAriaHidden=true}}
10
+ {{> components/button/button_round
11
+ _isButton="true"
12
+ _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
13
+ _buttonColor='text-toplineColor hover:fill-toplineColor'
14
+ _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
15
+ _showIcon=true
16
+ _icon='play_button'
17
+ _label='Sendung'
18
+ _srOnly="true"
19
+ _alpineClick=""
20
+ }}
21
+ {{/decorator}}
24
22
  {{/if}}
25
- </div>
23
+ {{/if}}
24
+
26
25
  {{#if this.isEvent}}
27
26
  {{#unless this.displayTeaserBodyAsImageOverlay}}
28
27
  {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}
package/src/stories/views/components/teaser/podcast/podcast_playbutton.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <button id="button{{_id}}" x-on:keydown.tab="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}">
1
+ <button id="button{{_id}}" x-on:keydown.space.prevent.stop="{{_alpineClick}}" x-on:click.stop="{{_alpineClick}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}">
2
2
  <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring">
3
3
  {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
4
4
  </div>
package/src/stories/views/components/teaser/teaser_alternativ.hbs CHANGED
@@ -1,4 +1,4 @@
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}}"
1
+ <article class="items-start 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'"
@@ -7,7 +7,7 @@
7
7
  {{#if this.teaserImage}}
8
8
  <figure class="relative {{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3 md:w-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/3 md:w-1/3"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2 md:w-1/2"]'~}}"
9
9
  {{#if this.isMobile1to1}}
10
- :class="avStart ? '!ar-16-9' : ''"
10
+ :class="{'ar-16-9 basis-full w-full' : avStart, 'ar-1-1 basis-2/5 w-2/5': !avStart}"
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"]') }}
package/src/stories/views/components/teaser/teaser_standard.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <article class="relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4
1
+ <article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4
2
2
  {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
3
3
  {{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}}
4
4
  "
@@ -8,9 +8,9 @@
8
8
  {{/if}}
9
9
  >
10
10
  {{#if this.teaserImage}}
11
- <figure class="relative
12
- {{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}"
13
- {{~#if this.isMobile1to1}} :class="avStart ? '!ar-16-9' : ''"{{/if}} >
11
+ <figure class="relative
12
+ {{~#if this.isMobile1to1}} basis-2/5 w-2/5 ar-1-1 md:basis-full md:w-full md:ar-16-9{{else}} ar-16-9 w-full{{/if~}}"
13
+ {{~#if this.isMobile1to1}} :class="{'ar-16-9 w-full basis-full': avStart,'ar-1-1 basis-2/5 w-2/5':!avStart}"{{/if}} >
14
14
  {{> 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"]')) }}
15
15
  </figure>
16
16
  {{#if this.displayTeaserBodyAsImageOverlay}}