Ensure elements in grids have same height

This commit is contained in:
Björn Fromme
2022-03-08 16:08:47 +01:00
parent 51496de05b
commit bfe4f1c682
6 changed files with 118 additions and 134 deletions
@@ -4,9 +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="{city.detailPage}" <a href="{f:uri.typolink(parameter: city.detailPage)}" class="flex flex-col" title="{city.name}">
title="{city.name}">
<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,8 +26,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> </a>
</f:link.typolink>
</f:section> </f:section>
</html> </html>
@@ -4,9 +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="{concept.detailPage}" <a href="{f:uri.typolink(parameter: concept.detailPage)}" title="{concept.name}" class="flex flex-col">
title="{concept.name}">
<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,8 +22,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> </a>
</f:link.typolink>
</f:section> </f:section>
</html> </html>
@@ -4,9 +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="{hotel.detailPage}" <a href="{f:uri.typolink(parameter: hotel.detailPage)}" title="{hotel.name}" class="flex flex-col">
title="{hotel.name}">
<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,8 +36,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> </a>
</f:link.typolink>
</f:section> </f:section>
</html> </html>
@@ -4,9 +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="{region.detailPage}" <a href="{f:uri.typolink(parameter: region.detailPage)}" title="{region.name}" class="flex flex-col">
title="{region.name}">
<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,8 +26,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> </a>
</f:link.typolink>
</f:section> </f:section>
</html> </html>
@@ -4,9 +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="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">
@@ -30,8 +28,7 @@
class="button w-full"> class="button w-full">
{data.button -> v:or(alternative: 'Details')} {data.button -> v:or(alternative: 'Details')}
</button> </button>
</div> </a>
</f:link.typolink>
</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>