Adds the latest template for events on start page

html/typo3conf/ext/t3org_layout/Configuration/TypoScript/Default/constants.txt

@@ -16,3 +16,5 @@ plugin.tx_certifications.persistence.storagePid = 212
 plugin.tx_t3omembership.persistence.storagePid = 227
 plugin.tx_typo3roadmap.persistence.storagePid = 228
 
+# Events
+plugin.tx_sfeventmgt.settings.detailPid = 230

html/typo3conf/ext/t3org_layout/Configuration/TypoScript/Ext/SfEventMgt.ts

@@ -10,4 +10,6 @@ plugin.tx_sfeventmgt {
             100 = EXT:t3org_layout/Resources/Private/Extensions/SfEventMgt/Layouts
         }
     }
+
+    settings.detailPid = {$plugin.tx_sfeventmgt.settings.detailPid}
 }

html/typo3conf/ext/t3org_layout/Resources/Private/Extensions/SfEventMgt/Templates/Event/List.html

@@ -4,19 +4,29 @@
 <f:section name="main">
     <f:if condition="{settings.templateLayout} == 1">
         <f:then>
-            <div class="latestEvents">
+            <ul class="list-unstyled event-list listing__group">
                 <f:for each="{events}" as="event">
-                    <div class="calendar-event">
-                        <span class="calendar-day">{event.startdate -> f:format.date(format:'d')}</span>
-                        <span class="calendar-month">{event.startdate -> f:format.date(format:'M')}</span>
-                        <span class="calendar-month">{event.startdate -> f:format.date(format:'Y')}</span>
-                    </div>
-                    <div class="event-text">
-                        <h3 class="event-title">{event.title}</h3>
-                        <p>{event.location.title}<br>{event.location.zip} {event.location.city}<br>{event.location.country}</p>
-                    </div>
+                    <li class="m-3 m-md-4 mx-lg-5 mt-lg-5">
+                        <f:link.action action="detail" arguments="{event : event}" pageUid="{settings.detailPid}" class="media listing__group-item p-sm-2 card-date">
+                            <div class="d-flex mr-sm-4">
+                                <time class="listing__group-item_time" datetime="{event.startdate -> f:format.date(format:'Y-m-d H:i')}">
+                                    <span class="listing__group-item_time-day mt-sm-2">{event.startdate -> f:format.date(format:'d')}</span>
+                                    <span class="listing__group-item_time-month">{event.startdate -> f:format.date(format:'M')}</span>
+                                    <span class="listing__group-item_time-year">{event.startdate -> f:format.date(format:'Y')}</span>
+                                </time>
+                            </div>
+                            <div class="media-body listing__group-item_body">
+                                <h5 class="mb-0 mt-sm-1 mb-sm-3">
+                                    <strong>{event.title}</strong>
+                                </h5>
+                                <p class="listing__group-item_body-text">
+                                    {event.location.title}<br>{event.location.zip} {event.location.city}<br>{event.location.country}<i class="fa fa-chevron-right ml-2" aria-hidden="true"></i>
+                                </p>
+                            </div>
+                        </f:link.action>
+                    </li>
                 </f:for>
-            </div>
+            </ul>
         </f:then>
         <f:else>
             <div class="container">