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">
<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>