feat: various a11y improvements
This commit is contained in:
Björn Fromme
@@ -66,9 +66,9 @@
|
|||||||
<circle fill="currentColor" class="text-ep-primary-dark" cx="100" cy="100" r="70"/>
|
<circle fill="currentColor" class="text-ep-primary-dark" cx="100" cy="100" r="70"/>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
|
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
|
||||||
<span class="block text-center text-white uppercase font-bold leading-none text-xl">{badgeData.title -> f:format.raw()}</span>
|
<span class="block text-center text-white bg-ep-primary-dark uppercase font-bold leading-none text-xl">{badgeData.title -> f:format.raw()}</span>
|
||||||
<f:if condition="{badgeData.subtitle}">
|
<f:if condition="{badgeData.subtitle}">
|
||||||
<span class="block text-center text-white uppercase font-bold leading-none">{badgeData.subtitle -> f:format.raw()}</span>
|
<span class="block text-center text-white bg-ep-primary-dark uppercase font-bold leading-none">{badgeData.subtitle -> f:format.raw()}</span>
|
||||||
</f:if>
|
</f:if>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,40 +6,32 @@
|
|||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<f:variable name="targetUrl" value="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo, ref: referringPageUri)}"/>
|
<f:variable name="targetUrl" value="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo, ref: referringPageUri)}"/>
|
||||||
<div class="product-teaser flex flex-col h-full bg-white group{f:if(condition: landscape, then: ' sm:flex-row sm:h-auto')}">
|
<div class="product-teaser relative flex flex-col h-full bg-white{f:if(condition: landscape, then: ' sm:flex-row sm:h-auto')}">
|
||||||
<f:render section="TeaserImage" arguments="{_all}"/>
|
<f:render section="TeaserImage" arguments="{_all}"/>
|
||||||
<f:render section="TeaserContent" arguments="{_all}"/>
|
<f:render section="TeaserContent" arguments="{_all}"/>
|
||||||
</div>
|
</div>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
<f:section name="TeaserImage">
|
<f:section name="TeaserImage">
|
||||||
<div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}">
|
<div class="{f:if(condition: landscape, then: ' sm:w-2/5')}">
|
||||||
<a href="{targetUrl}"
|
<f:if condition="{productImage}">
|
||||||
<f:if condition="{concept.popupText} && {settings.globalConceptCode} != {concept.code}">
|
<f:then>
|
||||||
hx-get="{ep:uri.ajax(action: 'concept', controller: 'AjaxTeaserPopup', arguments: '{concept: concept.uid, targetUrl: targetUrl}', format: 'html', pageUid: settings.defaultAjaxUid)}"
|
<ep:lazyLoadImage image="{productImage}"
|
||||||
hx-target="body"
|
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||||
hx-swap="beforeend"
|
class="block w-full h-full object-cover"
|
||||||
</f:if>
|
width="400c"
|
||||||
>
|
height="300c"
|
||||||
<f:if condition="{productImage}">
|
alt="{product.name}" />
|
||||||
<f:then>
|
</f:then>
|
||||||
<ep:lazyLoadImage image="{productImage}"
|
<f:else>
|
||||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||||
class="block w-full h-full object-cover"
|
class="block w-full h-full object-cover"
|
||||||
width="400c"
|
width="400c"
|
||||||
height="300c"
|
height="300c"
|
||||||
alt="{product.name}" />
|
alt="{product.name}" />
|
||||||
</f:then>
|
</f:else>
|
||||||
<f:else>
|
</f:if>
|
||||||
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
|
<div class="absolute top-0 left-0 z-20 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}/70', else: 'bg-ep-primary/80')}">
|
||||||
class="block w-full h-full object-cover"
|
|
||||||
width="400c"
|
|
||||||
height="300c"
|
|
||||||
alt="{product.name}" />
|
|
||||||
</f:else>
|
|
||||||
</f:if>
|
|
||||||
</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}/70', else: 'bg-ep-primary/80')}">
|
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-2">
|
||||||
<f:if condition="{country.code}">
|
<f:if condition="{country.code}">
|
||||||
{ep:icon(class: 'product-teaser__flag', icon: 'flag-{country.code -> f:format.case(mode: \'lower\')}')}
|
{ep:icon(class: 'product-teaser__flag', icon: 'flag-{country.code -> f:format.case(mode: \'lower\')}')}
|
||||||
@@ -76,37 +68,38 @@
|
|||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
<f:section name="TeaserContent">
|
<f:section name="TeaserContent">
|
||||||
{f:variable(name: 'including', value: '{f:render(section: \'Including\', arguments: \'{_all}\') -> v:format.trim()}')}
|
{f:variable(name: 'including', value: '{f:render(section: \'Including\', arguments: \'{_all}\') -> v:format.trim()}')}
|
||||||
<a href="{targetUrl}"
|
<div class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
|
||||||
<f:if condition="{concept.popupText} && {settings.globalConceptCode} != {concept.code}">
|
<a href="{targetUrl}" class="peer"
|
||||||
hx-get="{ep:uri.ajax(action: 'concept', controller: 'AjaxTeaserPopup', arguments: '{concept: concept.uid, targetUrl: targetUrl}', format: 'html', pageUid: settings.defaultAjaxUid)}"
|
<f:if condition="{concept.popupText} && {settings.globalConceptCode} != {concept.code}">
|
||||||
hx-target="body"
|
hx-get="{ep:uri.ajax(action: 'concept', controller: 'AjaxTeaserPopup', arguments: '{concept: concept.uid, targetUrl: targetUrl}', format: 'html', pageUid: settings.defaultAjaxUid)}"
|
||||||
hx-swap="beforeend"
|
hx-target="body"
|
||||||
</f:if>
|
hx-swap="beforeend"
|
||||||
class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
|
</f:if>
|
||||||
<div class="product-teaser__label-name">
|
>
|
||||||
{product.name}
|
<div class="product-teaser__label-name">
|
||||||
</div>
|
{product.name}
|
||||||
<div class="product-teaser__label-region">
|
</div>
|
||||||
{region.name}
|
<div class="product-teaser__label-region">
|
||||||
</div>
|
{region.name}
|
||||||
|
</div>
|
||||||
|
<span class="absolute top-0 left-0 inset-0 z-10"></span>
|
||||||
|
</a>
|
||||||
<div class="product-teaser__label-included">
|
<div class="product-teaser__label-included">
|
||||||
{ep:nightsOptions(options: nights, daytrip: daytrip)}{f:if(condition: including, then: ' inkl.')}
|
{ep:nightsOptions(options: nights, daytrip: daytrip)}{f:if(condition: including, then: ' inkl.')}
|
||||||
</div>
|
</div>
|
||||||
<ul class="product-teaser__list-included flex-1 list-none m-0 text-zinc-800 divide-y divide-zinc-400">
|
<ul class="product-teaser__list-included flex-1 list-none m-0 text-zinc-800 divide-y divide-zinc-400">
|
||||||
{including -> f:format.raw()}
|
{including -> f:format.raw()}
|
||||||
</ul>
|
</ul>
|
||||||
<div class="pt-8">
|
<div class="mt-8 bg-ep-primary-dark text-white font-bold px-4 py-1 peer-hover:bg-ep-secondary peer-hover:text-gray-900 transition-colors">
|
||||||
<div class="bg-button text-white font-bold px-4 py-1 group-hover:bg-button transition-colors">
|
<div class="lg:inline-block">
|
||||||
<div class="lg:inline-block">
|
ab <span class="product-teaser__price mx-1">{minPrice} €</span>
|
||||||
ab <span class="product-teaser__price mx-1">{minPrice} €</span>
|
</div>
|
||||||
</div>
|
<div class="product-teaser__label-price">
|
||||||
<div class="product-teaser__label-price">
|
p. P.{f:if(condition: '{season} == "w"', then: ' / inkl. Skipass')}
|
||||||
p. P.{f:if(condition: '{season} == "w"', then: ' / inkl. Skipass')}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
<f:section name="Including">
|
<f:section name="Including">
|
||||||
|
|||||||
Reference in New Issue
Block a user