Rework dates- and price-tables on product detail page
This commit is contained in:
Björn Fromme
Generated
+735
-795
File diff suppressed because it is too large
Load Diff
@@ -6,7 +6,6 @@ require.context('../images', true, /\.(png|gif|svg|ico)$/);
|
||||
// Require vendor styles
|
||||
require('normalize.css/normalize.css');
|
||||
require('slick-carousel/slick/slick.css');
|
||||
require('cookieconsent/build/cookieconsent.min.css');
|
||||
require('flatpickr/dist/flatpickr.css');
|
||||
|
||||
// Require main app
|
||||
|
||||
@@ -6,13 +6,18 @@
|
||||
<f:link.typolink parameter="{concept.detailPage}"
|
||||
title="{concept.name}"
|
||||
class="flex flex-col">
|
||||
<f:render partial="TeaserImage" arguments="{image: concept.teaserImage}"/>
|
||||
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
|
||||
<div class="relative">
|
||||
<f:render partial="TeaserImage" arguments="{image: concept.teaserImage}"/>
|
||||
<div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}-overlay">
|
||||
<div class="flex h-full w-full p-4 items-end headline--3 text-white">
|
||||
{concept.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 flex-1">
|
||||
{concept.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
||||
</div>
|
||||
<div class="bg-concept-{concept.code} text-white uppercase leading-none p-2">
|
||||
{concept.name}
|
||||
</div>
|
||||
<div class="bg-concept-{concept.code} h-1 w-20"></div>
|
||||
</f:link.typolink>
|
||||
</f:section>
|
||||
|
||||
|
||||
@@ -6,9 +6,10 @@
|
||||
<symbol id="icon-chevron-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></symbol>
|
||||
<symbol id="icon-chevron-left" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></symbol>
|
||||
<symbol id="icon-arrow-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></symbol>
|
||||
<symbol id="icon-arrow-circle-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
<symbol id="icon-arrow-circle-right" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="icon-arrow-circle-left" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L9.414 11H13a1 1 0 100-2H9.414l1.293-1.293z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="icon-minus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
<symbol id="icon-plus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
<symbol id="icon-plus-circle" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="icon-info-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
<symbol id="icon-home" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></symbol>
|
||||
<symbol id="icon-user" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></symbol>
|
||||
@@ -22,7 +23,7 @@
|
||||
<symbol id="icon-calendar" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></symbol>
|
||||
<symbol id="icon-phone" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></symbol>
|
||||
<symbol id="icon-email" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></symbol>
|
||||
<symbol id="icon-tag" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></symbol>
|
||||
<symbol id="icon-tag" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="icon-faq" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
|
||||
<symbol id="icon-bed" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></symbol>
|
||||
<symbol id="icon-bus" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/></symbol>
|
||||
@@ -51,6 +52,7 @@
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)"><rect width="100" height="100"></rect></g>
|
||||
</symbol>
|
||||
<symbol id="icon-virus" fill="currentColor" stroke="none" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M483.55,227.55H462c-50.68,0-76.07-61.27-40.23-97.11L437,115.19A28.44,28.44,0,0,0,396.8,75L381.56,90.22c-35.84,35.83-97.11,10.45-97.11-40.23V28.44a28.45,28.45,0,0,0-56.9,0V50c0,50.68-61.27,76.06-97.11,40.23L115.2,75A28.44,28.44,0,0,0,75,115.19l15.25,15.25c35.84,35.84,10.45,97.11-40.23,97.11H28.45a28.45,28.45,0,1,0,0,56.89H50c50.68,0,76.07,61.28,40.23,97.12L75,396.8A28.45,28.45,0,0,0,115.2,437l15.24-15.25c35.84-35.84,97.11-10.45,97.11,40.23v21.54a28.45,28.45,0,0,0,56.9,0V462c0-50.68,61.27-76.07,97.11-40.23L396.8,437A28.45,28.45,0,0,0,437,396.8l-15.25-15.24c-35.84-35.84-10.45-97.12,40.23-97.12h21.54a28.45,28.45,0,1,0,0-56.89ZM224,272a48,48,0,1,1,48-48A48,48,0,0,1,224,272Zm80,56a24,24,0,1,1,24-24A24,24,0,0,1,304,328Z"/></symbol>
|
||||
<!-- Flags -->
|
||||
<symbol id="icon-flag-at" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd"><path fill="#fff" d="M640 480H0V0h640z"/><path fill="#ed2939" d="M640 480H0V320h640zm0-319.9H0V.1h640z"/></g></symbol>
|
||||
<symbol id="icon-flag-ch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d52b1e" d="M0 0h640v480H0z"/><g fill="#fff"><path d="M170 195h300v90H170z"/><path d="M275 90h90v300h-90z"/></g></g></symbol>
|
||||
|
||||
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 28 KiB |
@@ -1,44 +1,46 @@
|
||||
<div class="headerbar">
|
||||
Konzept
|
||||
<div class="space-y-2">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="headline--3 headline--underlined">
|
||||
Konzept
|
||||
</div>
|
||||
{product.conceptDescription -> f:format.html()}
|
||||
</div>
|
||||
<f:if condition="{product.calendarHotel} && {hotel.groupsPriceConfigs}">
|
||||
<button type="button"
|
||||
class="button w-full"
|
||||
data-controller="lightbox"
|
||||
data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}">
|
||||
Preisberechnung
|
||||
</button>
|
||||
</f:if>
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="headline--3 headline--underlined" data-rte-content>
|
||||
Verpflegung
|
||||
</div>
|
||||
{product.boardDescription -> f:format.html()}
|
||||
</div>
|
||||
<f:if condition="{product.additionalServices}">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="headline--3 headline--underlined">
|
||||
Zusatzleistungen
|
||||
</div>
|
||||
{product.additionalServices -> f:format.html()}
|
||||
</div>
|
||||
</f:if>
|
||||
<f:if condition="{product.programmeDescription}">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="headline--3 headline--underlined">
|
||||
Programm
|
||||
</div>
|
||||
{product.programmeDescription -> f:format.html()}
|
||||
</div>
|
||||
</f:if>
|
||||
<f:if condition="{product.skiPassDescription}">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="headline--3 headline--underlined">
|
||||
Skipass, Kurse, Leihmaterial
|
||||
</div>
|
||||
{product.skiPassDescription -> f:format.html()}
|
||||
</div>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="product-details product-details--concept" data-rte-content>
|
||||
{product.conceptDescription -> f:format.html()}
|
||||
</div>
|
||||
<f:if condition="{product.calendarHotel} && {hotel.groupsPriceConfigs}">
|
||||
<button type="button"
|
||||
class="button w-full"
|
||||
data-controller="lightbox"
|
||||
data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}">
|
||||
Preisberechnung
|
||||
</button>
|
||||
</f:if>
|
||||
<div class="headerbar">
|
||||
Verpflegung
|
||||
</div>
|
||||
<div class="product-details product-details--board" data-rte-content>
|
||||
{product.boardDescription -> f:format.html()}
|
||||
</div>
|
||||
<f:if condition="{product.additionalServices}">
|
||||
<div class="headerbar">
|
||||
Zusatzleistungen
|
||||
</div>
|
||||
<div class="product-details product-details--services" data-rte-content>
|
||||
{product.additionalServices -> f:format.html()}
|
||||
</div>
|
||||
</f:if>
|
||||
<f:if condition="{product.programmeDescription}">
|
||||
<div class="headerbar">
|
||||
Programm
|
||||
</div>
|
||||
<div class="product-details product-details--programme" data-rte-content>
|
||||
{product.programmeDescription -> f:format.html()}
|
||||
</div>
|
||||
</f:if>
|
||||
<f:if condition="{product.skiPassDescription}">
|
||||
<div class="headerbar">
|
||||
Skipass, Kurse, Leihmaterial
|
||||
</div>
|
||||
<div class="product-details product-details--skipass" data-rte-content>
|
||||
{product.skiPassDescription -> f:format.html()}
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
alt="{product.name}"
|
||||
width="640" height="480" />
|
||||
</a>
|
||||
<div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}-80', else: 'bg-ep-primary-80')}">
|
||||
<div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}-overlay', else: 'bg-ep-primary-80')}">
|
||||
<div class="flex items-center space-x-2">
|
||||
<f:if condition="{country.code}">
|
||||
<svg class="product-teaser__flag">
|
||||
|
||||
+101
-89
@@ -5,66 +5,35 @@
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<div class="headerbar">
|
||||
<div class="headline--3 headline--underlined">
|
||||
Buchungsoptionen {hotel.name}
|
||||
</div>
|
||||
|
||||
<div data-controller="pricetable">
|
||||
<div class="mb-4" data-controller="pricetable">
|
||||
|
||||
<f:if condition="{hasSurcharge} || {hasDiscount}">
|
||||
<f:if condition="{hasSurcharge}">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleSurcharge"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light mb-2">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="surchargeToggleLabel"
|
||||
data-label-default="Preise für Eigenanreise anzeigen"
|
||||
data-label-alt="Preise für Busanreise anzeigen">
|
||||
Preise für Eigenanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</f:if>
|
||||
<f:if condition="{hasDiscount}">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleDiscount"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light mb-2">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="discountToggleLabel"
|
||||
data-label-default="Preise für Busanreise anzeigen"
|
||||
data-label-alt="Preise für Eigenanreise anzeigen">
|
||||
Preise für Busanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</f:if>
|
||||
</f:if>
|
||||
|
||||
<table class="w-full border border-gray-300 border-collapse mb-4">
|
||||
<table class="w-full mb-4">
|
||||
<thead>
|
||||
<tr class="bg-gray-100">
|
||||
<th class="border border-gray-300 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
Termin
|
||||
</th>
|
||||
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Nächte
|
||||
</th>
|
||||
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
inklusive
|
||||
</th>
|
||||
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
ab
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr class="bg-ep-primary-dark text-white">
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
Termin
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Nächte
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
inklusive
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
ab
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<f:for each="{dates}" as="row" iteration="iteration">
|
||||
<tr class="hover:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
|
||||
<tr class="odd:bg-ep-primary-bg hover:bg-gray-100 odd:hover:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
|
||||
data-pricetable-target="row">
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2">
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
|
||||
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
|
||||
<f:then>
|
||||
<button type="button"
|
||||
@@ -81,12 +50,12 @@
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2 text-center">
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
|
||||
<span class="block text-sm md:text-base">
|
||||
{row.nights}
|
||||
</span>
|
||||
</td>
|
||||
<td class="border border-gray-300 px-2 p-1">
|
||||
<td class="border-r border-gray-200 px-2 p-1">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<span class="block p-1"
|
||||
@@ -122,7 +91,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2 text-center">
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
|
||||
<f:if condition="{row.pseudoPrice}">
|
||||
<span class="block text-sm line-through">
|
||||
{row.pseudoPrice} €
|
||||
@@ -136,21 +105,31 @@
|
||||
{row.minPrice}
|
||||
</span>
|
||||
</td>
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2 text-center">
|
||||
<td class="px-2 py-1 md:p-2 text-center">
|
||||
<f:if condition="{row.showBookingButton}">
|
||||
<f:then>
|
||||
<button type="button"
|
||||
class="button button--small{f:if(condition: row.available, then: '', else: ' button--muted')}"
|
||||
class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light', else: 'text-gray-300')}"
|
||||
data-action="product-details#loadPrices"
|
||||
data-date-uid="{row.dateUid}">
|
||||
Infos & buchen
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span class="font-bold text-sm uppercase">
|
||||
Infos & buchen
|
||||
</span>
|
||||
</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
|
||||
title="Reisen-Alert"
|
||||
class="button button--small button--muted">
|
||||
Reisen-Alert
|
||||
class="flex space-x-1 items-center text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span class="font-bold text-sm uppercase">
|
||||
Reisen-Alert
|
||||
</span>
|
||||
</a>
|
||||
</f:else>
|
||||
</f:if>
|
||||
@@ -160,36 +139,69 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<f:if condition="{dates -> f:count()} > 5 || {altProductLink}">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 pb-4">
|
||||
<f:if condition="{dates -> f:count()} > 5">
|
||||
<button type="button"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary"
|
||||
data-action="pricetable#toggleRows">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-plus-circle"
|
||||
data-pricetable-target="rowToggleIcon"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="rowToggleLabel">
|
||||
Alle Termine anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</f:if>
|
||||
<f:if condition="{altProductLink}">
|
||||
<a href="{altProductLink}"
|
||||
title="{altLabel}"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span>
|
||||
{altLabel}
|
||||
</span>
|
||||
</a>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<f:if condition="{hasSurcharge}">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleSurcharge"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="surchargeToggleLabel"
|
||||
data-label-default="Preise für Eigenanreise anzeigen"
|
||||
data-label-alt="Preise für Busanreise anzeigen">
|
||||
Preise für Eigenanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{hasDiscount}">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleDiscount"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="discountToggleLabel"
|
||||
data-label-default="Preise für Busanreise anzeigen"
|
||||
data-label-alt="Preise für Eigenanreise anzeigen">
|
||||
Preise für Busanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{dates -> f:count()} > 5">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light"
|
||||
data-action="pricetable#toggleRows">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-plus-circle"
|
||||
data-pricetable-target="rowToggleIcon"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="rowToggleLabel">
|
||||
Alle Termine anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{altProductLink}">
|
||||
<li class="py-2">
|
||||
<a href="{altProductLink}"
|
||||
title="{altLabel}"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span>
|
||||
{altLabel}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</f:if>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hidden fixed inset-0 w-full h-full z-50"
|
||||
|
||||
+80
-73
@@ -5,72 +5,40 @@
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<div class="headerbar md:flex md:items-center md:justify-between">
|
||||
<span class="block">Buchungsoptionen</span>
|
||||
<span class="block">{hotel.name} {dateRange}</span>
|
||||
<div class="headline--3 headline--underlined">
|
||||
Buchungsoptionen {hotel.name} {dateRange}
|
||||
</div>
|
||||
|
||||
<div data-controller="pricetable"
|
||||
<div class="mb-4" data-controller="pricetable"
|
||||
data-pricetable-show-all-rows-value="true">
|
||||
|
||||
<f:if condition="{hasSurcharge} || {hasDiscount}">
|
||||
<f:if condition="{hasSurcharge}">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleSurcharge"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light mb-2">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="surchargeToggleLabel"
|
||||
data-label-default="Preise für Eigenanreise anzeigen"
|
||||
data-label-alt="Preise für Busanreise anzeigen">
|
||||
Preise für Eigenanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</f:if>
|
||||
<f:if condition="{hasDiscount}">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleDiscount"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light mb-2">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="discountToggleLabel"
|
||||
data-label-default="Preise für Busanreise anzeigen"
|
||||
data-label-alt="Preise für Eigenanreise anzeigen">
|
||||
Preise für Busanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</f:if>
|
||||
</f:if>
|
||||
|
||||
<table class="w-full border border-gray-300 border-collapse mb-4">
|
||||
<table class="w-full mb-4">
|
||||
<thead>
|
||||
<tr class="bg-gray-100">
|
||||
<th class="border border-gray-300 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
Zimmertyp
|
||||
</th>
|
||||
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
<span class="lg:hidden">
|
||||
inkl.
|
||||
</span>
|
||||
<span class="hidden lg:block">
|
||||
inklusive
|
||||
</span>
|
||||
</th>
|
||||
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
optional
|
||||
</th>
|
||||
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Preis/Buchen
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="bg-ep-primary-dark text-white">
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
Zimmertyp
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
<span class="lg:hidden">
|
||||
inkl.
|
||||
</span>
|
||||
<span class="hidden lg:block">
|
||||
inklusive
|
||||
</span>
|
||||
</th>
|
||||
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
optional
|
||||
</th>
|
||||
<th class="px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Preis/Buchen
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<f:for each="{prices}" as="row">
|
||||
<tr class="hover:bg-gray-100"
|
||||
<tr class="odd:bg-ep-primary-bg hover:bg-gray-100 odd:hover:bg-gray-100"
|
||||
data-pricetable-target="row">
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2">
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
|
||||
<f:if condition="{row.showBookingButton} && {row.available}">
|
||||
<f:then>
|
||||
<a class="inline-block text-ep-primary-light text-xs sm:text-sm md:text-base leading-tight"
|
||||
@@ -92,7 +60,7 @@
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2">
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
|
||||
<div class="flex items-center justify-around space-x-1">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<span data-cooltipz-dir="top"
|
||||
@@ -117,7 +85,7 @@
|
||||
</f:if>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2 text-center">
|
||||
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
|
||||
<f:if condition="{row.hasOptionalServices} && {row.available}">
|
||||
<button type="button"
|
||||
class="text-ep-primary-light text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
|
||||
@@ -131,7 +99,7 @@
|
||||
</button>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2 whitespace-nowrap">
|
||||
<td class="px-2 py-1 md:p-2 whitespace-nowrap">
|
||||
<f:if condition="{row.isHideBookingButton}">
|
||||
<f:then>
|
||||
<f:link.typolink parameter="{settings.travelAlertPageUid}"
|
||||
@@ -175,19 +143,58 @@
|
||||
</f:for>
|
||||
</tbody>
|
||||
</table>
|
||||
<f:if condition="{isSingleDate}">
|
||||
<f:else>
|
||||
<button type="button"
|
||||
class="button button--small mb-4"
|
||||
data-action="product-details#showDates">
|
||||
<svg class="w-4 h-4 text-white">
|
||||
<use href="#icon-chevron-left"></use>
|
||||
</svg>
|
||||
<span>zurück zur Terminübersicht</span>
|
||||
</button>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<div class="headerbar">
|
||||
|
||||
<ul class="divide-y divide-gray-200 mb-4">
|
||||
<f:if condition="{hasSurcharge}">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleSurcharge"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="surchargeToggleLabel"
|
||||
data-label-default="Preise für Eigenanreise anzeigen"
|
||||
data-label-alt="Preise für Busanreise anzeigen">
|
||||
Preise für Eigenanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{hasDiscount}">
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
data-action="pricetable#toggleDiscount"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-arrow-circle-right"></use>
|
||||
</svg>
|
||||
<span data-pricetable-target="discountToggleLabel"
|
||||
data-label-default="Preise für Busanreise anzeigen"
|
||||
data-label-alt="Preise für Eigenanreise anzeigen">
|
||||
Preise für Busanreise anzeigen
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:if>
|
||||
<f:if condition="{isSingleDate}">
|
||||
<f:else>
|
||||
<li class="py-2">
|
||||
<button type="button"
|
||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light"
|
||||
data-action="product-details#showDates">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-arrow-circle-left"></use>
|
||||
</svg>
|
||||
<span>
|
||||
zurück zur Terminübersicht
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</ul>
|
||||
<div class="headline--3 headline--underlined">
|
||||
Inklusivleistungen
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 mb-8">
|
||||
|
||||
@@ -102,9 +102,14 @@
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}"
|
||||
class="block w-full py-2 border-2 border-red-500 rounded text-red-500 text-center uppercase hover:bg-red-500 hover:text-white transition-colors duration-200 ease-in-out"
|
||||
class="block w-full px-4 py-2 bg-red-500 text-white flex items-center space-x-2"
|
||||
title="Corona Updates">
|
||||
Corona Updates
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-virus"></use>
|
||||
</svg>
|
||||
<span>
|
||||
Corona Updates
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
+28
-26
@@ -14,17 +14,17 @@ module.exports = {
|
||||
safelist: [
|
||||
'bg-header-season-w',
|
||||
'bg-header-season-s',
|
||||
'bg-concept-bdg', 'bg-concept-bdg-80',
|
||||
'bg-concept-skr', 'bg-concept-skr-80',
|
||||
'bg-concept-evt', 'bg-concept-evt-80',
|
||||
'bg-concept-fam', 'bg-concept-fam-80',
|
||||
'bg-concept-grp', 'bg-concept-grp-80',
|
||||
'bg-concept-prg', 'bg-concept-prg-80',
|
||||
'bg-concept-ind', 'bg-concept-ind-80',
|
||||
'bg-concept-wkd', 'bg-concept-wkd-80',
|
||||
'bg-concept-spz', 'bg-concept-spz-80',
|
||||
'bg-concept-epe', 'bg-concept-epe-8ß',
|
||||
'bg-concept-sfl', 'bg-concept-sfl-80',
|
||||
'bg-concept-bdg', 'bg-concept-bdg-overlay',
|
||||
'bg-concept-skr', 'bg-concept-skr-overlay',
|
||||
'bg-concept-evt', 'bg-concept-evt-overlay',
|
||||
'bg-concept-fam', 'bg-concept-fam-overlay',
|
||||
'bg-concept-grp', 'bg-concept-grp-overlay',
|
||||
'bg-concept-prg', 'bg-concept-prg-overlay',
|
||||
'bg-concept-ind', 'bg-concept-ind-overlay',
|
||||
'bg-concept-wkd', 'bg-concept-wkd-overlay',
|
||||
'bg-concept-spz', 'bg-concept-spz-overlay',
|
||||
'bg-concept-epe', 'bg-concept-epe-overlay',
|
||||
'bg-concept-sfl', 'bg-concept-sfl-overlay',
|
||||
/^flatpickr-.*/,
|
||||
],
|
||||
},
|
||||
@@ -53,24 +53,26 @@ module.exports = {
|
||||
'white-50': tinycolor('#ffffff').setAlpha(0.5).toRgbString(),
|
||||
},
|
||||
concept: {
|
||||
default: '#3d8ccb',
|
||||
bdg: '#3d8ccb',
|
||||
skr: '#3d8ccb',
|
||||
evt: '#ed5454',
|
||||
'evt-80': tinycolor('#ed5454').setAlpha(0.80).toRgbString(),
|
||||
default: '#0173A5',
|
||||
bdg: '#0173A5',
|
||||
skr: '#0173A5',
|
||||
'skr-overlay': tinycolor('#0173A5').setAlpha(0.70).toRgbString(),
|
||||
evt: '#BA034F',
|
||||
'evt-overlay': tinycolor('#BA034F').setAlpha(0.70).toRgbString(),
|
||||
fam: '#7ca7d5',
|
||||
'fam-80': tinycolor('#7ca7d5').setAlpha(0.80).toRgbString(),
|
||||
grp: '#ffa300',
|
||||
prg: '#3d8ccb',
|
||||
'prg-80': tinycolor('#3d8ccb').setAlpha(0.80).toRgbString(),
|
||||
ind: '#009fe3',
|
||||
'ind-80': tinycolor('#009fe3').setAlpha(0.80).toRgbString(),
|
||||
wkd: '#44d04e',
|
||||
'wkd-80': tinycolor('#44d04e').setAlpha(0.80).toRgbString(),
|
||||
'fam-overlay': tinycolor('#7ca7d5').setAlpha(0.70).toRgbString(),
|
||||
grp: '#576D02',
|
||||
'grp-overlay': tinycolor('#576D02').setAlpha(0.70).toRgbString(),
|
||||
prg: '#0173A5',
|
||||
'prg-overlay': tinycolor('#0173A5').setAlpha(0.70).toRgbString(),
|
||||
ind: '#1684DD',
|
||||
'ind-overlay': tinycolor('#1684DD').setAlpha(0.70).toRgbString(),
|
||||
wkd: '#96BB05',
|
||||
'wkd-overlay': tinycolor('#96BB05').setAlpha(0.70).toRgbString(),
|
||||
spz: '#436a8a',
|
||||
epe: '#436a8a',
|
||||
sfl: '#999',
|
||||
'sfl-80': tinycolor('#999999').setAlpha(0.80).toRgbString(),
|
||||
sfl: '#4E4E51',
|
||||
'sfl-overlay': tinycolor('#4E4E51').setAlpha(0.70).toRgbString(),
|
||||
},
|
||||
ep: {
|
||||
primary: '#3d8ccb',
|
||||
|
||||
Reference in New Issue
Block a user