Use new teaser group wrapper layout

This commit is contained in:
Björn Fromme
2022-03-14 17:09:37 +01:00
parent 845a68f96e
commit bf1ff1e304
2 changed files with 62 additions and 33 deletions
@@ -6,24 +6,38 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<f:render partial="Header/Standalone" arguments="{_all}"/> <ep:container data="{data}">
<div> <f:render partial="Header/Header" arguments="{_all}"/>
<ep:container data="{data}"> <div data-controller="teasergrid"
<div class="splide" data-teasergrid-grid-class="grid-cols-2"
data-controller="slider" data-teasergrid-disabled-value="false">
data-slider-preset-value="teasers"> <f:if condition="{teasers}">
<div class="splide__track"> <div class="flex items-center space-x-1 mb-2 sm:hidden">
<ul class="splide__list"> <button type="button"
<f:for each="{teasers}" as="city"> class="opacity-50"
<li class="splide__slide"> data-action="teasergrid#grid"
<f:render partial="City/Teaser" section="Teaser" arguments="{_all}"/> data-teasergrid-target="button">
</li> <svg class="w-5 h-5 text-ep-primary">
</f:for> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
</ul> </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>
</div> <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
</ep:container> data-teasergrid-target="container">
</div> <f:for each="{teasers}" as="city">
<f:render partial="City/Teaser" section="Teaser" arguments="{_all}"/>
</f:for>
</div>
</f:if>
</div>
</ep:container>
</f:section> </f:section>
</html> </html>
@@ -6,23 +6,38 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div> <ep:container data="{data}">
<ep:container data="{data}"> <f:render partial="Header/Header" arguments="{_all}"/>
<div class="splide" <div data-controller="teasergrid"
data-controller="slider" data-teasergrid-grid-class="grid-cols-2"
data-slider-preset-value="teasers"> data-teasergrid-disabled-value="false">
<div class="splide__track"> <f:if condition="{teasers}">
<ul class="splide__list"> <div class="flex items-center space-x-1 mb-2 sm:hidden">
<f:for each="{teasers}" as="concept"> <button type="button"
<li class="splide__slide"> class="opacity-50"
<f:render partial="Concept/Teaser" section="Teaser" arguments="{_all}"/> data-action="teasergrid#grid"
</li> data-teasergrid-target="button">
</f:for> <svg class="w-5 h-5 text-ep-primary">
</ul> <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>
</div> <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
</ep:container> data-teasergrid-target="container">
</div> <f:for each="{teasers}" as="city">
<f:render partial="Concept/Teaser" section="Teaser" arguments="{_all}"/>
</f:for>
</div>
</f:if>
</div>
</ep:container>
</f:section> </f:section>
</html> </html>