EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve snowreport layout on mobile devices

Browse Source
This commit is contained in:
Björn Fromme
2022-11-09 21:04:20 +01:00
parent ea14db28b8
commit 5c79575411
1 changed files with 34 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Snowreport/List.html
+34 -64
View File
@@ -7,76 +7,46 @@
<f:section name="Main"> <f:section name="Main">
<ep:container data="{data}"> <ep:container data="{data}">
<div class="w-full max-w-full overflow-x-scroll md:overflow-x-auto"> <div class="flex flex-col space-y-2">
<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>
<f:for each="{list}" as="snowreport"> <f:for each="{list}" as="snowreport">
<tr class="odd:bg-zinc-50 hover:bg-zinc-100 odd:hover:bg-zinc-100"> <div class="grid md:grid-cols-3 md:gap-y-0">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"> <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}" <f:link.typolink parameter="{snowreport.regionDetailPage}"
title="{snowreport.regionName}" title="{snowreport.regionName}"
class="text-ep-primary"> class="text-white uppercase text-lg">
{snowreport.regionName} {snowreport.regionName}
</f:link.typolink> </f:link.typolink>
<br> </div>
<f:link.typolink parameter="{snowreport.countryDetailPage}" <div class="md:col-span-2 bg-ep-primary-dark/20 p-2">
title="{snowreport.countryName}" <f:if condition="{snowreport.inSeason}">
class="text-ep-primary"> <f:then>
{snowreport.countryName} <ul class="flex flex-col space-y-1">
</f:link.typolink> <li>
</td> <strong>Berg/Tal:</strong> {snowreport.snow_level_mountain -> v:or(alternative: '-')}/{snowreport.snow_level_valley -> v:or(alternative: '-')} cm
<f:if condition="{snowreport.inSeason}"> </li>
<f:then> <li>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center"> <strong>Qualität:</strong> {snowreport.snow_quality}
{snowreport.snow_level_mountain -> v:or(alternative: '-')}/{snowreport.snow_level_valley -> v:or(alternative: '-')} cm </li>
</td> <li>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center"> <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>
{snowreport.snow_quality} </li>
</td> <li>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center"> <strong>Letzter Schneefall:</strong> {f:if(condition: snowreport.last_snowfall, then: '{snowreport.last_snowfall -> f:format.date(format: \'%d.%m.%Y\')}', else: 'keine Angabe')}
<f:if condition="{snowreport.lifts_opened} > 0"> </li>
<f:then>{snowreport.lifts_opened}/{snowreport.lifts_total}</f:then> <li>
<f:else>k. A.</f:else> <strong>Letzte Akt.:</strong> {snowreport.last_update -> f:format.date(format: '%d.%m.%Y')}
</f:if> </li>
</td> </ul>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center"> </f:then>
{f:if(condition: snowreport.last_snowfall, then: '{snowreport.last_snowfall -> f:format.date(format: \'%d.%m.%Y\')}', else: '-')} <f:else>
</td> Saison vom {snowreport.seasonStart -> f:format.date(format: '%d.%m.%Y')} bis {snowreport.seasonEnd -> f:format.date(format: '%d.%m.%Y')}
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center"> </f:else>
{snowreport.last_update -> f:format.date(format: '%d.%m.%Y')} </f:if>
</td> </div>
</f:then> </div>
<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>
</f:for> </f:for>
</tbody> </div>
</table>
</div>
</ep:container> </ep:container>
</f:section> </f:section>