Work-Related/events
Work-Related/events
1
0
mirror of https://github.com/werkraum-media/events.git synced 2024-11-22 10:16:09 +01:00
Code Issues Activity

Fix responsive grid layout in table and detail view

Browse source
This commit is contained in:
Dirk Koritnik 2022-11-09 10:51:15 +01:00
parent 96a650c5aa
commit 2626613aa7
2 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
Resources/Private/Partials/Date/ListTable.html
View file

@ -5,15 +5,15 @@
<f:for each="{pagination.paginator.paginatedItems}" as="date" iteration="index"> <f:for each="{pagination.paginator.paginatedItems}" as="date" iteration="index">
<div class="row mt-3 mb-3 pb-3"> <div class="row mt-3 mb-3 pb-3">
<div class="col-2"> <div class="col-12 order-2 mb-3 mb-md-0 col-md-2 order-md-1">
<f:if condition="{f:format.date(format: 'H:i', date: '{date.start}')} != '00:00'"> <f:if condition="{f:format.date(format: 'H:i', date: '{date.start}')} != '00:00'">
<b><f:format.date format="H:i">{date.start}</f:format.date></b><br> <b class="d-inline d-md-block"><f:format.date format="H.i">{date.start}</f:format.date></b>
</f:if> </f:if>
<b><f:format.date format="%a">{date.start}</f:format.date></b><br> <b class="d-inline d-md-block"><f:format.date format="%a">{date.start}</f:format.date></b>
<b><f:format.date format="d.m.">{date.start}</f:format.date></b><br> <b class="d-inline d-md-block"><f:format.date format="d.m.">{date.start}</f:format.date></b>
{date.event.region.title}<br> {date.event.region.title}<br>
</div> </div>
<div class="col-6"> <div class="col-12 order-3 col-md-6 order-md-2">
<f:if condition="{date.canceled} == 'canceled'"> <f:if condition="{date.canceled} == 'canceled'">
<h4 class="bg-secondary text-white p-2"> <h4 class="bg-secondary text-white p-2">
@ -28,7 +28,7 @@
<p><strong>{date.event.teaser}</strong></p> <p><strong>{date.event.teaser}</strong></p>
<f:format.crop maxCharacters="150">{date.event.details}</f:format.crop> <f:format.crop maxCharacters="150">{date.event.details}</f:format.crop>
</div> </div>
<div class="col-4 position-relative"> <div class="col-12 order-1 mb-3 mb-md-0 col-md-4 order-md-3 position-relative">
<f:if condition="{date.event.images.0}"> <f:if condition="{date.event.images.0}">
<f:then> <f:then>
<f:link.action pageUid="{settings.showPID}" action="show" controller="Date" arguments="{date: date}"> <f:link.action pageUid="{settings.showPID}" action="show" controller="Date" arguments="{date: date}">

12
Resources/Private/Templates/Date/Show.html
View file

@ -2,7 +2,7 @@
<f:layout name="Default" /> <f:layout name="Default" />
<f:section name="content"> <f:section name="content">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-12 mb-3 mb-md-0 col-md-6">
<f:if condition="{date.event.images.0}"> <f:if condition="{date.event.images.0}">
<f:then> <f:then>
<f:image image="{date.event.images.0}" alt="" width="480c" height="320c" class="img-fluid img-thumbnail"/> <f:image image="{date.event.images.0}" alt="" width="480c" height="320c" class="img-fluid img-thumbnail"/>
@ -12,7 +12,7 @@
</f:else> </f:else>
</f:if> </f:if>
</div> </div>
<div class="col-6"> <div class="col-12 col-md-6">
<f:if condition="{date.canceled} == 'canceled'"> <f:if condition="{date.canceled} == 'canceled'">
<h4 class="bg-secondary text-white p-2"> <h4 class="bg-secondary text-white p-2">
<f:translate key="LLL:EXT:events/Resources/Private/Language/locallang.xlf:tx_events.date.canceled" /> <f:translate key="LLL:EXT:events/Resources/Private/Language/locallang.xlf:tx_events.date.canceled" />
@ -21,7 +21,7 @@
<h4> <h4>
<f:format.date format="%a">{date.start}</f:format.date> <f:format.date format="%a">{date.start}</f:format.date>
<f:format.date format="d.m.">{date.start}</f:format.date> <f:format.date format="d.m.">{date.start}</f:format.date>
<f:format.date format="H:i">{date.start}</f:format.date> Uhr <f:format.date format="H.i">{date.start}</f:format.date> Uhr
</h4> </h4>
<h2>{date.event.title}</h2> <h2>{date.event.title}</h2>
<h3>{date.event.teaser}</h3> <h3>{date.event.teaser}</h3>
@ -34,7 +34,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-12 col-md-4">
<p><b>Preis:</b><br> <p><b>Preis:</b><br>
<f:if condition="{date.event.priceInfo}"> <f:if condition="{date.event.priceInfo}">
<f:then> <f:then>
@ -52,7 +52,7 @@
</p> </p>
</f:if> </f:if>
</div> </div>
<div class="col-4"> <div class="col-12 col-md-4">
<p><b>Veranstaltungsort:</b><br> <p><b>Veranstaltungsort:</b><br>
{date.event.location.name}<br> {date.event.location.name}<br>
{date.event.location.street}<br> {date.event.location.street}<br>
@ -60,7 +60,7 @@
{date.event.location.phone}<br> {date.event.location.phone}<br>
</p> </p>
</div> </div>
<div class="col-4"> <div class="col-12 col-md-4">
<p><b>Veranstalter:</b><br> <p><b>Veranstalter:</b><br>
{date.event.organizer.name}<br> {date.event.organizer.name}<br>
{date.event.organizer.street}<br> {date.event.organizer.street}<br>