feat: hide included services column in tables when not applicable
This commit is contained in:
Björn Fromme
@@ -22,9 +22,11 @@
|
||||
<th class="text-left">
|
||||
Preis/Pers.
|
||||
</th>
|
||||
<th class="text-left">
|
||||
inkl.
|
||||
</th>
|
||||
<f:if condition="{hasIncludedServices}">
|
||||
<th class="text-left">
|
||||
inkl.
|
||||
</th>
|
||||
</f:if>
|
||||
<th></th>
|
||||
<th class="hidden lg:table-cell"></th>
|
||||
</tr>
|
||||
@@ -58,25 +60,27 @@
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="px-2 py-1 border border-zinc-200">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<span data-cooltipz-dir="top"
|
||||
aria-label="Busfahrt"
|
||||
role="tooltip"
|
||||
data-pricetable-target="busIcon"
|
||||
data-bus-included="{row.busIncluded}"
|
||||
data-bus-price="{row.busPrice}">
|
||||
{ep:icon(icon: 'bus', class: 'w-4 h-4 md:w-5 md:h-5')}
|
||||
</span>
|
||||
</f:if>
|
||||
<f:if condition="{row.skipassIncluded}">
|
||||
<span data-cooltipz-dir="top"
|
||||
aria-label="Skipass"
|
||||
role="tooltip">
|
||||
{ep:icon(icon: 'tag', class: 'w-4 h-4 md:w-5 md:h-5')}
|
||||
</span>
|
||||
</f:if>
|
||||
</td>
|
||||
<f:if condition="{hasIncludedServices}">
|
||||
<td class="px-2 py-1 border border-zinc-200">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<span data-cooltipz-dir="top"
|
||||
aria-label="Busfahrt"
|
||||
role="tooltip"
|
||||
data-pricetable-target="busIcon"
|
||||
data-bus-included="{row.busIncluded}"
|
||||
data-bus-price="{row.busPrice}">
|
||||
{ep:icon(icon: 'bus', class: 'w-4 h-4 md:w-5 md:h-5')}
|
||||
</span>
|
||||
</f:if>
|
||||
<f:if condition="{row.skipassIncluded}">
|
||||
<span data-cooltipz-dir="top"
|
||||
aria-label="Skipass"
|
||||
role="tooltip">
|
||||
{ep:icon(icon: 'tag', class: 'w-4 h-4 md:w-5 md:h-5')}
|
||||
</span>
|
||||
</f:if>
|
||||
</td>
|
||||
</f:if>
|
||||
<td class="px-2 py-1 border border-zinc-200">
|
||||
<f:if condition="{row.optionalServices} && {row.available}">
|
||||
<button type="button"
|
||||
|
||||
+54
-50
@@ -35,9 +35,11 @@
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Nächte
|
||||
</th>
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
inklusive
|
||||
</th>
|
||||
<f:if condition="{hasIncludedServices}">
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
inklusive
|
||||
</th>
|
||||
</f:if>
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
ab
|
||||
</th>
|
||||
@@ -76,54 +78,56 @@
|
||||
{row.nights}
|
||||
</span>
|
||||
</td>
|
||||
<td class="border-r border-zinc-200 px-2 p-1">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="grid grid-cols-2">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<f:then>
|
||||
<span class="block p-1"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Busfahrt inklusive"
|
||||
role="tooltip"
|
||||
data-pricetable-target="busIcon"
|
||||
data-bus-included="{row.busIncluded}"
|
||||
data-bus-price="{row.busPrice}">
|
||||
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block"></span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{row.skipassIncluded}">
|
||||
<f:then>
|
||||
<span class="block p-1"
|
||||
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 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block"></span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{hasIncludedServices}">
|
||||
<td class="border-r border-zinc-200 px-2 p-1">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="grid grid-cols-2">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<f:then>
|
||||
<span class="block p-1"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Busfahrt inklusive"
|
||||
role="tooltip"
|
||||
data-pricetable-target="busIcon"
|
||||
data-bus-included="{row.busIncluded}"
|
||||
data-bus-price="{row.busPrice}">
|
||||
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block"></span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{row.skipassIncluded}">
|
||||
<f:then>
|
||||
<span class="block p-1"
|
||||
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 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block"></span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="text-ep-primary-light ser:text-ser-primary col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
|
||||
data-action="pricetable#openModal"
|
||||
data-pricetable-type-param="services"
|
||||
data-pricetable-uid-param="{row.dateUid}"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Alle Inklusivleistungen anzeigen">
|
||||
Leistungen
|
||||
</button>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="text-ep-primary-light ser:text-ser-primary col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
|
||||
data-action="pricetable#openModal"
|
||||
data-pricetable-type-param="services"
|
||||
data-pricetable-uid-param="{row.dateUid}"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Alle Inklusivleistungen anzeigen">
|
||||
Leistungen
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</td>
|
||||
</f:if>
|
||||
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
|
||||
<f:if condition="{row.pseudoPrice}">
|
||||
<span class="block text-sm line-through">
|
||||
|
||||
+50
-46
@@ -28,14 +28,16 @@
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
Zimmertyp {dateRange}
|
||||
</th>
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
<span class="lg:hidden">
|
||||
inkl.
|
||||
</span>
|
||||
<span class="hidden lg:block">
|
||||
inklusive
|
||||
</span>
|
||||
</th>
|
||||
<f:if condition="{hasIncludedServices}">
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
<span class="lg:hidden">
|
||||
inkl.
|
||||
</span>
|
||||
<span class="hidden lg:block">
|
||||
inklusive
|
||||
</span>
|
||||
</th>
|
||||
</f:if>
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
optional
|
||||
</th>
|
||||
@@ -71,45 +73,47 @@
|
||||
</f:else>
|
||||
</f:if>
|
||||
</td>
|
||||
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
|
||||
<div class="flex items-center justify-around space-x-1">
|
||||
<div class="grid grid-cols-2">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<f:then>
|
||||
<span class="block p-1"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Busfahrt inklusive"
|
||||
role="tooltip"
|
||||
data-pricetable-target="busIcon"
|
||||
data-bus-included="{row.busIncluded}"
|
||||
data-bus-price="{row.busPrice}">
|
||||
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block"></span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{row.skipassIncluded}">
|
||||
<f:then>
|
||||
<span class="block p-1"
|
||||
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 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block"></span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{hasIncludedServices}">
|
||||
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
|
||||
<div class="flex items-center justify-around space-x-1">
|
||||
<div class="grid grid-cols-2">
|
||||
<f:if condition="{row.busIncluded}">
|
||||
<f:then>
|
||||
<span class="block p-1"
|
||||
data-cooltipz-dir="top"
|
||||
aria-label="Busfahrt inklusive"
|
||||
role="tooltip"
|
||||
data-pricetable-target="busIcon"
|
||||
data-bus-included="{row.busIncluded}"
|
||||
data-bus-price="{row.busPrice}">
|
||||
<svg class="w-4 h-4 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block"></span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<f:if condition="{row.skipassIncluded}">
|
||||
<f:then>
|
||||
<span class="block p-1"
|
||||
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 md:w-5 md:h-5">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<span class="block"></span>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</td>
|
||||
</f:if>
|
||||
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
|
||||
<f:if condition="{row.hasOptionalServices} && {row.available}">
|
||||
<button type="button"
|
||||
|
||||
Reference in New Issue
Block a user