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
+12
View File
@@ -72,7 +72,9 @@
</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">
<div class="grid grid-cols-2">
<f:if condition="{row.busIncluded}"> <f:if condition="{row.busIncluded}">
<f:then>
<span class="block p-1" <span class="block p-1"
data-cooltipz-dir="top" data-cooltipz-dir="top"
aria-label="Busfahrt inklusive" aria-label="Busfahrt inklusive"
@@ -84,8 +86,13 @@
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
</svg> </svg>
</span> </span>
</f:then>
<f:else>
<span class="block"></span>
</f:else>
</f:if> </f:if>
<f:if condition="{row.skipassIncluded}"> <f:if condition="{row.skipassIncluded}">
<f:then>
<span class="block p-1" <span class="block p-1"
data-cooltipz-dir="top" 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')}"
@@ -94,7 +101,12 @@
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
</svg> </svg>
</span> </span>
</f:then>
<f:else>
<span class="block"></span>
</f:else>
</f:if> </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
+18 -4
View File
@@ -73,9 +73,12 @@
</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">
<div class="grid grid-cols-2">
<f:if condition="{row.busIncluded}"> <f:if condition="{row.busIncluded}">
<span data-cooltipz-dir="top" <f:then>
aria-label="Busfahrt" <span class="block p-1"
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}"
@@ -84,17 +87,28 @@
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
</svg> </svg>
</span> </span>
</f:then>
<f:else>
<span class="block"></span>
</f:else>
</f:if> </f:if>
<f:if condition="{row.skipassIncluded}"> <f:if condition="{row.skipassIncluded}">
<span data-cooltipz-dir="top" <f:then>
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket', else: 'Skipass')}" <span class="block p-1"
data-cooltipz-dir="top"
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
role="tooltip"> role="tooltip">
<svg class="w-4 h-4 md:w-5 md:h-5"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
</svg> </svg>
</span> </span>
</f:then>
<f:else>
<span class="block"></span>
</f:else>
</f:if> </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">
<f:if condition="{row.hasOptionalServices} && {row.available}"> <f:if condition="{row.hasOptionalServices} && {row.available}">