Ensure elements in grids have same height
This commit is contained in:
Björn Fromme
@@ -4,32 +4,29 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<f:link.typolink parameter="{city.detailPage}"
|
<a href="{f:uri.typolink(parameter: city.detailPage)}" class="flex flex-col" title="{city.name}">
|
||||||
title="{city.name}">
|
<div class="relative">
|
||||||
<div class="flex flex-col">
|
<svg class="w-8 h-6 absolute top-0 left-0">
|
||||||
<div class="relative">
|
<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>
|
||||||
<svg class="w-8 h-6 absolute top-0 left-0">
|
</svg>
|
||||||
<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>
|
<ep:lazyLoadImage image="{city.teaserImage}"
|
||||||
</svg>
|
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||||
<ep:lazyLoadImage image="{city.teaserImage}"
|
class="block w-full h-full object-cover"
|
||||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
width="360c"
|
||||||
class="block w-full h-full object-cover"
|
height="270c"
|
||||||
width="360c"
|
alt="{city.name}" />
|
||||||
height="270c"
|
|
||||||
alt="{city.name}" />
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
|
|
||||||
<span class="headline--3 mb-4">
|
|
||||||
{city.name}
|
|
||||||
</span>
|
|
||||||
{city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
|
||||||
</div>
|
|
||||||
<button type="button"
|
|
||||||
class="button w-full">
|
|
||||||
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</f:link.typolink>
|
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
|
||||||
|
<span class="headline--3 mb-4">
|
||||||
|
{city.name}
|
||||||
|
</span>
|
||||||
|
{city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
||||||
|
</div>
|
||||||
|
<button type="button"
|
||||||
|
class="button w-full">
|
||||||
|
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,28 +4,25 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<f:link.typolink parameter="{concept.detailPage}"
|
<a href="{f:uri.typolink(parameter: concept.detailPage)}" title="{concept.name}" class="flex flex-col">
|
||||||
title="{concept.name}">
|
<div class="relative">
|
||||||
<div class="flex flex-col">
|
<ep:lazyLoadImage image="{concept.teaserImage}"
|
||||||
<div class="relative">
|
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||||
<ep:lazyLoadImage image="{concept.teaserImage}"
|
class="block w-full h-full object-cover"
|
||||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
width="360c"
|
||||||
class="block w-full h-full object-cover"
|
height="270c"
|
||||||
width="360c"
|
alt="{concept.name}" />
|
||||||
height="270c"
|
<div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}-overlay">
|
||||||
alt="{concept.name}" />
|
<div class="flex h-full w-full p-4 items-end headline--3 text-white">
|
||||||
<div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}-overlay">
|
{concept.name}
|
||||||
<div class="flex h-full w-full p-4 items-end headline--3 text-white">
|
|
||||||
{concept.name}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 flex-1">
|
|
||||||
{concept.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
|
||||||
</div>
|
|
||||||
<div class="bg-concept-{concept.code} h-1 w-20"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</f:link.typolink>
|
<div class="p-4 flex-1">
|
||||||
|
{concept.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
||||||
|
</div>
|
||||||
|
<div class="bg-concept-{concept.code} h-1 w-20"></div>
|
||||||
|
</a>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,42 +4,39 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<f:link.typolink parameter="{hotel.detailPage}"
|
<a href="{f:uri.typolink(parameter: hotel.detailPage)}" title="{hotel.name}" class="flex flex-col">
|
||||||
title="{hotel.name}">
|
<div class="relative">
|
||||||
<div class="flex flex-col">
|
<svg class="w-8 h-6 absolute top-0 left-0">
|
||||||
<div class="relative">
|
<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>
|
||||||
<svg class="w-8 h-6 absolute top-0 left-0">
|
</svg>
|
||||||
<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>
|
<ep:lazyLoadImage image="{hotel.images.original.0}"
|
||||||
</svg>
|
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||||
<ep:lazyLoadImage image="{hotel.images.original.0}"
|
class="block w-full h-full object-cover"
|
||||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
width="360c"
|
||||||
class="block w-full h-full object-cover"
|
height="270c"
|
||||||
width="360c"
|
alt="{hotel.name}" />
|
||||||
height="270c"
|
|
||||||
alt="{hotel.name}" />
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
|
|
||||||
<span class="headline--3 mb-4">
|
|
||||||
{hotel.name -> f:format.nl2br()}
|
|
||||||
</span>
|
|
||||||
<f:if condition="{hotel.category}">
|
|
||||||
<span class="searchresult-item__category">
|
|
||||||
<strong>Kategorie</strong> {hotel.category}
|
|
||||||
</span>
|
|
||||||
</f:if>
|
|
||||||
{hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
|
||||||
<f:if condition="{hotel.available} != -1">
|
|
||||||
<span class="teaserbox__price">
|
|
||||||
<strong>{f:if(condition: '{hotel.available} > 0', then: 'ab {hotel.minPrice} €', else: 'ausgebucht')}</strong>
|
|
||||||
</span>
|
|
||||||
</f:if>
|
|
||||||
</div>
|
|
||||||
<button type="button"
|
|
||||||
class="button w-full">
|
|
||||||
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</f:link.typolink>
|
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
|
||||||
|
<span class="headline--3 mb-4">
|
||||||
|
{hotel.name -> f:format.nl2br()}
|
||||||
|
</span>
|
||||||
|
<f:if condition="{hotel.category}">
|
||||||
|
<span class="searchresult-item__category">
|
||||||
|
<strong>Kategorie</strong> {hotel.category}
|
||||||
|
</span>
|
||||||
|
</f:if>
|
||||||
|
{hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
||||||
|
<f:if condition="{hotel.available} != -1">
|
||||||
|
<span class="teaserbox__price">
|
||||||
|
<strong>{f:if(condition: '{hotel.available} > 0', then: 'ab {hotel.minPrice} €', else: 'ausgebucht')}</strong>
|
||||||
|
</span>
|
||||||
|
</f:if>
|
||||||
|
</div>
|
||||||
|
<button type="button"
|
||||||
|
class="button w-full">
|
||||||
|
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,32 +4,29 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<f:link.typolink parameter="{region.detailPage}"
|
<a href="{f:uri.typolink(parameter: region.detailPage)}" title="{region.name}" class="flex flex-col">
|
||||||
title="{region.name}">
|
<div class="relative">
|
||||||
<div class="flex flex-col">
|
<svg class="w-8 h-6 absolute top-0 left-0">
|
||||||
<div class="relative">
|
<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>
|
||||||
<svg class="w-8 h-6 absolute top-0 left-0">
|
</svg>
|
||||||
<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>
|
<ep:lazyLoadImage image="{region.teaserImages.0}"
|
||||||
</svg>
|
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||||
<ep:lazyLoadImage image="{region.teaserImages.0}"
|
class="block w-full h-full object-cover"
|
||||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
width="360c"
|
||||||
class="block w-full h-full object-cover"
|
height="270c"
|
||||||
width="360c"
|
alt="{region.name}" />
|
||||||
height="270c"
|
|
||||||
alt="{region.name}" />
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
|
|
||||||
<span class="headline--3 mb-4">
|
|
||||||
{region.name}
|
|
||||||
</span>
|
|
||||||
{region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
|
||||||
</div>
|
|
||||||
<button type="button"
|
|
||||||
class="button w-full">
|
|
||||||
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</f:link.typolink>
|
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
|
||||||
|
<span class="headline--3 mb-4">
|
||||||
|
{region.name}
|
||||||
|
</span>
|
||||||
|
{region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
||||||
|
</div>
|
||||||
|
<button type="button"
|
||||||
|
class="button w-full">
|
||||||
|
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,34 +4,31 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<f:link.typolink parameter="{data.header_link}"
|
<a href="{f:uri.typolink(parameter: data.header_link)}" class="flex flex-col group">
|
||||||
class="group">
|
<div class="relative">
|
||||||
<div class="flex flex-col">
|
<f:if condition="{context.country}">
|
||||||
<div class="relative">
|
<svg class="w-8 h-6 absolute top-0 left-0">
|
||||||
<f:if condition="{context.country}">
|
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{context.country.code -> f:format.case(mode: 'lower')}"></use>
|
||||||
<svg class="w-8 h-6 absolute top-0 left-0">
|
</svg>
|
||||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{context.country.code -> f:format.case(mode: 'lower')}"></use>
|
</f:if>
|
||||||
</svg>
|
<ep:lazyLoadImage image="{teaserImage}"
|
||||||
</f:if>
|
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||||
<ep:lazyLoadImage image="{teaserImage}"
|
class="block w-full h-full object-cover"
|
||||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
width="360c"
|
||||||
class="block w-full h-full object-cover"
|
height="270c"
|
||||||
width="360c"
|
alt="{teaserImage.alternative}" />
|
||||||
height="270c"
|
|
||||||
alt="{teaserImage.alternative}" />
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
|
|
||||||
<span class="headline--3 mb-4">
|
|
||||||
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
|
|
||||||
</span>
|
|
||||||
{data.bodytext -> f:format.html()}
|
|
||||||
</div>
|
|
||||||
<button type="button"
|
|
||||||
class="button w-full">
|
|
||||||
{data.button -> v:or(alternative: 'Details')}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</f:link.typolink>
|
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
|
||||||
|
<span class="headline--3 mb-4">
|
||||||
|
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
|
||||||
|
</span>
|
||||||
|
{data.bodytext -> f:format.html()}
|
||||||
|
</div>
|
||||||
|
<button type="button"
|
||||||
|
class="button w-full">
|
||||||
|
{data.button -> v:or(alternative: 'Details')}
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,8 +4,7 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<f:link.typolink parameter="{data.header_link}"
|
<a href="{f:uri.typolink(parameter: data.header_link)}" class="teaserbox teaserbox--default group">
|
||||||
class="teaserbox teaserbox--default group">
|
|
||||||
<div class="teasebox__image">
|
<div class="teasebox__image">
|
||||||
<f:render partial="TeaserImage" arguments="{image: teaserImage}"/>
|
<f:render partial="TeaserImage" arguments="{image: teaserImage}"/>
|
||||||
</div>
|
</div>
|
||||||
@@ -20,7 +19,7 @@
|
|||||||
class="button button--full">
|
class="button button--full">
|
||||||
{data.button -> v:or(alternative: 'Details')}
|
{data.button -> v:or(alternative: 'Details')}
|
||||||
</button>
|
</button>
|
||||||
</f:link.typolink>
|
</a>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user