Increase number of teasers shown on large screens
This commit is contained in:
Björn Fromme
@@ -48,7 +48,7 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
|
<div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
|
||||||
data-teasergrid-target="container">
|
data-teasergrid-target="container">
|
||||||
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
||||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{namespace ep=EP\EpTheme\ViewHelpers}
|
{namespace ep=EP\EpTheme\ViewHelpers}
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
<div class="odd:bg-gray-50 p-4">
|
||||||
<f:if condition="{bars}">
|
<f:if condition="{bars}">
|
||||||
<f:then>
|
<f:then>
|
||||||
<div class="headline--3 headline--underlined">
|
<div class="headline--3 headline--underlined">
|
||||||
@@ -53,7 +53,9 @@
|
|||||||
</f:if>
|
</f:if>
|
||||||
</div>
|
</div>
|
||||||
</f:if>
|
</f:if>
|
||||||
{region.skiArea -> f:format.html()}
|
<div data-rte-content>
|
||||||
|
{region.skiArea -> f:format.html()}
|
||||||
|
</div>
|
||||||
<f:if condition="{teasers}">
|
<f:if condition="{teasers}">
|
||||||
<f:then>
|
<f:then>
|
||||||
<a id="teasers" class="anchor"></a>
|
<a id="teasers" class="anchor"></a>
|
||||||
@@ -79,26 +81,26 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
|
<div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
|
||||||
data-teasergrid-target="container">
|
data-teasergrid-target="container">
|
||||||
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
||||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||||
concept: teaser.concept,
|
concept: teaser.concept,
|
||||||
hotel: teaser.hotel,
|
hotel: teaser.hotel,
|
||||||
product: teaser.product,
|
product: teaser.product,
|
||||||
country: teaser.country,
|
country: teaser.country,
|
||||||
region: teaser.region,
|
region: teaser.region,
|
||||||
productImage: teaser.product.images.original.0,
|
productImage: teaser.product.images.original.0,
|
||||||
nights: teaser.nights,
|
nights: teaser.nights,
|
||||||
board: teaser.board,
|
board: teaser.board,
|
||||||
minPrice: teaser.minPrice,
|
minPrice: teaser.minPrice,
|
||||||
daytrip: teaser.daytrip,
|
daytrip: teaser.daytrip,
|
||||||
season: teaser.season,
|
season: teaser.season,
|
||||||
forceHotelUid: teaser.forceHotelUid,
|
forceHotelUid: teaser.forceHotelUid,
|
||||||
dateFrom: dateFrom,
|
dateFrom: dateFrom,
|
||||||
dateTo: dateTo,
|
dateTo: dateTo,
|
||||||
index: iteration.index
|
index: iteration.index
|
||||||
}"/>
|
}"/>
|
||||||
</f:for>
|
</f:for>
|
||||||
</div>
|
</div>
|
||||||
<f:if condition="{settings.showMoreLink}">
|
<f:if condition="{settings.showMoreLink}">
|
||||||
|
|||||||
@@ -27,36 +27,59 @@
|
|||||||
{concept.description -> f:format.html()}
|
{concept.description -> f:format.html()}
|
||||||
<f:if condition="{teasers}">
|
<f:if condition="{teasers}">
|
||||||
<a class="anchor" id="teasers"></a>
|
<a class="anchor" id="teasers"></a>
|
||||||
<div class="flex flex-col space-y-4 md:space-y-8">
|
<div class="bg-gray-50 p-4"
|
||||||
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
data-controller="teasergrid"
|
||||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
data-teasergrid-grid-class="grid-cols-2"
|
||||||
concept: teaser.concept,
|
data-teasergrid-disabled-value="false">
|
||||||
hotel: teaser.hotel,
|
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||||
product: teaser.product,
|
<button type="button"
|
||||||
country: teaser.country,
|
class="opacity-50"
|
||||||
region: teaser.region,
|
data-action="teasergrid#grid"
|
||||||
productImage: teaser.product.images.original.0,
|
data-teasergrid-target="button">
|
||||||
nights: teaser.nights,
|
<svg class="w-5 h-5 text-ep-primary">
|
||||||
board: teaser.board,
|
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
|
||||||
minPrice: teaser.minPrice,
|
</svg>
|
||||||
daytrip: teaser.daytrip,
|
</button>
|
||||||
season: teaser.season,
|
<button type="button"
|
||||||
forceHotelUid: teaser.forceHotelUid,
|
data-action="teasergrid#block"
|
||||||
dateFrom: dateFrom,
|
data-teasergrid-target="button">
|
||||||
dateTo: dateTo,
|
<svg class="w-5 h-5 text-ep-primary">
|
||||||
landscape: 1,
|
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
|
||||||
index: iteration.index
|
</svg>
|
||||||
}"/>
|
</button>
|
||||||
</f:for>
|
</div>
|
||||||
|
<div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
|
||||||
|
data-teasergrid-target="container">
|
||||||
|
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
||||||
|
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||||
|
concept: teaser.concept,
|
||||||
|
hotel: teaser.hotel,
|
||||||
|
product: teaser.product,
|
||||||
|
country: teaser.country,
|
||||||
|
region: teaser.region,
|
||||||
|
productImage: teaser.product.images.original.0,
|
||||||
|
nights: teaser.nights,
|
||||||
|
board: teaser.board,
|
||||||
|
minPrice: teaser.minPrice,
|
||||||
|
daytrip: teaser.daytrip,
|
||||||
|
season: teaser.season,
|
||||||
|
forceHotelUid: teaser.forceHotelUid,
|
||||||
|
dateFrom: dateFrom,
|
||||||
|
dateTo: dateTo,
|
||||||
|
index: iteration.index
|
||||||
|
}"/>
|
||||||
|
</f:for>
|
||||||
|
</div>
|
||||||
|
<f:if condition="{settings.showMoreLink}">
|
||||||
|
<div class="text-right mt-4">
|
||||||
|
<f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button"
|
||||||
|
action="staticresult" controller="Search"
|
||||||
|
arguments="{encodedFilterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}">
|
||||||
|
Alle anzeigen
|
||||||
|
</f:link.action>
|
||||||
|
</div>
|
||||||
|
</f:if>
|
||||||
</div>
|
</div>
|
||||||
<f:if condition="{settings.showMoreLink}">
|
|
||||||
<f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button my-8"
|
|
||||||
action="staticresult" controller="Search"
|
|
||||||
arguments="{encodedFilterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}"
|
|
||||||
additionalAttributes="{rel: 'nofollow'}">
|
|
||||||
Alle anzeigen
|
|
||||||
</f:link.action>
|
|
||||||
</f:if>
|
|
||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{concept.descriptionExtended}">{concept.descriptionExtended -> f:format.html()}</f:if>
|
<f:if condition="{concept.descriptionExtended}">{concept.descriptionExtended -> f:format.html()}</f:if>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -28,29 +28,59 @@
|
|||||||
{country.description -> f:format.html()}
|
{country.description -> f:format.html()}
|
||||||
</div>
|
</div>
|
||||||
<f:if condition="{teasers}">
|
<f:if condition="{teasers}">
|
||||||
<div class="splide mb-4"
|
<div class="bg-gray-50 p-4"
|
||||||
data-controller="slider"
|
data-controller="teasergrid"
|
||||||
data-slider-preset-value="teasersEmbedded">
|
data-teasergrid-grid-class="grid-cols-2"
|
||||||
<div class="splide__track">
|
data-teasergrid-disabled-value="false">
|
||||||
<ul class="splide__list">
|
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||||
<f:for each="{teasers}" as="teaser">
|
<button type="button"
|
||||||
<li class="splide__slide">
|
class="opacity-50"
|
||||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser}"/>
|
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 class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
|
||||||
|
data-teasergrid-target="container">
|
||||||
|
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
||||||
|
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||||
|
concept: teaser.concept,
|
||||||
|
hotel: teaser.hotel,
|
||||||
|
product: teaser.product,
|
||||||
|
country: teaser.country,
|
||||||
|
region: teaser.region,
|
||||||
|
productImage: teaser.product.images.original.0,
|
||||||
|
nights: teaser.nights,
|
||||||
|
board: teaser.board,
|
||||||
|
minPrice: teaser.minPrice,
|
||||||
|
daytrip: teaser.daytrip,
|
||||||
|
season: teaser.season,
|
||||||
|
forceHotelUid: teaser.forceHotelUid,
|
||||||
|
dateFrom: dateFrom,
|
||||||
|
dateTo: dateTo,
|
||||||
|
index: iteration.index
|
||||||
|
}"/>
|
||||||
|
</f:for>
|
||||||
|
</div>
|
||||||
|
<f:if condition="{settings.showMoreLink}">
|
||||||
|
<div class="text-right mt-4">
|
||||||
|
<f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button"
|
||||||
|
action="staticresult" controller="Search"
|
||||||
|
arguments="{encodedFilterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}">
|
||||||
|
Alle anzeigen
|
||||||
|
</f:link.action>
|
||||||
|
</div>
|
||||||
|
</f:if>
|
||||||
</div>
|
</div>
|
||||||
<f:if condition="{settings.showMoreLink}">
|
|
||||||
<p class="text-right">
|
|
||||||
<f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button"
|
|
||||||
action="staticresult" controller="Search"
|
|
||||||
arguments="{encodedFilterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}"
|
|
||||||
additionalAttributes="{rel: 'nofollow'}">
|
|
||||||
Alle anzeigen
|
|
||||||
</f:link.action>
|
|
||||||
</p>
|
|
||||||
</f:if>
|
|
||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{country.descriptionExtended}">
|
<f:if condition="{country.descriptionExtended}">
|
||||||
<div data-rte-content>
|
<div data-rte-content>
|
||||||
|
|||||||
Reference in New Issue
Block a user