Add missing styles for snowreport table

This commit is contained in:
Björn Fromme
2022-05-05 12:53:23 +02:00
parent d2a0a3eaf8
commit 21e219ed1f
@@ -6,34 +6,67 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="table-responsive"> <ep:container data="{data}">
<table class="table table-striped table-condensed"> <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> <tr>
<th>Gebiet</th> <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th>Berg/Tal</th> Gebiet
<th>Qualität</th> </th>
<th>Geöffnete Lifte</th> <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
<th>Letzter Schneefall</th> Berg/Tal
<th>Letzte Akt.</th> </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> </tr>
</thead>
<tbody>
<f:for each="{list}" as="snowreport"> <f:for each="{list}" as="snowreport">
<tr> <tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100">
<td> <td class="border-r border-gray-200 px-2 py-1 md:p-2">
<f:link.typolink parameter="{snowreport.regionDetailPage}" title="{snowreport.regionName}">{snowreport.regionName}</f:link.typolink><br> <f:link.typolink parameter="{snowreport.regionDetailPage}"
<f:link.typolink parameter="{snowreport.countryDetailPage}" title="{snowreport.countryName}">{snowreport.countryName}</f:link.typolink> 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> </td>
<f:if condition="{snowreport.inSeason}"> <f:if condition="{snowreport.inSeason}">
<f:then> <f:then>
<td>{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">
<td>{snowreport.snow_quality}</td> {snowreport.snow_level_mountain -> v:or(alternative: '-')}/{snowreport.snow_level_valley -> v:or(alternative: '-')} cm
<td> </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:if condition="{snowreport.lifts_opened} > 0">
<f:then>{snowreport.lifts_opened}/{snowreport.lifts_total}</f:then> <f:then>{snowreport.lifts_opened}/{snowreport.lifts_total}</f:then>
<f:else>k. A.</f:else> <f:else>k. A.</f:else>
</f:if> </f:if>
</td> </td>
<td>{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">
<td>{snowreport.last_update -> f:format.date(format: '%d.%m.%Y')}</td> {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:then>
<f:else> <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> <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> </f:if>
</tr> </tr>
</f:for> </f:for>
</tbody>
</table> </table>
</div> </div>
</ep:container>
</f:section> </f:section>
</html> </html>