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>
<td class="border-r border-zinc-200 px-2 p-1"> <td class="border-r border-zinc-200 px-2 p-1">
<div class="flex flex-wrap items-center"> <div class="flex flex-wrap items-center">
<f:if condition="{row.busIncluded}"> <div class="grid grid-cols-2">
<span class="block p-1" <f:if condition="{row.busIncluded}">
data-cooltipz-dir="top" <f:then>
aria-label="Busfahrt inklusive" <span class="block p-1"
role="tooltip" data-cooltipz-dir="top"
data-pricetable-target="busIcon" aria-label="Busfahrt inklusive"
data-bus-included="{row.busIncluded}" role="tooltip"
data-bus-price="{row.busPrice}"> data-pricetable-target="busIcon"
<svg class="w-4 h-4 md:w-5 md:h-5"> data-bus-included="{row.busIncluded}"
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use> data-bus-price="{row.busPrice}">
</svg> <svg class="w-4 h-4 md:w-5 md:h-5">
</span> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
</f:if> </svg>
<f:if condition="{row.skipassIncluded}"> </span>
<span class="block p-1" </f:then>
data-cooltipz-dir="top" <f:else>
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}" <span class="block"></span>
role="tooltip"> </f:else>
<svg class="w-4 h-4 md:w-5 md:h-5"> </f:if>
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use> <f:if condition="{row.skipassIncluded}">
</svg> <f:then>
</span> <span class="block p-1"
</f:if> 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" <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" 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-action="pricetable#openModal"
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
+35 -21
View File
@@ -73,27 +73,41 @@
</td> </td>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"> <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="flex items-center justify-around space-x-1">
<f:if condition="{row.busIncluded}"> <div class="grid grid-cols-2">
<span data-cooltipz-dir="top" <f:if condition="{row.busIncluded}">
aria-label="Busfahrt" <f:then>
role="tooltip" <span class="block p-1"
data-pricetable-target="busIcon" data-cooltipz-dir="top"
data-bus-included="{row.busIncluded}" aria-label="Busfahrt inklusive"
data-bus-price="{row.busPrice}"> role="tooltip"
<svg class="w-4 h-4 md:w-5 md:h-5"> data-pricetable-target="busIcon"
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use> data-bus-included="{row.busIncluded}"
</svg> data-bus-price="{row.busPrice}">
</span> <svg class="w-4 h-4 md:w-5 md:h-5">
</f:if> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
<f:if condition="{row.skipassIncluded}"> </svg>
<span data-cooltipz-dir="top" </span>
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket', else: 'Skipass')}" </f:then>
role="tooltip"> <f:else>
<svg class="w-4 h-4 md:w-5 md:h-5"> <span class="block"></span>
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use> </f:else>
</svg> </f:if>
</span> <f:if condition="{row.skipassIncluded}">
</f:if> <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>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center"> <td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">