Improve dates table layout
This commit is contained in:
Björn Fromme
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
.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 cursor-pointer;
|
||||||
@apply uppercase leading-none text-center;
|
@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 text-white;
|
@apply bg-ep-secondary text-white;
|
||||||
|
|||||||
+58
-76
@@ -12,34 +12,32 @@
|
|||||||
<div data-controller="pricetable">
|
<div data-controller="pricetable">
|
||||||
|
|
||||||
<f:if condition="{hasSurcharge} || {hasDiscount}">
|
<f:if condition="{hasSurcharge} || {hasDiscount}">
|
||||||
<div class="w-full flex justify-end mb-2">
|
<f:if condition="{hasSurcharge}">
|
||||||
<f:if condition="{hasSurcharge}">
|
<button data-action="pricetable#toggleSurcharge"
|
||||||
<button data-action="pricetable#toggleSurcharge"
|
class="flex items-center space-x-1 focus:outline-none text-ep-primary mb-2">
|
||||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary">
|
<svg class="w-4 h-4">
|
||||||
<svg class="w-4 h-4">
|
<use href="#icon-arrow-circle-right"></use>
|
||||||
<use href="#icon-arrow-circle-right"></use>
|
</svg>
|
||||||
</svg>
|
<span data-pricetable-target="surchargeToggleLabel"
|
||||||
<span data-pricetable-target="surchargeToggleLabel"
|
data-label-default="Preise für Eigenanreise anzeigen"
|
||||||
data-label-default="Preise für Eigenanreise anzeigen"
|
data-label-alt="Preise für Busanreise anzeigen">
|
||||||
data-label-alt="Preise für Busanreise anzeigen">
|
Preise für Eigenanreise anzeigen
|
||||||
Preise für Eigenanreise anzeigen
|
</span>
|
||||||
</span>
|
</button>
|
||||||
</button>
|
</f:if>
|
||||||
</f:if>
|
<f:if condition="{hasDiscount}">
|
||||||
<f:if condition="{hasDiscount}">
|
<button data-action="pricetable#toggleDiscount"
|
||||||
<button data-action="pricetable#toggleDiscount"
|
class="flex items-center space-x-1 focus:outline-none text-ep-primary mb-2">
|
||||||
class="flex items-center space-x-1 focus:outline-none text-ep-primary">
|
<svg class="w-4 h-4">
|
||||||
<svg class="w-4 h-4">
|
<use href="#icon-arrow-circle-right"></use>
|
||||||
<use href="#icon-arrow-circle-right"></use>
|
</svg>
|
||||||
</svg>
|
<span data-pricetable-target="discountToggleLabel"
|
||||||
<span data-pricetable-target="discountToggleLabel"
|
data-label-default="Preise für Busanreise anzeigen"
|
||||||
data-label-default="Preise für Busanreise anzeigen"
|
data-label-alt="Preise für Eigenanreise anzeigen">
|
||||||
data-label-alt="Preise für Eigenanreise anzeigen">
|
Preise für Busanreise anzeigen
|
||||||
Preise für Busanreise anzeigen
|
</span>
|
||||||
</span>
|
</button>
|
||||||
</button>
|
</f:if>
|
||||||
</f:if>
|
|
||||||
</div>
|
|
||||||
</f:if>
|
</f:if>
|
||||||
|
|
||||||
<table class="w-full border-collapse mb-4">
|
<table class="w-full border-collapse mb-4">
|
||||||
@@ -55,13 +53,13 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<th class="p-1 text-left whitespace-nowrap">
|
<th class="p-1 text-left">
|
||||||
Preis ab
|
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></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -71,43 +69,31 @@
|
|||||||
<td class="px-2 py-1 md:p-2">
|
<td class="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"
|
<button class="text-left text-ep-primary-light text-xs sm:text-sm md:text-base whitespace-nowrap"
|
||||||
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}
|
||||||
</button>
|
</button>
|
||||||
<div class="md:hidden">
|
|
||||||
<button class="button button--small sm:hidden"
|
|
||||||
data-action="product-details#loadPrices"
|
|
||||||
data-date-uid="{row.dateUid}">
|
|
||||||
Details
|
|
||||||
</button>
|
|
||||||
<a href="{row.bookingUrl}" target="_blank"
|
|
||||||
class="button button--small bg-green-500 border-green-500 sm:hidden">
|
|
||||||
Buchen
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</f:then>
|
</f:then>
|
||||||
<f:else>
|
<f:else>
|
||||||
<span class="block text-sm md:text-base">
|
<span class="block text-xs sm:text-sm md:text-base">
|
||||||
{row.dateStart} - {row.dateEnd}
|
{row.dateStart} - {row.dateEnd}
|
||||||
</span>
|
</span>
|
||||||
<span class="block sm:hidden py-1 text-xs sm:text-sm text-gray-500 uppercase">
|
|
||||||
ausgebucht
|
|
||||||
</span>
|
|
||||||
</f:else>
|
</f:else>
|
||||||
</f:if>
|
</f:if>
|
||||||
</td>
|
</td>
|
||||||
<td class="px-2 py-1 md:p-2">
|
<td class="px-2 py-1 md:p-2">
|
||||||
{row.nights}
|
<span class="block text-xs sm:text-sm md:text-base">
|
||||||
|
{row.nights}
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="px-2 py-1 md:p-2">
|
<td class="px-2 py-1 md:p-2">
|
||||||
<f:if condition="{row.pseudoPrice}">
|
<f:if condition="{row.pseudoPrice}">
|
||||||
<span class="text-sm line-through">
|
<span class="block text-sm line-through">
|
||||||
{row.pseudoPrice} €
|
{row.pseudoPrice} €
|
||||||
</span>
|
</span>
|
||||||
</f:if>
|
</f:if>
|
||||||
<span class="font-bold text-sm md:text-base"
|
<span class="font-bold text-xs sm:text-sm md:text-base whitespace-nowrap"
|
||||||
data-pricetable-target="price"
|
data-pricetable-target="price"
|
||||||
data-room="{row.minPrice}"
|
data-room="{row.minPrice}"
|
||||||
data-bus="{row.busPrice}"
|
data-bus="{row.busPrice}"
|
||||||
@@ -118,31 +104,27 @@
|
|||||||
<td class="px-2 py-1 md:p-2">
|
<td class="px-2 py-1 md:p-2">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-2">
|
||||||
<f:if condition="{row.busIncluded}">
|
<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"
|
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-4 h-4">
|
||||||
<svg class="w-4 h-4">
|
<use href="#icon-bus"></use>
|
||||||
<use href="#icon-bus"></use>
|
</svg>
|
||||||
</svg>
|
</span>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{row.skipassIncluded}">
|
<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">
|
<svg class="w-4 h-4">
|
||||||
<svg class="w-4 h-4">
|
<use href="#icon-tag"></use>
|
||||||
<use href="#icon-tag"></use>
|
</svg>
|
||||||
</svg>
|
</span>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</f:if>
|
</f:if>
|
||||||
<button class="button button--light button--small hidden md:block"
|
<button class="button button--small bg-ep-primary hidden md:block"
|
||||||
data-action="pricetable#openModal"
|
data-action="pricetable#openModal"
|
||||||
data-type="services"
|
data-type="services"
|
||||||
data-uid="{row.dateUid}"
|
data-uid="{row.dateUid}"
|
||||||
@@ -161,8 +143,8 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="px-2 py-1 md:p-2 hidden sm:table-cell">
|
<td class="px-2 py-1 md:p-2">
|
||||||
<div class="grid grid-cols-2 gap-2">
|
<div class="grid grid-cols-1 sm: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}">
|
||||||
@@ -171,7 +153,7 @@
|
|||||||
<f:if condition="{row.available} && {row.showBookingButton}">
|
<f:if condition="{row.available} && {row.showBookingButton}">
|
||||||
<a href="{row.bookingUrl}"
|
<a href="{row.bookingUrl}"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="button button--small bg-green-500 border-green-500">
|
class="button button--small bg-green-500">
|
||||||
Buchen
|
Buchen
|
||||||
</a>
|
</a>
|
||||||
</f:if>
|
</f:if>
|
||||||
@@ -198,7 +180,7 @@
|
|||||||
</table>
|
</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="grid grid-cols-1 md:grid-cols-2 gap-2 pb-4">
|
||||||
<f:if condition="{dates -> f:count()} > 5">
|
<f:if condition="{dates -> f:count()} > 5">
|
||||||
<button class="flex items-center space-x-1 focus:outline-none text-ep-primary"
|
<button class="flex items-center space-x-1 focus:outline-none text-ep-primary"
|
||||||
data-action="pricetable#toggleRows">
|
data-action="pricetable#toggleRows">
|
||||||
|
|||||||
+1
-1
@@ -44,7 +44,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
fontSize: {
|
fontSize: {
|
||||||
'xs': '.6rem',
|
'xs': '.8rem',
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
overlay: {
|
overlay: {
|
||||||
|
|||||||
Reference in New Issue
Block a user