chore: refactor and cleanup template
This commit is contained in:
@@ -30,6 +30,7 @@
|
||||
<div class="lg:pl-4">
|
||||
<div class="hidden lg:block">
|
||||
<f:render section="SidebarButtons" arguments="{_all}"/>
|
||||
<f:variable name="showGallery" value="1"/>
|
||||
<f:render section="Sidebar" arguments="{_all}"/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,42 +38,12 @@
|
||||
<div id="main" class="w-full lg:w-2/3">
|
||||
<div class="lg:pr-4 flex flex-col space-y-8">
|
||||
<div class="grid grid-cols-3 md:grid-cols-6 gap-px uppercase text-white text-sm md:text-base">
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="dates"
|
||||
class="col-span-2 py-2 uppercase bg-button bg-button--dark">
|
||||
Termine/Preise
|
||||
</button>
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="hotel"
|
||||
class="py-2 uppercase bg-button bg-button--dark">
|
||||
Unterkunft
|
||||
</button>
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="region"
|
||||
class="py-2 uppercase bg-button bg-button--dark">
|
||||
Gebiet
|
||||
</button>
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="city"
|
||||
class="py-2 uppercase bg-button bg-button--dark">
|
||||
Ort
|
||||
</button>
|
||||
<f:render section="TabButton" arguments="{tab: 'dates', label: 'Termine/Preise', wide: 1}"/>
|
||||
<f:render section="TabButton" arguments="{tab: 'hotel', label: 'Unterkunft', wide: 0}"/>
|
||||
<f:render section="TabButton" arguments="{tab: 'region', label: 'Gebiet', wide: 0}"/>
|
||||
<f:render section="TabButton" arguments="{tab: 'city', label: 'Ort', wide: 0}"/>
|
||||
<f:if condition="{product.journey}">
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="journey"
|
||||
class="py-2 uppercase bg-button bg-button--dark">
|
||||
Anreise
|
||||
</button>
|
||||
<f:render section="TabButton" arguments="{tab: 'journey', label: 'Anreise', wide: 0}"/>
|
||||
</f:if>
|
||||
</div>
|
||||
<f:render section="Dates" arguments="{_all}"/>
|
||||
@@ -80,8 +51,8 @@
|
||||
<f:render section="City" arguments="{_all}"/>
|
||||
<f:render section="Region" arguments="{_all}"/>
|
||||
<f:render section="Journey" arguments="{_all}"/>
|
||||
<div class="md:hidden">
|
||||
<f:render section="SidebarButtons" arguments="{_all}"/>
|
||||
<div class="lg:hidden">
|
||||
<f:variable name="showGallery" value="0"/>
|
||||
<f:render section="Sidebar" arguments="{_all}"/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,19 +78,13 @@
|
||||
|
||||
<f:if condition="{product.calendarHotel}">
|
||||
<f:if condition="{product.season} == 's'">
|
||||
<f:render partial="Product/PriceCalendar.html" arguments="{_all}"/>
|
||||
<f:render partial="Product/PriceCalendar" arguments="{_all}"/>
|
||||
|
||||
<f:variable name="currentYear" value="{f:format.date(date: 'now', format: 'Y')}"/>
|
||||
<div hx-get="{ep:uri.ajax(action: 'priceTable', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: product.calendarHotel, year: currentYear}', format: 'html')}"
|
||||
hx-trigger="load">
|
||||
<f:render section="TableLoadingIndicator"/>
|
||||
</div>
|
||||
<f:render section="PriceTable" arguments="{product: product, settings: settings, year: currentYear}"/>
|
||||
|
||||
<f:variable name="nextYear" value="{f:format.date(date: '+1 year', format: 'Y')}"/>
|
||||
<div hx-get="{ep:uri.ajax(action: 'priceTable', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: product.calendarHotel, year: nextYear}', format: 'html')}"
|
||||
hx-trigger="load">
|
||||
<f:render section="TableLoadingIndicator"/>
|
||||
</div>
|
||||
<f:render section="PriceTable" arguments="{product: product, settings: settings, year: nextYear}"/>
|
||||
</f:if>
|
||||
</f:if>
|
||||
|
||||
@@ -203,7 +168,9 @@
|
||||
</f:section>
|
||||
|
||||
<f:section name="Sidebar">
|
||||
<f:if condition="{showGallery}">
|
||||
<f:render section="SidebarGallery" arguments="{_all}"/>
|
||||
</f:if>
|
||||
<f:if condition="{product.tourLink}">
|
||||
<div class="bg-zinc-50 p-4 mb-4"
|
||||
data-controller="lightbox">
|
||||
@@ -323,60 +290,8 @@
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<f:section name="Calendar">
|
||||
<f:if condition="{product.calendarHotel}">
|
||||
<div class="bg-zinc-50 p-4 flex flex-col space-y-2 relative mb-8">
|
||||
<span class="block font-bold">
|
||||
Belegungskalender
|
||||
</span>
|
||||
<div data-controller="calendar"
|
||||
data-calendar-uri-value="{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, format: 'html')}"
|
||||
data-calendar-hotel-uid-value="{product.calendarHotel.uid}">
|
||||
<select class="w-full border-zinc-400 focus:border-zinc-400"
|
||||
data-calendar-target="field"
|
||||
data-action="calendar#select">
|
||||
</select>
|
||||
<f:if condition="{hotel.groupsPriceConfigs}">
|
||||
<f:then>
|
||||
<div class="mt-4 cursor-pointer"
|
||||
data-controller="lightbox"
|
||||
data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid, absolute: 1)}"
|
||||
data-lightbox-type-value="external"
|
||||
data-lightbox-height-value="85vh"
|
||||
data-action="click->lightbox#open"
|
||||
data-calendar-target="container"></div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="mt-4"
|
||||
data-calendar-target="container"></div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<div class="absolute top-0 left-0 inset-0 w-full h-full bg-white/85"
|
||||
data-calendar-target="loadingIndicator">
|
||||
<f:image class="absolute top-1/2 left-1/2 -translate-xy-1/2" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
|
||||
</div>
|
||||
</div>
|
||||
<f:if condition="{product.concept.code} == 'gsr'">
|
||||
<f:link.typolink class="button bg-button" parameter="{settings.groupsContactFormPageUid}" additionalParams="&ref={currentPageUid}">
|
||||
Zum Anfrageformular
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:if>
|
||||
</f:section>
|
||||
|
||||
<f:section name="SidebarButtons">
|
||||
<div class=" mb-4{f:if(condition: product.faqs, then: ' grid grid-cols-2 gap-px')}">
|
||||
<f:comment><!--
|
||||
<a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}"
|
||||
class="block px-4 py-2 bg-red-500 text-white flex items-center space-x-2 col-span-2 md:col-span-3"
|
||||
title="Corona Updates">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-virus"></use>
|
||||
</svg>
|
||||
<span>Corona Updates</span>
|
||||
</a>
|
||||
--></f:comment>
|
||||
<f:if condition="{product.faqs}">
|
||||
<button type="button"
|
||||
class="w-full bg-button bg-button--dark text-white py-2"
|
||||
@@ -412,45 +327,43 @@
|
||||
<p class="font-bold mb-2">
|
||||
Galerie
|
||||
</p>
|
||||
<a href="{f:uri.image(image: product.images.0, cropVariant: 'zoom', maxWidth: '2560')}"
|
||||
data-lightbox-target="thumb"
|
||||
data-lightbox-index="{iteration.cycle}"
|
||||
data-lightbox-caption="{image.originalResource.description}"
|
||||
data-action="lightbox#open"
|
||||
class="block mb-2">
|
||||
<ep:lazyLoadImage image="{product.images.0}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="400"
|
||||
height="225c+100"
|
||||
alt="{image.alternative}"
|
||||
title="{image.title}" />
|
||||
</a>
|
||||
<f:if condition="{product.images -> f:count()} > 1">
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<f:for each="{product.images}" as="image" iteration="iteration">
|
||||
<f:if condition="{iteration.index} > 0">
|
||||
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
|
||||
data-lightbox-target="thumb"
|
||||
data-lightbox-index="{iteration.cycle}"
|
||||
data-lightbox-caption="{image.originalResource.description}"
|
||||
data-action="lightbox#open">
|
||||
data-action="lightbox#open"
|
||||
class="{f:if(condition: iteration.isFirst, then: 'col-span-4')}">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="160"
|
||||
height="160c+100"
|
||||
alt="{image.alternative}"
|
||||
title="{image.title}" />
|
||||
width="{f:if(condition: iteration.isFirst, then: '400', else: '160')}"
|
||||
height="{f:if(condition: iteration.isFirst, then: '225c+100', else: '160c+100')}"/>
|
||||
</a>
|
||||
</f:if>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:if>
|
||||
</f:section>
|
||||
|
||||
<f:section name="TabButton">
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="{tab}"
|
||||
class="py-2 uppercase bg-button bg-button--dark{f:if(condition: wide, then: ' col-span-2')}">
|
||||
{label}
|
||||
</button>
|
||||
</f:section>
|
||||
|
||||
<f:section name="PriceTable">
|
||||
<div hx-get="{ep:uri.ajax(action: 'priceTable', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: product.calendarHotel, year: year}', format: 'html')}"
|
||||
hx-trigger="load">
|
||||
<f:render section="TableLoadingIndicator"/>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<f:section name="TableLoadingIndicator">
|
||||
<div class="flex items-center justify-center space-x-4 text-sm p-4">
|
||||
<f:image class="block w-4 h-4" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt=""/>
|
||||
|
||||
Reference in New Issue
Block a user