Use new teaser group wrapper layout
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
+31
-16
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user