Streamline teasergroup rendering

This commit is contained in:
Björn Fromme
2022-03-14 17:40:16 +01:00
parent 1cd4d6c333
commit f958f50b24
6 changed files with 59 additions and 49 deletions
@@ -10,7 +10,7 @@ h2,
h3,
.headline--3 {
@apply block text-xl md:text-2xl text-gray-800 font-bold;
@apply block text-xl md:text-2xl text-gray-800 font-bold leading-6;
}
h4,
@@ -7,11 +7,12 @@
<f:section name="Main">
<ep:container data="{data}">
<f:render partial="Header/Header" arguments="{_all}"/>
<div data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<f:if condition="{teasers}">
<f:if condition="{teasers}">
<div class="container"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<f:render partial="Header/Header" arguments="{_all}"/>
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
@@ -35,8 +36,8 @@
<f:render partial="City/Teaser" section="Teaser" arguments="{_all}"/>
</f:for>
</div>
</f:if>
</div>
</div>
</f:if>
</ep:container>
</f:section>
@@ -6,12 +6,12 @@
<f:layout name="Default"/>
<f:section name="Main">
<ep:container data="{data}">
<f:render partial="Header/Header" arguments="{_all}"/>
<div data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<f:if condition="{teasers}">
<f:if condition="{teasers}">
<ep:container data="{data}">
<f:render partial="Header/Header" arguments="{_all}"/>
<div data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
@@ -35,9 +35,9 @@
<f:render partial="Concept/Teaser" section="Teaser" arguments="{_all}"/>
</f:for>
</div>
</f:if>
</div>
</ep:container>
</div>
</ep:container>
</f:if>
</f:section>
</html>
@@ -5,16 +5,12 @@
<f:layout name="Default"/>
<f:section name="Main">
<f:if condition="{data.header}">
<ep:container data="{data}" cssClasses="mb-8">
<f:if condition="{bookable} || {nonBookable}">
<ep:container data="{data}">
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
</ep:container>
</f:if>
<ep:container data="{data}">
<div data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<f:if condition="{bookable} || {nonBookable}">
<div data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
@@ -47,9 +43,9 @@
}"/>
</f:for>
</div>
</f:if>
</div>
</ep:container>
</div>
</ep:container>
</f:if>
</f:section>
</html>
@@ -6,15 +6,12 @@
<f:section name="Main">
<div class="py-8 bg-ep-primary-bg">
<f:if condition="{data.header}">
<div class="container mb-8">
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
</div>
</f:if>
<div class="container"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<f:render partial="Header/Header"
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
<f:if condition="{teasers}">
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
@@ -6,23 +6,39 @@
<f:layout name="Default"/>
<f:section name="Main">
<div>
<ep:container data="{data}">
<div class="splide"
data-controller="slider"
data-slider-preset-value="teasers">
<div class="splide__track">
<ul class="splide__list">
<f:for each="{teasers}" as="region">
<li class="splide__slide">
<f:render partial="Region/Teaser" section="Teaser" arguments="{_all}"/>
</li>
</f:for>
</ul>
<ep:container data="{data}">
<f:if condition="{teasers}">
<div class="container"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
<f:render partial="Header/Header" arguments="{_all}"/>
<div class="flex items-center space-x-1 mb-2 sm:hidden">
<button type="button"
class="opacity-50"
data-action="teasergrid#grid"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
</svg>
</button>
<button type="button"
data-action="teasergrid#block"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
</svg>
</button>
</div>
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
data-teasergrid-target="container">
<f:for each="{teasers}" as="region">
<f:render partial="Region/Teaser" section="Teaser" arguments="{_all}"/>
</f:for>
</div>
</div>
</ep:container>
</div>
</f:if>
</ep:container>
</f:section>
</html>