Add shadow to product teaser

This commit is contained in:
Björn Fromme
2021-09-16 16:30:08 +02:00
parent 0922c25b13
commit ea8336c4f2
@@ -3,7 +3,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<div class="product-teaser flex flex-col h-full bg-white group{f:if(condition: landscape, then: ' sm:flex-row sm:h-auto')}{f:if(condition: '{index} > 2', then: ' lg:hidden')}">
<div class="product-teaser flex flex-col h-full bg-white shadow group{f:if(condition: landscape, then: ' sm:flex-row sm:h-auto')}{f:if(condition: '{index} > 2', then: ' lg:hidden')}">
<f:render section="TeaserImage" arguments="{_all}"/>
<f:render section="TeaserContent" arguments="{_all}"/>
</div>
@@ -11,11 +11,14 @@
<f:section name="TeaserImage">
<div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}">
<img class="block w-full h-full object-cover lazyload"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')}"
data-src="{f:uri.image(image: productImage, width: '640c', height: '480c')}"
alt="{product.name}"
width="640" height="480" />
<a href="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo)}"
title="{region.name} {product.name} Details und Buchen">
<img class="block w-full h-full object-cover lazyload"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')}"
data-src="{f:uri.image(image: productImage, width: '640c', height: '480c')}"
alt="{product.name}"
width="640" height="480" />
</a>
<div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}', else: 'bg-ep-primary-80')}">
<div class="flex items-center space-x-2">
<f:if condition="{country.code}">