From 59ff6ffe6df11493aaafd10f979455faa17aade0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Fri, 17 Nov 2023 12:08:27 +0100
Subject: [PATCH] fix: avoid gaps in table layout in case service is not
 available

---
 .../Templates/AjaxTable/Datestable.html       | 58 +++++++++++--------
 .../Templates/AjaxTable/Pricetable.html       | 56 +++++++++++-------
 2 files changed, 70 insertions(+), 44 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
index 7c75f604..694b4b0a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
@@ -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"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
index d4d7c7c2..44bfa8c7 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
@@ -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">