EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Improve dates table layout

Browse Source
This commit is contained in:
Björn Fromme
2021-10-13 16:17:37 +02:00
parent ce107a4aa6
commit 00bcddf98b
1 changed files with 42 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+38 -40
View File
@@ -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 &gt;
<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.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}">
<f:if condition="{row.pseudoPrice}"> <f:if condition="{row.pseudoPrice}">
<span class="block text-sm line-through"> <span class="block text-sm line-through">
ab {row.pseudoPrice} € {row.pseudoPrice} €
</span> </span>
</f:if> </f:if>
<span class="font-bold normal-case whitespace-nowrap"> <span class="font-bold normal-case whitespace-nowrap"
ab data-pricetable-target="price"
<span data-pricetable-target="price"
data-room="{row.minPrice}" data-room="{row.minPrice}"
data-bus="{row.busPrice}" data-bus="{row.busPrice}"
data-discount="{row.discount}"> data-discount="{row.discount}">
{row.minPrice} {row.minPrice}
</span> </span>
</span> </td>
<td class="border border-gray-300 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')}"
data-action="product-details#loadPrices"
data-date-uid="{row.dateUid}">
Details
</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>