From 92864ba9f66c9e54e900b4327507c9b87cb11e45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 21 Dec 2021 17:14:10 +0100
Subject: [PATCH] Improve dates- and pricetable layout in mobile view

---
 .../Private/Templates/AjaxTable/Datestable.html      | 12 ++++++------
 .../Private/Templates/AjaxTable/Pricetable.html      |  6 +++---
 .../Resources/Private/Templates/Product/Detail.html  |  2 +-
 3 files changed, 10 insertions(+), 10 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 1df548f8..0eaa96bd 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
@@ -39,7 +39,7 @@
                 </thead>
                 <tbody>
                 <f:for each="{dates}" as="row" iteration="iteration">
-                    <tr class="odd:bg-ep-primary-bg hover:bg-gray-100 odd:hover:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
+                    <tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
                         data-pricetable-target="row">
                         <td class="border-r border-gray-200 px-2 py-1 md:p-2">
                             <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
@@ -105,7 +105,7 @@
                                     {row.pseudoPrice} €
                                 </span>
                             </f:if>
-                            <span class="font-bold normal-case whitespace-nowrap"
+                            <span class="font-bold normal-case text-sm md:text-base whitespace-nowrap"
                                   data-pricetable-target="price"
                                   data-room="{row.minPrice}"
                                   data-bus="{row.busPrice}"
@@ -120,10 +120,10 @@
                                             class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light', else: 'text-gray-300')}"
                                             data-action="product-details#loadPrices"
                                             data-date-uid="{row.dateUid}">
-                                        <svg class="w-6 h-6">
+                                        <svg class="w-6 h-6 hidden md:block">
                                             <use href="#icon-arrow-circle-right"></use>
                                         </svg>
-                                        <span class="font-bold text-sm uppercase">
+                                        <span class="font-bold text-xs md:text-sm uppercase">
                                             Infos &amp; buchen
                                         </span>
                                     </button>
@@ -132,10 +132,10 @@
                                     <a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
                                        title="Reisen-Alert"
                                        class="flex space-x-1 items-center text-ep-primary-light">
-                                        <svg class="w-6 h-6">
+                                        <svg class="w-6 h-6 hidden md:block">
                                             <use href="#icon-arrow-circle-right"></use>
                                         </svg>
-                                        <span class="font-bold text-sm uppercase">
+                                        <span class="font-bold text-xs md:text-sm uppercase">
                                             Reisen-Alert
                                         </span>
                                     </a>
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 b486a6bd..e3d3d5a2 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
@@ -44,7 +44,7 @@
                 </thead>
                 <tbody>
                 <f:for each="{prices}" as="row">
-                    <tr class="odd:bg-ep-primary-bg hover:bg-gray-100 odd:hover:bg-gray-100"
+                    <tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100"
                         data-pricetable-target="row">
                         <td class="border-r border-gray-200 px-2 py-1 md:p-2">
                             <f:if condition="{row.showBookingButton} && {row.available}">
@@ -96,14 +96,14 @@
                         <td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
                             <f:if condition="{row.hasOptionalServices} && {row.available}">
                                 <button type="button"
-                                        class="text-ep-primary-light text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
+                                        class="text-ep-primary-light text-sm md:text-base text-left leading-none p-1"
                                         data-action="pricetable#openModal"
                                         data-type="options"
                                         data-uid="{row.roomUid}"
                                         data-cooltipz-dir="top"
                                         aria-label="Alle Zusatzleistungen anzeigen"
                                         role="tooltip">
-                                    Zusatzleistungen
+                                    Zusatz&shy;leistungen
                                 </button>
                             </f:if>
                         </td>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
index cef46a74..1e6e0835 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
@@ -31,7 +31,7 @@
                     </div>
                     <div id="main" class="w-full lg:w-2/3">
                         <div class="lg:pr-4 flex flex-col space-y-4">
-                            <div class="grid grid-cols-3 md:grid-cols-6 gap-px uppercase text-white">
+                            <div class="grid grid-cols-3 md:grid-cols-6 gap-px uppercase text-white text-sm md:text-base">
                                 <f:if condition="{settings.hotelOnTop}">
                                     <f:then>
                                         <button type="button"