Improve price- and datestable layouts
This commit is contained in:
Björn Fromme
+21
-13
@@ -1,26 +1,34 @@
|
|||||||
.button {
|
.button {
|
||||||
@apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8;
|
@apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8;
|
||||||
@apply uppercase leading-none;
|
@apply uppercase leading-none text-center;
|
||||||
@apply transition-colors outline-none focus:outline-none;
|
@apply transition-colors outline-none focus:outline-none;
|
||||||
@apply bg-ep-secondary border-2 border-ep-secondary text-white;
|
@apply bg-ep-secondary text-white;
|
||||||
@apply sbw:bg-sbw-secondary sbw:border-sbw-secondary;
|
@apply sbw:bg-sbw-secondary;
|
||||||
@apply uch:bg-uch-secondary uch:border-uch-secondary;
|
@apply uch:bg-uch-secondary;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@apply bg-ep-primary-dark;
|
||||||
|
@apply sbw:bg-sbw-primary-dark;
|
||||||
|
@apply uch:bg-uch-primary-dark;
|
||||||
|
}
|
||||||
|
|
||||||
&--active,
|
&--active,
|
||||||
&--secondary {
|
&--secondary {
|
||||||
@apply bg-ep-primary border-ep-primary;
|
@apply bg-ep-primary;
|
||||||
@apply sbw:bg-sbw-primary sbw:border-sbw-primary;
|
@apply sbw:bg-sbw-primary;
|
||||||
@apply uch:bg-uch-primary uch:border-uch-primary;
|
@apply uch:bg-uch-primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&--muted {
|
||||||
@apply bg-ep-primary-dark border-ep-primary-dark;
|
@apply bg-gray-300;
|
||||||
@apply sbw:bg-sbw-primary-dark sbw:border-sbw-primary-dark;
|
|
||||||
@apply uch:bg-uch-primary-dark uch:border-uch-primary-dark;
|
&:hover {
|
||||||
|
@apply bg-gray-300;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--light {
|
&--light {
|
||||||
@apply bg-white text-ep-primary border-2 border-ep-primary rounded;
|
@apply bg-white text-ep-primary border-2 border-ep-primary;
|
||||||
@apply font-bold;
|
@apply font-bold;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
@@ -30,6 +38,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&--small {
|
&--small {
|
||||||
@apply px-2 py-1 md:px-4 text-xs border;
|
@apply px-2 py-1 md:px-4 text-xs sm:text-sm;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,4 +3,5 @@
|
|||||||
:root {
|
:root {
|
||||||
--cooltipz-bg-color: theme('colors.ep.secondary');
|
--cooltipz-bg-color: theme('colors.ep.secondary');
|
||||||
--cooltipz-text-color: theme('colors.white');
|
--cooltipz-text-color: theme('colors.white');
|
||||||
|
--cooltipz-cursor: theme('cursor.default');
|
||||||
}
|
}
|
||||||
|
|||||||
+109
-99
@@ -42,80 +42,83 @@
|
|||||||
</div>
|
</div>
|
||||||
</f:if>
|
</f:if>
|
||||||
|
|
||||||
<div class="w-full max-w-full overflow-x-scroll mb-4">
|
<table class="w-full border-collapse mb-4">
|
||||||
<table class="min-w-full border-collapse">
|
<thead>
|
||||||
<thead>
|
<tr>
|
||||||
<tr>
|
<th class="p-1 text-left">
|
||||||
<th class="p-1 text-left">
|
Termin
|
||||||
Termin
|
</th>
|
||||||
</th>
|
<th class="p-1 text-left">
|
||||||
<th class="p-1 text-left">
|
<span data-cooltipz-dir="bottom" aria-label="Nächte" role="tooltip">
|
||||||
<span data-cooltipz-dir="bottom" aria-label="Nächte" role="tooltip">
|
<svg class="w-4 h-4">
|
||||||
<svg class="w-4 h-4">
|
<use href="#icon-bed"></use>
|
||||||
<use href="#icon-bed"></use>
|
</svg>
|
||||||
</svg>
|
</span>
|
||||||
</span>
|
</th>
|
||||||
</th>
|
<th class="p-1 text-left whitespace-nowrap">
|
||||||
<th class="p-1 text-left whitespace-nowrap">
|
Preis ab
|
||||||
Preis ab
|
</th>
|
||||||
</th>
|
<th class="p-1 text-left">
|
||||||
<th class="p-1 text-left">
|
inkl.
|
||||||
inkl.
|
</th>
|
||||||
</th>
|
<th class="hidden lg:table-cell"></th>
|
||||||
<th class="hidden lg:table-cell"></th>
|
</tr>
|
||||||
</tr>
|
</thead>
|
||||||
</thead>
|
<tbody>
|
||||||
<tbody>
|
<f:for each="{dates}" as="row" iteration="iteration">
|
||||||
<f:for each="{dates}" as="row" iteration="iteration">
|
<tr class="even:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
|
||||||
<tr class="even:bg-gray-50{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
|
data-pricetable-target="row">
|
||||||
data-pricetable-target="row">
|
<td class="px-2 py-1 md:p-2">
|
||||||
<td class="px-2 py-1">
|
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
|
||||||
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
|
<f:then>
|
||||||
<f:then>
|
<button class="text-left text-ep-primary-light text-sm md:text-base"
|
||||||
<button class="text-ep-primary-light"
|
data-action="product-details#loadPrices"
|
||||||
|
data-date-uid="{row.dateUid}">
|
||||||
|
{row.dateStart} - {row.dateEnd}
|
||||||
|
</button>
|
||||||
|
<div class="md:hidden">
|
||||||
|
<button class="button button--small sm:hidden"
|
||||||
data-action="product-details#loadPrices"
|
data-action="product-details#loadPrices"
|
||||||
data-date-uid="{row.dateUid}">
|
data-date-uid="{row.dateUid}">
|
||||||
{row.dateStart} - {row.dateEnd}
|
Details
|
||||||
</button>
|
</button>
|
||||||
<div class="md:hidden">
|
<a href="{row.bookingUrl}" target="_blank"
|
||||||
<button class="button--small"
|
class="button button--small bg-green-500 border-green-500 sm:hidden">
|
||||||
data-action="product-details#loadPrices"
|
Buchen
|
||||||
data-date-uid="{row.dateUid}">
|
</a>
|
||||||
Details
|
</div>
|
||||||
</button>
|
</f:then>
|
||||||
<a href="{row.bookingUrl}" target="_blank"
|
<f:else>
|
||||||
class="button button--small bg-green-500 border-green-500">
|
<span class="block text-sm md:text-base">
|
||||||
Buchen
|
{row.dateStart} - {row.dateEnd}
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</f:then>
|
|
||||||
<f:else>
|
|
||||||
<span>
|
|
||||||
{row.dateStart} - {row.dateEnd}
|
|
||||||
</span>
|
|
||||||
</f:else>
|
|
||||||
</f:if>
|
|
||||||
</td>
|
|
||||||
<td class="px-2 py-1">
|
|
||||||
{row.nights}
|
|
||||||
</td>
|
|
||||||
<td class="px-2 py-1">
|
|
||||||
<f:if condition="{row.pseudoPrice}">
|
|
||||||
<span class="text-sm line-through">
|
|
||||||
{row.pseudoPrice} €
|
|
||||||
</span>
|
</span>
|
||||||
</f:if>
|
<span class="block sm:hidden py-1 text-xs sm:text-sm text-gray-500 uppercase">
|
||||||
<span class="font-bold"
|
ausgebucht
|
||||||
data-pricetable-target="price"
|
</span>
|
||||||
data-room="{row.minPrice}"
|
</f:else>
|
||||||
data-bus="{row.busPrice}"
|
</f:if>
|
||||||
data-discount="{row.discount}">
|
</td>
|
||||||
{row.minPrice} €
|
<td class="px-2 py-1 md:p-2">
|
||||||
|
{row.nights}
|
||||||
|
</td>
|
||||||
|
<td class="px-2 py-1 md:p-2">
|
||||||
|
<f:if condition="{row.pseudoPrice}">
|
||||||
|
<span class="text-sm line-through">
|
||||||
|
{row.pseudoPrice} €
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</f:if>
|
||||||
<td class="px-2 py-1">
|
<span class="font-bold text-sm md:text-base"
|
||||||
<div class="hidden md:flex items-center space-x-2">
|
data-pricetable-target="price"
|
||||||
<f:if condition="{row.busIncluded}">
|
data-room="{row.minPrice}"
|
||||||
|
data-bus="{row.busPrice}"
|
||||||
|
data-discount="{row.discount}">
|
||||||
|
{row.minPrice} €
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-2 py-1 md:p-2">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<f:if condition="{row.busIncluded}">
|
||||||
|
<div class="hidden sm:block">
|
||||||
<span data-cooltipz-dir="top"
|
<span data-cooltipz-dir="top"
|
||||||
aria-label="Busfahrt"
|
aria-label="Busfahrt"
|
||||||
role="tooltip"
|
role="tooltip"
|
||||||
@@ -126,8 +129,10 @@
|
|||||||
<use href="#icon-bus"></use>
|
<use href="#icon-bus"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</f:if>
|
</div>
|
||||||
<f:if condition="{row.skipassIncluded}">
|
</f:if>
|
||||||
|
<f:if condition="{row.skipassIncluded}">
|
||||||
|
<div class="hidden sm:block">
|
||||||
<span data-cooltipz-dir="top"
|
<span data-cooltipz-dir="top"
|
||||||
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
|
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
|
||||||
role="tooltip">
|
role="tooltip">
|
||||||
@@ -135,24 +140,29 @@
|
|||||||
<use href="#icon-tag"></use>
|
<use href="#icon-tag"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</f:if>
|
</div>
|
||||||
<button class="button button--light button--small hidden md:block"
|
</f:if>
|
||||||
data-action="pricetable#openModal"
|
<button class="button button--light button--small hidden md:block"
|
||||||
data-type="services"
|
data-action="pricetable#openModal"
|
||||||
data-uid="{row.dateUid}"
|
data-type="services"
|
||||||
data-cooltipz-dir="top"
|
data-uid="{row.dateUid}"
|
||||||
aria-label="Alle Inklusivleistungen anzeigen"
|
data-cooltipz-dir="top"
|
||||||
role="tooltip">
|
aria-label="Alle Inklusivleistungen anzeigen"
|
||||||
Leistungen
|
role="tooltip">
|
||||||
</button>
|
Leistungen
|
||||||
<button class="md:hidden">
|
</button>
|
||||||
<svg class="w-4 h-4">
|
<button class="md:hidden"
|
||||||
<use href="#icon-info-circle"></use>
|
data-action="pricetable#openModal"
|
||||||
</svg>
|
data-type="services"
|
||||||
</button>
|
data-uid="{row.dateUid}">
|
||||||
</div>
|
<svg class="w-4 h-4">
|
||||||
</td>
|
<use href="#icon-info-circle"></use>
|
||||||
<td class="px-2 py-1 hidden sm:table-cell">
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-2 py-1 md:p-2 hidden sm:table-cell">
|
||||||
|
<div class="grid grid-cols-2 gap-2">
|
||||||
<button class="button button--small"
|
<button class="button button--small"
|
||||||
data-action="product-details#loadPrices"
|
data-action="product-details#loadPrices"
|
||||||
data-date-uid="{row.dateUid}">
|
data-date-uid="{row.dateUid}">
|
||||||
@@ -175,17 +185,17 @@
|
|||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{row.available} && {row.showBookingButton}">
|
<f:if condition="{row.available} && {row.showBookingButton}">
|
||||||
<f:else>
|
<f:else>
|
||||||
<span class="inline-block px-2 mx-1 text-xs text-gray-500">
|
<span class="button button--small button--muted">
|
||||||
ausgebucht
|
ausgebucht
|
||||||
</span>
|
</span>
|
||||||
</f:else>
|
</f:else>
|
||||||
</f:if>
|
</f:if>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</td>
|
||||||
</f:for>
|
</tr>
|
||||||
</tbody>
|
</f:for>
|
||||||
</table>
|
</tbody>
|
||||||
</div>
|
</table>
|
||||||
|
|
||||||
<f:if condition="{dates -> f:count()} > 5 || {altProductLink}">
|
<f:if condition="{dates -> f:count()} > 5 || {altProductLink}">
|
||||||
<div class="w-full flex justify-between pb-4">
|
<div class="w-full flex justify-between pb-4">
|
||||||
@@ -221,9 +231,9 @@
|
|||||||
<div class="hidden fixed inset-0 w-full h-full z-50"
|
<div class="hidden fixed inset-0 w-full h-full z-50"
|
||||||
data-controller="modal"
|
data-controller="modal"
|
||||||
data-action="pricetable:services-modal:open@window->modal#open">
|
data-action="pricetable:services-modal:open@window->modal#open">
|
||||||
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center"
|
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
|
||||||
data-action="click->modal#close"></div>
|
data-action="click->modal#close"></div>
|
||||||
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white shadow w-full max-w-xl rounded">
|
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
|
||||||
<div class="shadow flex items-center justify-between p-4 bg-ep-primary text-white rounded-t">
|
<div class="shadow flex items-center justify-between p-4 bg-ep-primary text-white rounded-t">
|
||||||
<span class="text-xl font-bold">
|
<span class="text-xl font-bold">
|
||||||
Inklusivleistungen {hotel.name}
|
Inklusivleistungen {hotel.name}
|
||||||
@@ -235,7 +245,7 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4">
|
<div class="p-4 bg-white rounded-b">
|
||||||
<f:for each="{dates}" as="row">
|
<f:for each="{dates}" as="row">
|
||||||
<table class="hidden table table-striped"
|
<table class="hidden table table-striped"
|
||||||
data-modal-target="content"
|
data-modal-target="content"
|
||||||
|
|||||||
+134
-129
@@ -44,136 +44,141 @@
|
|||||||
</div>
|
</div>
|
||||||
</f:if>
|
</f:if>
|
||||||
|
|
||||||
<div class="w-full max-w-full overflow-x-scroll mb-4">
|
<table class="w-full border-collapse mb-4">
|
||||||
<table class="min-w-full border-collapse">
|
<thead>
|
||||||
<thead>
|
<tr>
|
||||||
<tr>
|
<th class="text-left">
|
||||||
<th class="text-left">
|
Zimmertyp
|
||||||
Zimmertyp
|
</th>
|
||||||
</th>
|
<th class="text-left">
|
||||||
<th class="text-left">
|
Preis
|
||||||
Preis
|
</th>
|
||||||
</th>
|
<th class="text-left">
|
||||||
<th class="text-left">
|
inkl.
|
||||||
inkl.
|
</th>
|
||||||
</th>
|
<th></th>
|
||||||
<th></th>
|
<th class="hidden lg:table-cell"></th>
|
||||||
<th class="hidden lg:table-cell"></th>
|
</tr>
|
||||||
</tr>
|
</thead>
|
||||||
</thead>
|
<tbody>
|
||||||
<tbody>
|
<f:for each="{prices}" as="row">
|
||||||
<f:for each="{prices}" as="row">
|
<tr class="even:bg-gray-50"
|
||||||
<tr class="even:bg-gray-50"
|
data-pricetable-target="row">
|
||||||
data-pricetable-target="row">
|
<td class="px-2 py-1 md:p-2">
|
||||||
<td class="px-2 py-1">
|
<f:if condition="{row.showBookingButton} && {row.available}">
|
||||||
<f:if condition="{row.showBookingButton} && {row.available}">
|
<f:then>
|
||||||
<f:then>
|
<a class="text-sm sm:text-base"
|
||||||
<a href="{row.bookingUrl}"
|
href="{row.bookingUrl}"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
{row.roomName}
|
{row.roomName}
|
||||||
</a>
|
</a>
|
||||||
<a class="button button--small button--action lg:hidden"
|
<br>
|
||||||
href="{row.bookingUrl}"
|
<a class="button button--small bg-green-500 border-green-500 sm:hidden"
|
||||||
target="_blank">
|
href="{row.bookingUrl}"
|
||||||
Jetzt buchen
|
target="_blank">
|
||||||
</a>
|
Jetzt buchen
|
||||||
</f:then>
|
</a>
|
||||||
<f:else>
|
</f:then>
|
||||||
<span>
|
<f:else>
|
||||||
{row.roomName}
|
<span class="text-sm sm:text-base">
|
||||||
|
{row.roomName}
|
||||||
|
</span>
|
||||||
|
</f:else>
|
||||||
|
</f:if>
|
||||||
|
<f:if condition="{row.available}">
|
||||||
|
<f:else>
|
||||||
|
<div class="lg:hidden">
|
||||||
|
<span class="inline-block px-2 mx-1 text-xs text-gray-500">
|
||||||
|
ausgebucht
|
||||||
</span>
|
</span>
|
||||||
</f:else>
|
</div>
|
||||||
|
</f:else>
|
||||||
|
</f:if>
|
||||||
|
</td>
|
||||||
|
<td class="px-2 py-1 md:p-2 whitespace-nowrap"
|
||||||
|
data-pricetable-target="price"
|
||||||
|
data-room="{row.minPrice}"
|
||||||
|
data-bus="{row.busPrice}"
|
||||||
|
data-discount="{row.discount}">
|
||||||
|
<span class="text-sm sm:text-base">
|
||||||
|
{row.minPrice} €
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-2 py-1 md:p-2">
|
||||||
|
<div class="flex items-center space-x-1">
|
||||||
|
<f:if condition="{row.busIncluded}">
|
||||||
|
<span data-cooltipz-dir="top"
|
||||||
|
aria-label="Busfahrt"
|
||||||
|
role="tooltip"
|
||||||
|
data-pricetable-target="busIcon"
|
||||||
|
data-bus-included="{row.busIncluded}"
|
||||||
|
data-bus-price="{row.busPrice}">
|
||||||
|
<svg class="w-4 h-4">
|
||||||
|
<use href="#icon-bus"></use>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{row.available}">
|
<f:if condition="{row.skipassIncluded}">
|
||||||
<f:else>
|
<span data-cooltipz-dir="top"
|
||||||
<div class="lg:hidden">
|
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
|
||||||
<span class="inline-block px-2 mx-1 text-xs text-gray-500">
|
role="tooltip">
|
||||||
|
<svg class="w-4 h-4">
|
||||||
|
<use href="#icon-tag"></use>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</f:if>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-2 py-1 md:p-2">
|
||||||
|
<f:if condition="{row.hasOptionalServices} && {row.available}">
|
||||||
|
<button class="hidden sm:block button button--light button--small"
|
||||||
|
data-action="pricetable#openModal"
|
||||||
|
data-type="options"
|
||||||
|
data-uid="{row.roomUid}"
|
||||||
|
data-cooltipz-dir="top"
|
||||||
|
aria-label="Alle Zusatzleistungen anzeigen"
|
||||||
|
role="tooltip">
|
||||||
|
Optionen
|
||||||
|
</button>
|
||||||
|
<button class="sm:hidden"
|
||||||
|
data-action="pricetable#openModal"
|
||||||
|
data-type="options"
|
||||||
|
data-uid="{row.roomUid}">
|
||||||
|
<svg class="w-4 h-4">
|
||||||
|
<use href="#icon-info-circle"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</f:if>
|
||||||
|
</td>
|
||||||
|
<td class="hidden lg:table-cell px-2 py-1 md:p-2">
|
||||||
|
<f:if condition="{row.isHideBookingButton}">
|
||||||
|
<f:then>
|
||||||
|
<a class="button button--small button--mute"
|
||||||
|
href="#">
|
||||||
|
Reisen-Alert
|
||||||
|
</a>
|
||||||
|
</f:then>
|
||||||
|
<f:else>
|
||||||
|
<f:if condition="{row.available}">
|
||||||
|
<f:then>
|
||||||
|
<a class="button button--small bg-green-500 border-green-500 block"
|
||||||
|
href="{row.bookingUrl}" target="_blank">
|
||||||
|
Buchen
|
||||||
|
</a>
|
||||||
|
</f:then>
|
||||||
|
<f:else>
|
||||||
|
<span class="button button--small button--muted block">
|
||||||
ausgebucht
|
ausgebucht
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</f:else>
|
||||||
</f:else>
|
|
||||||
</f:if>
|
|
||||||
</td>
|
|
||||||
<td class="px-2 py-1 whitespace-nowrap"
|
|
||||||
data-pricetable-target="price"
|
|
||||||
data-room="{row.minPrice}"
|
|
||||||
data-bus="{row.busPrice}"
|
|
||||||
data-discount="{row.discount}">
|
|
||||||
{row.minPrice} €
|
|
||||||
</td>
|
|
||||||
<td class="px-2 py-1">
|
|
||||||
<div class="flex items-center space-x-1">
|
|
||||||
<f:if condition="{row.busIncluded}">
|
|
||||||
<span data-cooltipz-dir="top"
|
|
||||||
aria-label="Busfahrt"
|
|
||||||
role="tooltip"
|
|
||||||
data-pricetable-target="busIcon"
|
|
||||||
data-bus-included="{row.busIncluded}"
|
|
||||||
data-bus-price="{row.busPrice}">
|
|
||||||
<svg class="w-4 h-4">
|
|
||||||
<use href="#icon-bus"></use>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{row.skipassIncluded}">
|
</f:else>
|
||||||
<span data-cooltipz-dir="top"
|
</f:if>
|
||||||
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
|
</td>
|
||||||
role="tooltip">
|
</tr>
|
||||||
<svg class="w-4 h-4">
|
</f:for>
|
||||||
<use href="#icon-tag"></use>
|
</tbody>
|
||||||
</svg>
|
</table>
|
||||||
</span>
|
|
||||||
</f:if>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-2 py-1">
|
|
||||||
<f:if condition="{row.hasOptionalServices} && {row.available}">
|
|
||||||
<button class="hidden sm:block button button--light button--small"
|
|
||||||
data-action="pricetable#openModal"
|
|
||||||
data-type="options"
|
|
||||||
data-uid="{row.roomUid}"
|
|
||||||
data-cooltipz-dir="top"
|
|
||||||
aria-label="Alle Zusatzleistungen anzeigen"
|
|
||||||
role="tooltip">
|
|
||||||
Optionen
|
|
||||||
</button>
|
|
||||||
<button class="sm:hidden text-ep-primary">
|
|
||||||
<svg class="w-4 h-4">
|
|
||||||
<use href="#icon-info-circle"></use>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</f:if>
|
|
||||||
</td>
|
|
||||||
<td class="hidden lg:table-cell px-2 py-1">
|
|
||||||
<f:if condition="{row.isHideBookingButton}">
|
|
||||||
<f:then>
|
|
||||||
<a class="button button--small button--mute"
|
|
||||||
href="#">
|
|
||||||
Reisen-Alert
|
|
||||||
</a>
|
|
||||||
</f:then>
|
|
||||||
<f:else>
|
|
||||||
<f:if condition="{row.available}">
|
|
||||||
<f:then>
|
|
||||||
<a class="button button--small button--action"
|
|
||||||
href="{row.bookingUrl}" target="_blank">
|
|
||||||
Buchen
|
|
||||||
</a>
|
|
||||||
</f:then>
|
|
||||||
<f:else>
|
|
||||||
<span class="inline-block px-2 mx-1 text-xs text-gray-500">
|
|
||||||
ausgebucht
|
|
||||||
</span>
|
|
||||||
</f:else>
|
|
||||||
</f:if>
|
|
||||||
</f:else>
|
|
||||||
</f:if>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</f:for>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<f:if condition="{isSingleDate}">
|
<f:if condition="{isSingleDate}">
|
||||||
<f:else>
|
<f:else>
|
||||||
<button class="button button--small mb-4"
|
<button class="button button--small mb-4"
|
||||||
@@ -208,10 +213,10 @@
|
|||||||
<div class="hidden fixed inset-0 w-full h-full z-50"
|
<div class="hidden fixed inset-0 w-full h-full z-50"
|
||||||
data-controller="modal"
|
data-controller="modal"
|
||||||
data-action="pricetable:options-modal:open@window->modal#open">
|
data-action="pricetable:options-modal:open@window->modal#open">
|
||||||
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center"
|
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
|
||||||
data-action="click->modal#close"></div>
|
data-action="click->modal#close"></div>
|
||||||
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white shadow w-full max-w-xl rounded">
|
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
|
||||||
<div class="absolute top-0 left-0 inset-x-0 shadow flex items-center justify-between p-4 bg-ep-primary text-white rounded-t">
|
<div class="shadow flex items-center justify-between p-4 bg-ep-primary text-white rounded-t">
|
||||||
<span class="text-xl font-bold">
|
<span class="text-xl font-bold">
|
||||||
Optionale Zusatzleistungen
|
Optionale Zusatzleistungen
|
||||||
</span>
|
</span>
|
||||||
@@ -222,7 +227,7 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-128 p-4 mt-12 overflow-y-scroll">
|
<div class="h-128 p-4 overflow-y-scroll bg-white rounded-b">
|
||||||
<f:for each="{prices}" as="row">
|
<f:for each="{prices}" as="row">
|
||||||
<div class="hidden"
|
<div class="hidden"
|
||||||
data-modal-target="content"
|
data-modal-target="content"
|
||||||
|
|||||||
Reference in New Issue
Block a user