feat: render product teasers in landscape mode when less than 3
addresses #86965w98p
This commit is contained in:
Björn Fromme
@@ -23,56 +23,86 @@
|
||||
<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"
|
||||
aria-label="kompakte Ansicht"
|
||||
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"
|
||||
aria-label="vergrößerte Ansicht"
|
||||
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 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: teaser.minDateStart,
|
||||
dateTo: teaser.maxDateEnd,
|
||||
index: iteration.index
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
<f:if condition="{teasers -> f:count()} <= 2">
|
||||
<f:then>
|
||||
<div class="grid gap-4 md:gap-8">
|
||||
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||
landscape: 1,
|
||||
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: teaser.minDateStart,
|
||||
dateTo: teaser.maxDateEnd,
|
||||
index: iteration.index
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||
<button type="button"
|
||||
class="opacity-50"
|
||||
aria-label="kompakte Ansicht"
|
||||
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"
|
||||
aria-label="vergrößerte Ansicht"
|
||||
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 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: teaser.minDateStart,
|
||||
dateTo: teaser.maxDateEnd,
|
||||
index: iteration.index
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
<f:if condition="{settings.hideMoreLink}">
|
||||
<f:else>
|
||||
<f:link.typolink class="button bg-button ml-4"
|
||||
parameter="{settings.defaultSearchPageUid}"
|
||||
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"
|
||||
additionalAttributes="{rel: 'nofollow'}">
|
||||
Alle anzeigen
|
||||
</f:link.typolink>
|
||||
<div class="text-right mt-4">
|
||||
<f:link.typolink class="button bg-button"
|
||||
parameter="{settings.defaultSearchPageUid}"
|
||||
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"
|
||||
additionalAttributes="{rel: 'nofollow'}">
|
||||
Alle anzeigen
|
||||
</f:link.typolink>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
|
||||
@@ -36,55 +36,81 @@
|
||||
data-controller="teasergrid"
|
||||
data-teasergrid-grid-class="grid-cols-2"
|
||||
data-teasergrid-disabled-value="false">
|
||||
<f:if condition="{teasers}">
|
||||
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||
<button type="button"
|
||||
class="opacity-50"
|
||||
aria-label="kompakte Ansicht"
|
||||
data-action="teasergrid#grid"
|
||||
data-teasergrid-target="button">
|
||||
{ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
|
||||
</button>
|
||||
<button type="button"
|
||||
aria-label="vergrößerte Ansicht"
|
||||
data-action="teasergrid#block"
|
||||
data-teasergrid-target="button">
|
||||
{ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
|
||||
</button>
|
||||
</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: teaser.minDateStart,
|
||||
dateTo: teaser.maxDateEnd,
|
||||
index: iteration.index
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
<f:if condition="{settings.hideMoreLink}">
|
||||
<f:else>
|
||||
<div class="text-right mt-4">
|
||||
<f:link.typolink class="button bg-button"
|
||||
parameter="{settings.defaultSearchPageUid}"
|
||||
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
|
||||
Alle anzeigen
|
||||
</f:link.typolink>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{teasers -> f:count() <= 2}">
|
||||
<f:then>
|
||||
<div class="grid gap-4 md:gap-8">
|
||||
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||
landscape: 1,
|
||||
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: teaser.minDateStart,
|
||||
dateTo: teaser.maxDateEnd,
|
||||
index: iteration.index
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||
<button type="button"
|
||||
class="opacity-50"
|
||||
aria-label="kompakte Ansicht"
|
||||
data-action="teasergrid#grid"
|
||||
data-teasergrid-target="button">
|
||||
{ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
|
||||
</button>
|
||||
<button type="button"
|
||||
aria-label="vergrößerte Ansicht"
|
||||
data-action="teasergrid#block"
|
||||
data-teasergrid-target="button">
|
||||
{ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
|
||||
</button>
|
||||
</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: teaser.minDateStart,
|
||||
dateTo: teaser.maxDateEnd,
|
||||
index: iteration.index
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{settings.hideMoreLink}">
|
||||
<f:else>
|
||||
<div class="text-right mt-4">
|
||||
<f:link.typolink class="button bg-button"
|
||||
parameter="{settings.defaultSearchPageUid}"
|
||||
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
|
||||
Alle anzeigen
|
||||
</f:link.typolink>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:then>
|
||||
|
||||
@@ -53,60 +53,87 @@
|
||||
<f:if condition="{teasers}">
|
||||
<f:then>
|
||||
<a id="teasers" class="anchor"></a>
|
||||
<div class="bg-zinc-50 p-4 mb-4"
|
||||
<div class="even:bg-zinc-50 even:p-4 mb-4"
|
||||
data-controller="teasergrid"
|
||||
data-teasergrid-grid-class="grid-cols-2"
|
||||
data-teasergrid-disabled-value="false">
|
||||
<f:if condition="{teasers}">
|
||||
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||
<button type="button"
|
||||
class="opacity-50"
|
||||
aria-label="kompakte Ansicht"
|
||||
data-action="teasergrid#grid"
|
||||
data-teasergrid-target="button">
|
||||
{ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
|
||||
</button>
|
||||
<button type="button"
|
||||
aria-label="vergrößerte Ansicht"
|
||||
data-action="teasergrid#block"
|
||||
data-teasergrid-target="button">
|
||||
{ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
|
||||
</button>
|
||||
</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: teaser.minDateStart,
|
||||
dateTo: teaser.maxDateEnd,
|
||||
index: iteration.index,
|
||||
skiPassIncluded: teaser.skiPassIncluded
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
<f:if condition="{settings.hideMoreLink}">
|
||||
<f:else>
|
||||
<div class="text-right mt-4">
|
||||
<f:link.typolink class="button bg-button"
|
||||
parameter="{settings.defaultSearchPageUid}"
|
||||
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
|
||||
Alle anzeigen
|
||||
</f:link.typolink>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{teasers -> f:count()} <= 2">
|
||||
<f:then>
|
||||
<div class="grid gap-4 md:gap-8">
|
||||
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||
landscape: 1,
|
||||
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: teaser.minDateStart,
|
||||
dateTo: teaser.maxDateEnd,
|
||||
index: iteration.index,
|
||||
skiPassIncluded: teaser.skiPassIncluded
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||
<button type="button"
|
||||
class="opacity-50"
|
||||
aria-label="kompakte Ansicht"
|
||||
data-action="teasergrid#grid"
|
||||
data-teasergrid-target="button">
|
||||
{ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
|
||||
</button>
|
||||
<button type="button"
|
||||
aria-label="vergrößerte Ansicht"
|
||||
data-action="teasergrid#block"
|
||||
data-teasergrid-target="button">
|
||||
{ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
|
||||
</button>
|
||||
</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: teaser.minDateStart,
|
||||
dateTo: teaser.maxDateEnd,
|
||||
index: iteration.index,
|
||||
skiPassIncluded: teaser.skiPassIncluded
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{settings.hideMoreLink}">
|
||||
<f:else>
|
||||
<div class="text-right mt-4">
|
||||
<f:link.typolink class="button bg-button"
|
||||
parameter="{settings.defaultSearchPageUid}"
|
||||
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
|
||||
Alle anzeigen
|
||||
</f:link.typolink>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:then>
|
||||
|
||||
@@ -34,49 +34,79 @@
|
||||
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"
|
||||
aria-label="kompakte Ansicht"
|
||||
data-action="teasergrid#grid"
|
||||
data-teasergrid-target="button">
|
||||
<svg class="w-12 h-12 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"
|
||||
aria-label="vergrößerte Ansicht"
|
||||
data-action="teasergrid#block"
|
||||
data-teasergrid-target="button">
|
||||
<svg class="w-12 h-12 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 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,
|
||||
globalConceptCode: settings.globalConceptCode,
|
||||
skiPassIncluded: teaser.skiPassIncluded
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
<f:if condition="{teasers -> f:count()} <= 2">
|
||||
<f:then>
|
||||
<div class="grid gap-4 md:gap-8">
|
||||
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||
landscape: 1,
|
||||
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,
|
||||
globalConceptCode: settings.globalConceptCode,
|
||||
skiPassIncluded: teaser.skiPassIncluded
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||
<button type="button"
|
||||
class="opacity-50"
|
||||
aria-label="kompakte Ansicht"
|
||||
data-action="teasergrid#grid"
|
||||
data-teasergrid-target="button">
|
||||
<svg class="w-12 h-12 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"
|
||||
aria-label="vergrößerte Ansicht"
|
||||
data-action="teasergrid#block"
|
||||
data-teasergrid-target="button">
|
||||
<svg class="w-12 h-12 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 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,
|
||||
globalConceptCode: settings.globalConceptCode,
|
||||
skiPassIncluded: teaser.skiPassIncluded
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{settings.hideMoreLink}">
|
||||
<f:else>
|
||||
<div class="text-right mt-4">
|
||||
|
||||
+75
-44
@@ -14,50 +14,81 @@
|
||||
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
|
||||
<f:if condition="{teasers}">
|
||||
<f:then>
|
||||
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||
<button type="button"
|
||||
class="opacity-50"
|
||||
aria-label="kompakte Ansicht"
|
||||
data-action="teasergrid#grid"
|
||||
data-teasergrid-target="button">
|
||||
<svg class="w-12 h-12 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"
|
||||
aria-label="vergrößerte Ansicht"
|
||||
data-action="teasergrid#block"
|
||||
data-teasergrid-target="button">
|
||||
<svg class="w-12 h-12 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="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,
|
||||
new: teaser.new,
|
||||
index: iteration.index,
|
||||
globalConceptCode: settings.globalConceptCode,
|
||||
skiPassIncluded: teaser.skiPassIncluded
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
<f:if condition="{teasers -> f:count()} <= 2">
|
||||
<f:then>
|
||||
<f:for each="{teasers}" as="teaser" iteration="iteration">
|
||||
<div class="grid gap-y-4 md:gap-y-8">
|
||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{
|
||||
landscape: 1,
|
||||
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,
|
||||
new: teaser.new,
|
||||
index: iteration.index,
|
||||
globalConceptCode: settings.globalConceptCode,
|
||||
skiPassIncluded: teaser.skiPassIncluded
|
||||
}"/>
|
||||
</div>
|
||||
</f:for>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||
<button type="button"
|
||||
class="opacity-50"
|
||||
aria-label="kompakte Ansicht"
|
||||
data-action="teasergrid#grid"
|
||||
data-teasergrid-target="button">
|
||||
<svg class="w-12 h-12 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"
|
||||
aria-label="vergrößerte Ansicht"
|
||||
data-action="teasergrid#block"
|
||||
data-teasergrid-target="button">
|
||||
<svg class="w-12 h-12 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="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,
|
||||
new: teaser.new,
|
||||
index: iteration.index,
|
||||
globalConceptCode: settings.globalConceptCode,
|
||||
skiPassIncluded: teaser.skiPassIncluded
|
||||
}"/>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{settings.hideMoreLink}">
|
||||
<f:else>
|
||||
<div class="text-right mt-4">
|
||||
|
||||
Reference in New Issue
Block a user