Improve pricetable layout
This commit is contained in:
Björn Fromme
@@ -3,5 +3,4 @@
|
||||
:root {
|
||||
--cooltipz-bg-color: theme('colors.ep.secondary');
|
||||
--cooltipz-text-color: theme('colors.white');
|
||||
--cooltipz-cursor: theme('cursor.default');
|
||||
}
|
||||
|
||||
+35
-56
@@ -47,19 +47,14 @@
|
||||
Termin
|
||||
</th>
|
||||
<th class="p-1 text-left">
|
||||
<span data-cooltipz-dir="bottom" aria-label="Nächte" role="tooltip">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-bed"></use>
|
||||
</svg>
|
||||
</span>
|
||||
Nächte
|
||||
</th>
|
||||
<th class="p-1 text-left">
|
||||
ab
|
||||
inklusive
|
||||
</th>
|
||||
<th class="p-1 text-left">
|
||||
inkl.
|
||||
Preis
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -69,38 +64,29 @@
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
|
||||
<f:then>
|
||||
<button class="text-left text-ep-primary-light text-xs sm:text-sm md:text-base whitespace-nowrap"
|
||||
<button class="text-left text-ep-primary-light text-sm md:text-base whitespace-nowrap"
|
||||
data-action="product-details#loadPrices"
|
||||
data-date-uid="{row.dateUid}">
|
||||
{row.dateStart} - {row.dateEnd}
|
||||
</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block text-xs sm:text-sm md:text-base">
|
||||
<span class="block text-sm md:text-base{f:if(condition: row.available, else: ' line-through')}">
|
||||
{row.dateStart} - {row.dateEnd}
|
||||
</span>
|
||||
<f:if condition="{row.available}">
|
||||
<f:else>
|
||||
<span class="block text-sm">ausgebucht</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<span class="block text-xs sm:text-sm md:text-base">
|
||||
<span class="block text-sm md:text-base">
|
||||
{row.nights}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<f:if condition="{row.pseudoPrice}">
|
||||
<span class="block text-sm line-through">
|
||||
{row.pseudoPrice} €
|
||||
</span>
|
||||
</f:if>
|
||||
<span class="font-bold text-xs sm:text-sm md:text-base whitespace-nowrap"
|
||||
data-pricetable-target="price"
|
||||
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}">
|
||||
@@ -110,7 +96,7 @@
|
||||
data-pricetable-target="busIcon"
|
||||
data-bus-included="{row.busIncluded}"
|
||||
data-bus-price="{row.busPrice}">
|
||||
<svg class="w-4 h-4">
|
||||
<svg class="w-5 h-5">
|
||||
<use href="#icon-bus"></use>
|
||||
</svg>
|
||||
</span>
|
||||
@@ -119,45 +105,46 @@
|
||||
<span data-cooltipz-dir="top"
|
||||
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
|
||||
role="tooltip">
|
||||
<svg class="w-4 h-4">
|
||||
<svg class="w-5 h-5">
|
||||
<use href="#icon-tag"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:if>
|
||||
<button class="button button--small bg-ep-primary hidden md:block"
|
||||
<button type="button"
|
||||
data-action="pricetable#openModal"
|
||||
data-type="services"
|
||||
data-uid="{row.dateUid}"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Alle Inklusivleistungen anzeigen"
|
||||
role="tooltip">
|
||||
Leistungen
|
||||
</button>
|
||||
<button class="md:hidden"
|
||||
data-action="pricetable#openModal"
|
||||
data-type="services"
|
||||
data-uid="{row.dateUid}">
|
||||
<svg class="w-4 h-4">
|
||||
aria-label="Alle Inklusivleistungen anzeigen">
|
||||
<svg class="w-5 h-5">
|
||||
<use href="#icon-info-circle"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<button class="button button--small"
|
||||
<f:if condition="{row.showBookingButton}">
|
||||
<f:then>
|
||||
<button type="button"
|
||||
class="button w-full{f:if(condition: row.available, then: '', else: ' button--muted line-through')}"
|
||||
data-action="product-details#loadPrices"
|
||||
data-date-uid="{row.dateUid}">
|
||||
Details
|
||||
</button>
|
||||
<f:if condition="{row.available} && {row.showBookingButton}">
|
||||
<a href="{row.bookingUrl}"
|
||||
target="_blank"
|
||||
class="button button--small bg-green-500">
|
||||
Buchen
|
||||
</a>
|
||||
<f:if condition="{row.pseudoPrice}">
|
||||
<span class="block text-sm line-through">
|
||||
ab {row.pseudoPrice} €
|
||||
</span>
|
||||
</f:if>
|
||||
<f:if condition="{row.showBookingButton}">
|
||||
<span class="font-bold normal-case whitespace-nowrap">
|
||||
ab
|
||||
<span data-pricetable-target="price"
|
||||
data-room="{row.minPrice}"
|
||||
data-bus="{row.busPrice}"
|
||||
data-discount="{row.discount}">
|
||||
{row.minPrice}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
|
||||
title="Reisen-Alert"
|
||||
@@ -166,14 +153,6 @@
|
||||
</a>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{row.available} && {row.showBookingButton}">
|
||||
<f:else>
|
||||
<span class="button button--small button--muted">
|
||||
ausgebucht
|
||||
</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</f:for>
|
||||
|
||||
+41
-24
@@ -49,13 +49,24 @@
|
||||
Zimmertyp
|
||||
</th>
|
||||
<th class="p1 text-left">
|
||||
Preis
|
||||
<span class="lg:hidden">
|
||||
inkl.
|
||||
</span>
|
||||
<span class="hidden lg:block">
|
||||
inklusive
|
||||
</span>
|
||||
</th>
|
||||
<th class="p1 text-left">
|
||||
inkl.
|
||||
<span class="lg:hidden">
|
||||
opt.
|
||||
</span>
|
||||
<span class="hidden lg:block">
|
||||
optional
|
||||
</span>
|
||||
</th>
|
||||
<th class="p1 text-left">
|
||||
Preis/Buchen
|
||||
</th>
|
||||
<th></th>
|
||||
<th class="hidden lg:table-cell"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -73,20 +84,16 @@
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="text-xs sm:text-sm md:text-base">
|
||||
<span class="text-xs sm:text-sm md:text-base line-through">
|
||||
{row.roomName}
|
||||
</span>
|
||||
<f:if condition="{row.available}">
|
||||
<f:else>
|
||||
<span class="block text-sm">ausgebucht</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</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="font-bold text-xs sm:text-sm md:text-base whitespace-nowrap">
|
||||
{row.minPrice} €
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<div class="flex items-center space-x-1">
|
||||
@@ -104,7 +111,7 @@
|
||||
</f:if>
|
||||
<f:if condition="{row.skipassIncluded}">
|
||||
<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', else: 'Skipass')}"
|
||||
role="tooltip">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-tag"></use>
|
||||
@@ -122,7 +129,7 @@
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Alle Zusatzleistungen anzeigen"
|
||||
role="tooltip">
|
||||
Optionen
|
||||
Leistungen
|
||||
</button>
|
||||
<button class="sm:hidden"
|
||||
data-action="pricetable#openModal"
|
||||
@@ -134,27 +141,37 @@
|
||||
</button>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<td class="px-2 py-1 md:p-2 whitespace-nowrap">
|
||||
<f:if condition="{row.isHideBookingButton}">
|
||||
<f:then>
|
||||
<a class="button button--small button--mute"
|
||||
href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}">
|
||||
<f:link.typolink parameter="{settings.travelAlertPageUid}"
|
||||
class="button button--small">
|
||||
Reisen-Alert
|
||||
</a>
|
||||
</f:link.typolink>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<f:if condition="{row.available}">
|
||||
<f:then>
|
||||
<a class="button button--small bg-green-500 border-green-500 block"
|
||||
<a class="button button--small w-full"
|
||||
href="{row.bookingUrl}"
|
||||
title="{row.roomName}, {hotel.name}, {dateRange} buchen"
|
||||
target="_blank">
|
||||
Buchen
|
||||
<span class="font-bold normal-case whitespace-nowrap"
|
||||
data-pricetable-target="price"
|
||||
data-room="{row.minPrice}"
|
||||
data-bus="{row.busPrice}"
|
||||
data-discount="{row.discount}">
|
||||
{row.minPrice}
|
||||
</span>
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="button button--small button--muted block">
|
||||
ausgebucht
|
||||
<span class="button button--small button--muted block cursor-not-allowed font-bold normal-case whitespace-nowrap"
|
||||
data-pricetable-target="price"
|
||||
data-room="{row.minPrice}"
|
||||
data-bus="{row.busPrice}"
|
||||
data-discount="{row.discount}">
|
||||
{row.minPrice} €
|
||||
</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
Reference in New Issue
Block a user