EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Migrate event hero element

Browse Source
This commit is contained in:
Björn Fromme
2021-12-22 17:43:20 +01:00
parent 2c4ed37e6c
commit eb2bdf17bb
1 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
+40 -21
View File
@@ -1,39 +1,53 @@
{namespace v=FluidTYPO3\Vhs\ViewHelpers} <html data-namespace-typo3-fluid="true" lang="en"
<div class="herounit herounit--event"> xmlns="http://www.w3.org/1999/xhtml"
<div id="ep-main-carousel" class="navbar-carousel carousel slide"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="item{f:if(condition: iteration.isFirst, then: ' active')}">
<div class="container stoerer"> <div class="relative max-w-screen-2xl mx-auto">
<div class="grid col-span-12 gap-4"> <div class="absolute bottom-0 left-0 inset-x-0 py-8 sbw:bg-sbw-overlay-secondary">
<div class="col-span-12 md:col-span-3 lg:col-span-2 lg:col-start-2"> <div class="max-w-screen-md mx-auto px-4 md:px-0 flex">
<div>{settings.eventDateDayFrom -> f:format.raw()}<br>-<br>{settings.eventDateDayTo -> f:format.raw()}</div> <div class="sbw:bg-sbw-primary hidden md:flex flex-col justify-center">
<div>{settings.eventDateMonth -> f:format.raw()}</div> <div class="text-white font-extrabold text-5xl flex-1 flex flex-col justify-around items-center text-center leading-none py-2 px-16">
<span>{settings.eventDateDayFrom -> f:format.raw()}</span>
<span>-</span>
<span>{settings.eventDateDayTo -> f:format.raw()}</span>
</div> </div>
<div class="col-span-6 md:col-span-4 lg:col-span-3">{settings.eventHeroClaim -> f:format.raw()}</div> <div class="w-full px-4 bg-white text-center sbw:text-sbw-primary p-2 whitespace-nowrap text-2xl uppercase font-bold leading-tight">
<div class="col-span-6 md:col-span-3 lg:col-span-2">{settings.eventHeroDescription -> f:format.raw()}</div> {settings.eventDateMonth -> f:format.raw()}
</div> </div>
</div> </div>
{slides -> v:iterator.first() -> v:variable.set(name: 'slide')} <div class="text-white uppercase text-7xl text-right md:text-left font-extrabold pr-8 md:px-8">
<f:if condition="{slide.image.0}"> {settings.eventHeroClaim -> f:format.raw()}
</div>
<div class="text-white text-2xl font-light border-l-8 border-white pl-2">
{settings.eventHeroDescription -> f:format.raw()}
</div>
</div>
</div>
<f:alias map="{image: slide.image.0}">
<f:if condition="{image}">
<f:then> <f:then>
<img src="{f:uri.image(image: slide.image.0, width: '1370')}" <picture>
alt="{slide.image.0.alternative}" title="{slide.image.0.title}"> <source srcset="{f:uri.image(image: image, width: '1370')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, height: '320')}" media="(max-width: 767px)">
<img class="block w-full h-full object-cover"
src="{f:uri.image(image: image, height: '320')}"
alt="{image.alternative}">
</picture>
</f:then> </f:then>
<f:else> <f:else>
<img src="https://placehold.it/1370x700" alt=""> <img src="https://placehold.it/1370x700" alt="">
</f:else> </f:else>
</f:if> </f:if>
</div> </f:alias>
</div> <f:comment><!--
<f:if condition="{badge}"> <f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}"> <f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}"> <f:link.typolink parameter="{badgeData.link}">
<div class="herounit__badge herounit__badge--custom custom-badge"> <div class="herounit__badge herounit__badge--custom custom-badge">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background"> preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background">
<g>
<circle id="bgouter" cx="100" cy="100" r="100"/> <circle id="bgouter" cx="100" cy="100" r="100"/>
<circle id="bginner" cx="100" cy="100" r="70"/> <circle id="bginner" cx="100" cy="100" r="70"/>
</g>
</svg> </svg>
<div class="custom-badge__content"> <div class="custom-badge__content">
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span> <span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
@@ -43,6 +57,8 @@
</f:link.typolink> </f:link.typolink>
</f:alias> </f:alias>
</f:if> </f:if>
--></f:comment>
<f:comment><!--
<f:if condition="{settings.eventAddon}"> <f:if condition="{settings.eventAddon}">
<f:link.typolink parameter="{settings.eventAddon.link}" class="{settings.eventAddon.class}" <f:link.typolink parameter="{settings.eventAddon.link}" class="{settings.eventAddon.class}"
title="{settings.eventAddon.title}"> title="{settings.eventAddon.title}">
@@ -50,4 +66,7 @@
alt="{settings.eventAddon.title}" title="{settings.eventAddon.title}"> alt="{settings.eventAddon.title}" title="{settings.eventAddon.title}">
</f:link.typolink> </f:link.typolink>
</f:if> </f:if>
</div> --></f:comment>
</div>
</html>