From 21e219ed1f57042002b8a06ef6b3f97a071b712e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 5 May 2022 12:53:23 +0200
Subject: [PATCH] Add missing styles for snowreport table

---
 .../Private/Templates/Snowreport/List.html    | 69 ++++++++++++++-----
 1 file changed, 52 insertions(+), 17 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Snowreport/List.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Snowreport/List.html
index 42293da9..5bfa4c92 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Snowreport/List.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Snowreport/List.html
@@ -6,34 +6,67 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <div class="table-responsive">
-            <table class="table table-striped table-condensed">
+        <ep:container data="{data}">
+        <div class="w-full max-w-full overflow-x-scroll md:overflow-x-auto">
+            <table class="w-full mb-4 bg-gray-200">
+                <thead>
                 <tr>
-                    <th>Gebiet</th>
-                    <th>Berg/Tal</th>
-                    <th>Qualität</th>
-                    <th>Geöffnete Lifte</th>
-                    <th>Letzter Schneefall</th>
-                    <th>Letzte Akt.</th>
+                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                        Gebiet
+                    </th>
+                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                        Berg/Tal
+                    </th>
+                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                        Qualität
+                    </th>
+                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                        Geöffnete Lifte
+                    </th>
+                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                        Letzter Schneefall
+                    </th>
+                    <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
+                        Letzte Akt.
+                    </th>
                 </tr>
+                </thead>
+                <tbody>
                 <f:for each="{list}" as="snowreport">
-                    <tr>
-                        <td>
-                            <f:link.typolink parameter="{snowreport.regionDetailPage}" title="{snowreport.regionName}">{snowreport.regionName}</f:link.typolink><br>
-                            <f:link.typolink parameter="{snowreport.countryDetailPage}" title="{snowreport.countryName}">{snowreport.countryName}</f:link.typolink>
+                    <tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100">
+                        <td class="border-r border-gray-200 px-2 py-1 md:p-2">
+                            <f:link.typolink parameter="{snowreport.regionDetailPage}"
+                                             title="{snowreport.regionName}"
+                                             class="text-ep-primary">
+                                {snowreport.regionName}
+                            </f:link.typolink>
+                            <br>
+                            <f:link.typolink parameter="{snowreport.countryDetailPage}"
+                                             title="{snowreport.countryName}"
+                                             class="text-ep-primary">
+                                {snowreport.countryName}
+                            </f:link.typolink>
                         </td>
                         <f:if condition="{snowreport.inSeason}">
                             <f:then>
-                                <td>{snowreport.snow_level_mountain -> v:or(alternative: '-')}/{snowreport.snow_level_valley -> v:or(alternative: '-')} cm</td>
-                                <td>{snowreport.snow_quality}</td>
-                                <td>
+                                <td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
+                                    {snowreport.snow_level_mountain -> v:or(alternative: '-')}/{snowreport.snow_level_valley -> v:or(alternative: '-')} cm
+                                </td>
+                                <td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
+                                    {snowreport.snow_quality}
+                                </td>
+                                <td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
                                     <f:if condition="{snowreport.lifts_opened} > 0">
                                         <f:then>{snowreport.lifts_opened}/{snowreport.lifts_total}</f:then>
                                         <f:else>k. A.</f:else>
                                     </f:if>
                                 </td>
-                                <td>{f:if(condition: snowreport.last_snowfall, then: '{snowreport.last_snowfall -> f:format.date(format: \'%d.%m.%Y\')}', else: '-')}</td>
-                                <td>{snowreport.last_update -> f:format.date(format: '%d.%m.%Y')}</td>
+                                <td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
+                                    {f:if(condition: snowreport.last_snowfall, then: '{snowreport.last_snowfall -> f:format.date(format: \'%d.%m.%Y\')}', else: '-')}
+                                </td>
+                                <td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
+                                    {snowreport.last_update -> f:format.date(format: '%d.%m.%Y')}
+                                </td>
                             </f:then>
                             <f:else>
                                 <td colspan="5" style="text-align: center; vertical-align: middle">Saison vom {snowreport.seasonStart -> f:format.date(format: '%d.%m.%Y')} bis {snowreport.seasonEnd -> f:format.date(format: '%d.%m.%Y')}</td>
@@ -41,8 +74,10 @@
                         </f:if>
                     </tr>
                 </f:for>
+                </tbody>
             </table>
         </div>
+        </ep:container>
     </f:section>
 
 </html>