Ensure teaser layout when not linked

This commit is contained in:
Björn Fromme
2022-03-08 15:52:38 +01:00
parent 06f7d4832a
commit 51496de05b
5 changed files with 120 additions and 114 deletions
@@ -5,8 +5,8 @@
<f:section name="Teaser"> <f:section name="Teaser">
<f:link.typolink parameter="{city.detailPage}" <f:link.typolink parameter="{city.detailPage}"
title="{city.name}" title="{city.name}">
class="flex flex-col"> <div class="flex flex-col">
<div class="relative"> <div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0"> <svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{city.country.code -> f:format.case(mode: 'lower')}"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{city.country.code -> f:format.case(mode: 'lower')}"></use>
@@ -28,6 +28,7 @@
class="button w-full"> class="button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')} {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button> </button>
</div>
</f:link.typolink> </f:link.typolink>
</f:section> </f:section>
@@ -5,8 +5,8 @@
<f:section name="Teaser"> <f:section name="Teaser">
<f:link.typolink parameter="{concept.detailPage}" <f:link.typolink parameter="{concept.detailPage}"
title="{concept.name}" title="{concept.name}">
class="flex flex-col"> <div class="flex flex-col">
<div class="relative"> <div class="relative">
<ep:lazyLoadImage image="{concept.teaserImage}" <ep:lazyLoadImage image="{concept.teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
@@ -24,6 +24,7 @@
{concept.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()} {concept.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div> </div>
<div class="bg-concept-{concept.code} h-1 w-20"></div> <div class="bg-concept-{concept.code} h-1 w-20"></div>
</div>
</f:link.typolink> </f:link.typolink>
</f:section> </f:section>
@@ -5,8 +5,8 @@
<f:section name="Teaser"> <f:section name="Teaser">
<f:link.typolink parameter="{hotel.detailPage}" <f:link.typolink parameter="{hotel.detailPage}"
title="{hotel.name}" title="{hotel.name}">
class="flex flex-col"> <div class="flex flex-col">
<div class="relative"> <div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0"> <svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{hotel.country.code -> f:format.case(mode: 'lower')}"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{hotel.country.code -> f:format.case(mode: 'lower')}"></use>
@@ -38,6 +38,7 @@
class="button w-full"> class="button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')} {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button> </button>
</div>
</f:link.typolink> </f:link.typolink>
</f:section> </f:section>
@@ -5,8 +5,8 @@
<f:section name="Teaser"> <f:section name="Teaser">
<f:link.typolink parameter="{region.detailPage}" <f:link.typolink parameter="{region.detailPage}"
title="{region.name}" title="{region.name}">
class="flex flex-col"> <div class="flex flex-col">
<div class="relative"> <div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0"> <svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{region.country.code -> f:format.case(mode: 'lower')}"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{region.country.code -> f:format.case(mode: 'lower')}"></use>
@@ -28,6 +28,7 @@
class="button w-full"> class="button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')} {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button> </button>
</div>
</f:link.typolink> </f:link.typolink>
</f:section> </f:section>
@@ -5,7 +5,8 @@
<f:section name="Teaser"> <f:section name="Teaser">
<f:link.typolink parameter="{data.header_link}" <f:link.typolink parameter="{data.header_link}"
class="flex flex-col group"> class="group">
<div class="flex flex-col">
<div class="relative"> <div class="relative">
<f:if condition="{context.country}"> <f:if condition="{context.country}">
<svg class="w-8 h-6 absolute top-0 left-0"> <svg class="w-8 h-6 absolute top-0 left-0">
@@ -29,6 +30,7 @@
class="button w-full"> class="button w-full">
{data.button -> v:or(alternative: 'Details')} {data.button -> v:or(alternative: 'Details')}
</button> </button>
</div>
</f:link.typolink> </f:link.typolink>
</f:section> </f:section>