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

fix: avoid gaps in table layout in case service is not available

Browse Source
This commit is contained in:
Björn Fromme
2023-11-17 12:08:27 +01:00
parent e9c708a648
commit 59ff6ffe6d
2 changed files with 70 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
+35 -23
View File
@@ -72,29 +72,41 @@
</td>
<td class="border-r border-zinc-200 px-2 p-1">
<div class="flex flex-wrap items-center">
<f:if condition="{row.busIncluded}">
<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:if>
<f:if condition="{row.skipassIncluded}">
<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:if>
<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"
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
+35 -21
View File
@@ -73,27 +73,41 @@
</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">
<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}">
<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:if>
<f:if condition="{row.skipassIncluded}">
<span data-cooltipz-dir="top"
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket', else: 'Skipass')}"
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:if>
<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>
</td>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">