WIP Improve dates table layout
This commit is contained in:
Björn Fromme
+42
-44
@@ -40,31 +40,32 @@
|
|||||||
</f:if>
|
</f:if>
|
||||||
</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>
|
<thead>
|
||||||
<tr>
|
<tr class="bg-gray-100">
|
||||||
<th class="p-1 text-left">
|
<th class="border border-gray-300 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||||
Termin
|
Termin
|
||||||
</th>
|
</th>
|
||||||
<th class="p-1 text-left">
|
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||||
Nächte
|
Nächte
|
||||||
</th>
|
</th>
|
||||||
<th class="p-1 text-left">
|
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||||
inklusive
|
inklusive
|
||||||
</th>
|
</th>
|
||||||
<th class="p-1 text-left">
|
<th class="border border-gray-300 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||||
Preis
|
ab
|
||||||
</th>
|
</th>
|
||||||
|
<th></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="odd:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
|
<tr class="hover:bg-gray-100{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="border border-gray-300 px-2 py-1 md:p-2">
|
||||||
<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 whitespace-nowrap"
|
<button class="text-left text-ep-primary-light text-sm md:text-base"
|
||||||
data-action="product-details#loadPrices"
|
data-action="product-details#loadPrices"
|
||||||
data-date-uid="{row.dateUid}">
|
data-date-uid="{row.dateUid}">
|
||||||
{row.dateStart} - {row.dateEnd}
|
{row.dateStart} - {row.dateEnd}
|
||||||
@@ -74,81 +75,78 @@
|
|||||||
<span class="block text-sm md:text-base{f:if(condition: row.available, else: ' line-through')}">
|
<span class="block text-sm md:text-base{f:if(condition: row.available, else: ' line-through')}">
|
||||||
{row.dateStart} - {row.dateEnd}
|
{row.dateStart} - {row.dateEnd}
|
||||||
</span>
|
</span>
|
||||||
<f:if condition="{row.available}">
|
|
||||||
<f:else>
|
|
||||||
<span class="block text-sm">ausgebucht</span>
|
|
||||||
</f:else>
|
|
||||||
</f:if>
|
|
||||||
</f:else>
|
</f:else>
|
||||||
</f:if>
|
</f:if>
|
||||||
</td>
|
</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">
|
||||||
<span class="block text-sm md:text-base">
|
<span class="block text-sm md:text-base">
|
||||||
{row.nights}
|
{row.nights}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="px-2 py-1 md:p-2">
|
<td class="border border-gray-300 px-2 p-1">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex flex-wrap items-center">
|
||||||
<f:if condition="{row.busIncluded}">
|
<f:if condition="{row.busIncluded}">
|
||||||
<span data-cooltipz-dir="top"
|
<span class="block p-1"
|
||||||
aria-label="Busfahrt"
|
data-cooltipz-dir="top"
|
||||||
|
aria-label="Busfahrt inklusive"
|
||||||
role="tooltip"
|
role="tooltip"
|
||||||
data-pricetable-target="busIcon"
|
data-pricetable-target="busIcon"
|
||||||
data-bus-included="{row.busIncluded}"
|
data-bus-included="{row.busIncluded}"
|
||||||
data-bus-price="{row.busPrice}">
|
data-bus-price="{row.busPrice}">
|
||||||
<svg class="w-5 h-5">
|
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||||
<use href="#icon-bus"></use>
|
<use href="#icon-bus"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{row.skipassIncluded}">
|
<f:if condition="{row.skipassIncluded}">
|
||||||
<span data-cooltipz-dir="top"
|
<span class="block p-1"
|
||||||
|
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">
|
||||||
<svg class="w-5 h-5">
|
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||||
<use href="#icon-tag"></use>
|
<use href="#icon-tag"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</f:if>
|
</f:if>
|
||||||
<button type="button"
|
<button class="text-ep-primary col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
|
||||||
|
type="button"
|
||||||
data-action="pricetable#openModal"
|
data-action="pricetable#openModal"
|
||||||
data-type="services"
|
data-type="services"
|
||||||
data-uid="{row.dateUid}"
|
data-uid="{row.dateUid}"
|
||||||
data-cooltipz-dir="top"
|
data-cooltipz-dir="top"
|
||||||
aria-label="Alle Inklusivleistungen anzeigen">
|
aria-label="Alle Inklusivleistungen anzeigen">
|
||||||
<svg class="w-5 h-5">
|
Details >
|
||||||
<use href="#icon-info-circle"></use>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</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.pseudoPrice}">
|
||||||
|
<span class="block text-sm line-through">
|
||||||
|
{row.pseudoPrice} €
|
||||||
|
</span>
|
||||||
|
</f:if>
|
||||||
|
<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>
|
||||||
|
</td>
|
||||||
|
<td class="border border-gray-300 px-2 py-1 md:p-2 text-center">
|
||||||
<f:if condition="{row.showBookingButton}">
|
<f:if condition="{row.showBookingButton}">
|
||||||
<f:then>
|
<f:then>
|
||||||
<button type="button"
|
<button type="button"
|
||||||
class="button w-full{f:if(condition: row.available, then: '', else: ' button--muted line-through')}"
|
class="button button--small{f:if(condition: row.available, then: '', else: ' button--muted')}"
|
||||||
data-action="product-details#loadPrices"
|
data-action="product-details#loadPrices"
|
||||||
data-date-uid="{row.dateUid}">
|
data-date-uid="{row.dateUid}">
|
||||||
<f:if condition="{row.pseudoPrice}">
|
Details
|
||||||
<span class="block text-sm line-through">
|
|
||||||
ab {row.pseudoPrice} €
|
|
||||||
</span>
|
|
||||||
</f:if>
|
|
||||||
<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>
|
</button>
|
||||||
</f:then>
|
</f:then>
|
||||||
<f:else>
|
<f:else>
|
||||||
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
|
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
|
||||||
title="Reisen-Alert"
|
title="Reisen-Alert"
|
||||||
class="button button--small bg-gray-300">
|
class="button button--small button--muted">
|
||||||
Reisen-Alert
|
Reisen-Alert
|
||||||
</a>
|
</a>
|
||||||
</f:else>
|
</f:else>
|
||||||
|
|||||||
Reference in New Issue
Block a user