Improve pricetable layout
This commit is contained in:
Björn Fromme
@@ -2,5 +2,6 @@
|
||||
|
||||
:root {
|
||||
--cooltipz-bg-color: theme('colors.ep.secondary');
|
||||
--cooltipz-border-color: theme('colors.ep.secondary');
|
||||
--cooltipz-text-color: theme('colors.white');
|
||||
}
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
data-uid="{row.dateUid}"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Alle Inklusivleistungen anzeigen">
|
||||
Details >
|
||||
Leistungen
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
@@ -140,7 +140,7 @@
|
||||
class="button button--small{f:if(condition: row.available, then: '', else: ' button--muted')}"
|
||||
data-action="product-details#loadPrices"
|
||||
data-date-uid="{row.dateUid}">
|
||||
Details
|
||||
Infos & buchen
|
||||
</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
|
||||
+23
-33
@@ -42,13 +42,13 @@
|
||||
</f:if>
|
||||
</f:if>
|
||||
|
||||
<table class="w-full border-collapse mb-4">
|
||||
<table class="w-full border border-gray-300 border-collapse mb-4">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="p1 text-left">
|
||||
<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="p1 text-left">
|
||||
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
<span class="lg:hidden">
|
||||
inkl.
|
||||
</span>
|
||||
@@ -56,27 +56,22 @@
|
||||
inklusive
|
||||
</span>
|
||||
</th>
|
||||
<th class="p1 text-left">
|
||||
<span class="lg:hidden">
|
||||
opt.
|
||||
</span>
|
||||
<span class="hidden lg:block">
|
||||
optional
|
||||
</span>
|
||||
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
optional
|
||||
</th>
|
||||
<th class="p1 text-left">
|
||||
<th class="border border-gray-300 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="odd:bg-gray-100"
|
||||
<tr class="hover:bg-gray-100"
|
||||
data-pricetable-target="row">
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2">
|
||||
<f:if condition="{row.showBookingButton} && {row.available}">
|
||||
<f:then>
|
||||
<a class="text-ep-primary-light text-xs sm:text-sm md:text-base"
|
||||
<a class="inline-block text-ep-primary-light text-xs sm:text-sm md:text-base leading-tight"
|
||||
href="{row.bookingUrl}"
|
||||
target="_blank"
|
||||
title="{row.roomName}, {hotel.name}, {dateRange} buchen">
|
||||
@@ -84,19 +79,19 @@
|
||||
</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="text-xs sm:text-sm md:text-base line-through">
|
||||
<span class="inline-block text-xs sm:text-sm md:text-base line-through leading-tight">
|
||||
{row.roomName}
|
||||
</span>
|
||||
<f:if condition="{row.available}">
|
||||
<f:else>
|
||||
<span class="block text-sm">ausgebucht</span>
|
||||
<span class="inline-block text-xs sm:text-sm md:text-base text-sm leading-tight lg:ml-2">ausgebucht</span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<div class="flex items-center space-x-1">
|
||||
<td class="border border-gray-300 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"
|
||||
aria-label="Busfahrt"
|
||||
@@ -104,7 +99,7 @@
|
||||
data-pricetable-target="busIcon"
|
||||
data-bus-included="{row.busIncluded}"
|
||||
data-bus-price="{row.busPrice}">
|
||||
<svg class="w-4 h-4">
|
||||
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||
<use href="#icon-bus"></use>
|
||||
</svg>
|
||||
</span>
|
||||
@@ -113,35 +108,27 @@
|
||||
<span data-cooltipz-dir="top"
|
||||
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket', else: 'Skipass')}"
|
||||
role="tooltip">
|
||||
<svg class="w-4 h-4">
|
||||
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||
<use href="#icon-tag"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:if>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2 text-center">
|
||||
<f:if condition="{row.hasOptionalServices} && {row.available}">
|
||||
<button class="button button--small bg-ep-primary hidden md:block"
|
||||
<button class="text-ep-primary text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
|
||||
data-action="pricetable#openModal"
|
||||
data-type="options"
|
||||
data-uid="{row.roomUid}"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Alle Zusatzleistungen anzeigen"
|
||||
role="tooltip">
|
||||
Leistungen
|
||||
</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>
|
||||
Zusatzleistungen
|
||||
</button>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2 whitespace-nowrap">
|
||||
<td class="border border-gray-300 px-2 py-1 md:p-2 whitespace-nowrap">
|
||||
<f:if condition="{row.isHideBookingButton}">
|
||||
<f:then>
|
||||
<f:link.typolink parameter="{settings.travelAlertPageUid}"
|
||||
@@ -167,6 +154,9 @@
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="button button--small button--muted block cursor-not-allowed font-bold normal-case whitespace-nowrap"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Leider ausgebucht"
|
||||
role="tooltip"
|
||||
data-pricetable-target="price"
|
||||
data-room="{row.minPrice}"
|
||||
data-bus="{row.busPrice}"
|
||||
|
||||
Reference in New Issue
Block a user