From 5c795754117b375d36b2a174efd453875e464bec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 9 Nov 2022 21:04:20 +0100
Subject: [PATCH] Improve snowreport layout on mobile devices

---
 .../Private/Templates/Snowreport/List.html    | 98 +++++++------------
 1 file changed, 34 insertions(+), 64 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 bc2fad3f..1da3b322 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
@@ -7,76 +7,46 @@
 
     <f:section name="Main">
         <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-zinc-200">
-                <thead>
-                <tr>
-                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
-                        Gebiet
-                    </th>
-                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
-                        Berg/Tal
-                    </th>
-                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
-                        Qualität
-                    </th>
-                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
-                        Geöffnete Lifte
-                    </th>
-                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
-                        Letzter Schneefall
-                    </th>
-                    <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
-                        Letzte Akt.
-                    </th>
-                </tr>
-                </thead>
-                <tbody>
+            <div class="flex flex-col space-y-2">
                 <f:for each="{list}" as="snowreport">
-                    <tr class="odd:bg-zinc-50 hover:bg-zinc-100 odd:hover:bg-zinc-100">
-                        <td class="border-r border-zinc-200 px-2 py-1 md:p-2">
+                    <div class="grid md:grid-cols-3 md:gap-y-0">
+                        <div class="md:col-span-1 bg-ep-primary-dark p-2 flex items-start space-x-2">
+                            {ep:icon(icon: 'flag-{snowreport.countryCode -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6')}
                             <f:link.typolink parameter="{snowreport.regionDetailPage}"
                                              title="{snowreport.regionName}"
-                                             class="text-ep-primary">
+                                             class="text-white uppercase text-lg">
                                 {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 class="border-r border-zinc-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-zinc-200 px-2 py-1 md:p-2 text-center">
-                                    {snowreport.snow_quality}
-                                </td>
-                                <td class="border-r border-zinc-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 class="border-r border-zinc-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-zinc-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>
-                            </f:else>
-                        </f:if>
-                    </tr>
+                        </div>
+                        <div class="md:col-span-2 bg-ep-primary-dark/20 p-2">
+                            <f:if condition="{snowreport.inSeason}">
+                                <f:then>
+                                    <ul class="flex flex-col space-y-1">
+                                        <li>
+                                            <strong>Berg/Tal:</strong> {snowreport.snow_level_mountain -> v:or(alternative: '-')}/{snowreport.snow_level_valley -> v:or(alternative: '-')} cm
+                                        </li>
+                                        <li>
+                                            <strong>Qualität:</strong> {snowreport.snow_quality}
+                                        </li>
+                                        <li>
+                                            <strong>Geöffnete Lifte:</strong> <f:if condition="{snowreport.lifts_opened} > 0"><f:then>{snowreport.lifts_opened}/{snowreport.lifts_total}</f:then><f:else>keine Angabe</f:else></f:if>
+                                        </li>
+                                        <li>
+                                            <strong>Letzter Schneefall:</strong> {f:if(condition: snowreport.last_snowfall, then: '{snowreport.last_snowfall -> f:format.date(format: \'%d.%m.%Y\')}', else: 'keine Angabe')}
+                                        </li>
+                                        <li>
+                                            <strong>Letzte Akt.:</strong> {snowreport.last_update -> f:format.date(format: '%d.%m.%Y')}
+                                        </li>
+                                    </ul>
+                                </f:then>
+                                <f:else>
+                                    Saison vom {snowreport.seasonStart -> f:format.date(format: '%d.%m.%Y')} bis {snowreport.seasonEnd -> f:format.date(format: '%d.%m.%Y')}
+                                </f:else>
+                            </f:if>
+                        </div>
+                    </div>
                 </f:for>
-                </tbody>
-            </table>
-        </div>
+            </div>
         </ep:container>
     </f:section>