From 94520a76c2f2669c980d2b6be93d975b23a5201c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 29 Sep 2021 18:15:04 +0200
Subject: [PATCH] Improve dates table layout

---
 .../Assets/scss/components/_buttons.scss      |   2 +-
 .../Templates/AjaxTable/Datestable.html       | 134 ++++++++----------
 tailwind.config.js                            |   2 +-
 3 files changed, 60 insertions(+), 78 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
index dc486b65..f693dd72 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
@@ -1,5 +1,5 @@
 .button {
-    @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8;
+    @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
     @apply uppercase leading-none text-center;
     @apply transition-colors outline-none focus:outline-none;
     @apply bg-ep-secondary text-white;
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 917ebe54..0f024edb 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
@@ -12,34 +12,32 @@
         <div data-controller="pricetable">
 
             <f:if condition="{hasSurcharge} || {hasDiscount}">
-                <div class="w-full flex justify-end mb-2">
-                    <f:if condition="{hasSurcharge}">
-                        <button data-action="pricetable#toggleSurcharge"
-                                class="flex items-center space-x-1 focus:outline-none text-ep-primary">
-                            <svg class="w-4 h-4">
-                                <use href="#icon-arrow-circle-right"></use>
-                            </svg>
-                            <span data-pricetable-target="surchargeToggleLabel"
-                                  data-label-default="Preise für Eigenanreise anzeigen"
-                                  data-label-alt="Preise für Busanreise anzeigen">
-                                Preise für Eigenanreise anzeigen
-                            </span>
-                        </button>
-                    </f:if>
-                    <f:if condition="{hasDiscount}">
-                        <button data-action="pricetable#toggleDiscount"
-                                class="flex items-center space-x-1 focus:outline-none text-ep-primary">
-                            <svg class="w-4 h-4">
-                                <use href="#icon-arrow-circle-right"></use>
-                            </svg>
-                            <span data-pricetable-target="discountToggleLabel"
-                                  data-label-default="Preise für Busanreise anzeigen"
-                                  data-label-alt="Preise für Eigenanreise anzeigen">
-                                Preise für Busanreise anzeigen
-                            </span>
-                        </button>
-                   </f:if>
-                </div>
+                <f:if condition="{hasSurcharge}">
+                    <button data-action="pricetable#toggleSurcharge"
+                            class="flex items-center space-x-1 focus:outline-none text-ep-primary mb-2">
+                        <svg class="w-4 h-4">
+                            <use href="#icon-arrow-circle-right"></use>
+                        </svg>
+                        <span data-pricetable-target="surchargeToggleLabel"
+                              data-label-default="Preise für Eigenanreise anzeigen"
+                              data-label-alt="Preise für Busanreise anzeigen">
+                            Preise für Eigenanreise anzeigen
+                        </span>
+                    </button>
+                </f:if>
+                <f:if condition="{hasDiscount}">
+                    <button data-action="pricetable#toggleDiscount"
+                            class="flex items-center space-x-1 focus:outline-none text-ep-primary mb-2">
+                        <svg class="w-4 h-4">
+                            <use href="#icon-arrow-circle-right"></use>
+                        </svg>
+                        <span data-pricetable-target="discountToggleLabel"
+                              data-label-default="Preise für Busanreise anzeigen"
+                              data-label-alt="Preise für Eigenanreise anzeigen">
+                            Preise für Busanreise anzeigen
+                        </span>
+                    </button>
+               </f:if>
             </f:if>
 
             <table class="w-full border-collapse mb-4">
@@ -55,13 +53,13 @@
                             </svg>
                         </span>
                     </th>
-                    <th class="p-1 text-left whitespace-nowrap">
-                        Preis ab
+                    <th class="p-1 text-left">
+                        ab
                     </th>
                     <th class="p-1 text-left">
                         inkl.
                     </th>
-                    <th class="hidden lg:table-cell"></th>
+                    <th></th>
                 </tr>
                 </thead>
                 <tbody>
@@ -71,43 +69,31 @@
                         <td class="px-2 py-1 md:p-2">
                             <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
                                 <f:then>
-                                    <button class="text-left text-ep-primary-light text-sm md:text-base"
+                                    <button class="text-left text-ep-primary-light text-xs sm:text-sm md:text-base whitespace-nowrap"
                                             data-action="product-details#loadPrices"
                                             data-date-uid="{row.dateUid}">
                                         {row.dateStart} - {row.dateEnd}
                                     </button>
-                                    <div class="md:hidden">
-                                        <button class="button button--small sm:hidden"
-                                                data-action="product-details#loadPrices"
-                                                data-date-uid="{row.dateUid}">
-                                            Details
-                                        </button>
-                                        <a href="{row.bookingUrl}" target="_blank"
-                                           class="button button--small bg-green-500 border-green-500 sm:hidden">
-                                            Buchen
-                                        </a>
-                                    </div>
                                 </f:then>
                                 <f:else>
-                                    <span class="block text-sm md:text-base">
+                                    <span class="block text-xs sm:text-sm md:text-base">
                                         {row.dateStart} - {row.dateEnd}
                                     </span>
-                                    <span class="block sm:hidden py-1 text-xs sm:text-sm text-gray-500 uppercase">
-                                        ausgebucht
-                                    </span>
                                 </f:else>
                             </f:if>
                         </td>
                         <td class="px-2 py-1 md:p-2">
-                            {row.nights}
+                            <span class="block text-xs sm:text-sm md:text-base">
+                                {row.nights}
+                            </span>
                         </td>
                         <td class="px-2 py-1 md:p-2">
                             <f:if condition="{row.pseudoPrice}">
-                                <span class="text-sm line-through">
+                                <span class="block text-sm line-through">
                                     {row.pseudoPrice} €
                                 </span>
                             </f:if>
-                            <span class="font-bold text-sm md:text-base"
+                            <span class="font-bold text-xs sm:text-sm md:text-base whitespace-nowrap"
                                 data-pricetable-target="price"
                                 data-room="{row.minPrice}"
                                 data-bus="{row.busPrice}"
@@ -118,31 +104,27 @@
                         <td class="px-2 py-1 md:p-2">
                             <div class="flex items-center space-x-2">
                                 <f:if condition="{row.busIncluded}">
-                                    <div class="hidden sm:block">
-                                        <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">
-                                              <use href="#icon-bus"></use>
-                                          </svg>
-                                        </span>
-                                    </div>
+                                    <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">
+                                          <use href="#icon-bus"></use>
+                                      </svg>
+                                    </span>
                                 </f:if>
                                 <f:if condition="{row.skipassIncluded}">
-                                    <div class="hidden sm:block">
-                                        <span 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">
-                                                <use href="#icon-tag"></use>
-                                            </svg>
-                                        </span>
-                                    </div>
+                                    <span 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">
+                                            <use href="#icon-tag"></use>
+                                        </svg>
+                                    </span>
                                 </f:if>
-                                <button class="button button--light button--small hidden md:block"
+                                <button class="button button--small bg-ep-primary hidden md:block"
                                         data-action="pricetable#openModal"
                                         data-type="services"
                                         data-uid="{row.dateUid}"
@@ -161,8 +143,8 @@
                                 </button>
                             </div>
                         </td>
-                        <td class="px-2 py-1 md:p-2 hidden sm:table-cell">
-                            <div class="grid grid-cols-2 gap-2">
+                        <td class="px-2 py-1 md:p-2">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                 <button class="button button--small"
                                         data-action="product-details#loadPrices"
                                         data-date-uid="{row.dateUid}">
@@ -171,7 +153,7 @@
                                 <f:if condition="{row.available} && {row.showBookingButton}">
                                     <a href="{row.bookingUrl}"
                                        target="_blank"
-                                       class="button button--small bg-green-500 border-green-500">
+                                       class="button button--small bg-green-500">
                                         Buchen
                                     </a>
                                 </f:if>
@@ -198,7 +180,7 @@
             </table>
 
             <f:if condition="{dates -> f:count()} > 5 || {altProductLink}">
-                <div class="w-full flex justify-between pb-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 pb-4">
                     <f:if condition="{dates -> f:count()} > 5">
                         <button class="flex items-center space-x-1 focus:outline-none text-ep-primary"
                                 data-action="pricetable#toggleRows">
diff --git a/tailwind.config.js b/tailwind.config.js
index bfc30cf3..4e7d3ca6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -44,7 +44,7 @@ module.exports = {
         },
         extend: {
             fontSize: {
-                'xs': '.6rem',
+                'xs': '.8rem',
             },
             colors: {
                 overlay: {