restore style for events and donors on home page

ot_templating/Configuration/TypoScript/setup.txt

@@ -120,8 +120,8 @@ plugin.tx_ottemplating {
         themeColor = light-blue
         displayCarousel = 1
         staticDonors = 0
-        eventsLimit = 5
-        eventsPeriod = 8
+        eventsLimit = 3
+        eventsPeriod = 12
     }
 }
 

ot_templating/Resources/Private/Partials/Classic/NextEvents.html

@@ -75,7 +75,7 @@
                                     </f:if>
                                 </span>
 
-                        </f:then>
+                            </f:then>
                         </f:if>
                     </div>
 

ot_templating/Resources/Private/Partials/Modern/Donors.html

@@ -3,36 +3,47 @@
 
 <f:comment><!-- Donors --></f:comment>
 
-<div class="ot-box ot-donors">
-    <ot:donors.getAll as="donors"
-                      organizationId="{settings.organizationId}"
-                      fromParents="{fromParents}">
+<section class="page-section-pb partners">
+    <div class="container">
+        <div class="row mb-30 mt-100 sm-mt-50">
 
-        <f:if condition="{donors -> f:count()} > 0">
-            <f:then>
-                <div class="donors-panel">
-                    <header>
-                        <f:if condition="{fromParents}==1">
-                            <f:then>
-                                <h3>Partenaires de notre réseau</h3>
-                            </f:then>
-                            <f:else>
-                                <h3>Nos partenaires</h3>
-                            </f:else>
-                        </f:if>
+            <ot:donors.getAll as="donors"
+                              organizationId="{settings.organizationId}"
+                              fromParents="{fromParents}">
 
-                    </header>
-                    <div class="box-content">
-                        <div class="donor-list {f:if(condition: '{staticDisplay} == 1', then: '', else: 'carousel')}">
-                            <f:for each="{donors}" as="donor">
-                                <div class="donor-card">
-                                    <img src="{donor.logo}" alt="{donor.name}"/>
-                                </div>
-                            </f:for>
+                <f:if condition="{donors -> f:count()} > 0">
+                    <div class="col-lg-12 col-md-12">
+                        <div class="text-center">
+                            <h2 class="mb-50">
+                                {f:if(condition: '{fromParents}==1',
+                                      then: 'Partenaires de notre réseau',
+                                      else: 'Nos partenaires')}
+                            </h2>
                         </div>
                     </div>
-                </div>
-            </f:then>
-        </f:if>
-    </ot:donors.getAll>
-</div>
+                    <div class="col-lg-12 col-md-12">
+                        <div class="clients-list partners-list grayscale">
+                            <div class="owl-carousel"
+                                 data-nav-dots="false"
+                                 data-md-items="4"
+                                 data-sm-items="3"
+                                 data-xs-items="2"
+                                 data-xx-items="2">
+                                <f:for each="{donors}" as="donor">
+
+                                    <div class="item">
+                                        <img class="img-fluid mx-auto"
+                                             src="{donor.logo}"
+                                             alt="{donor.name}">
+                                    </div>
+
+                                </f:for>
+                            </div>
+                        </div>
+                    </div>
+                </f:if>
+            </ot:donors.getAll>
+
+        </div>
+    </div>
+</section>

ot_templating/Resources/Private/Partials/Modern/NextEvents.html

@@ -5,106 +5,92 @@
 
 <f:comment><!-- Get the events page' uid if the page is found --></f:comment>
 <v:variable.set value="{ot:eventsPage.getId()}" name="eventsPageUid"/>
+<v:variable.set value="{f:uri.image(src: 'EXT:ot_templating/Resources/Public/media/event-default-modern.jpg')}" name="defaultImage"/>
 
-<div class="ot-box ot-events">
-    <div class="events-list">
-        <header>
-            <f:if condition="{fromParents}">
-                <f:then>
-                    <h3>Prochains événements de notre réseau</h3>
-                </f:then>
-                <f:else>
-                    <f:if condition="{fromChildren}">
-                        <f:then>
-                            <h3>Prochains événements de nos structures</h3>
-                        </f:then>
-                        <f:else>
-                            <h3>Nos prochains évènements</h3>
-                        </f:else>
-                    </f:if>
-                </f:else>
-            </f:if>
-        </header>
+<f:comment><!-- Should we display the section even if there is no event to show?--></f:comment>
+<f:if condition="{fromParents}||{fromChildren}">
+    <f:then>
+        <v:variable.set value="0" name="showEmpty"/>
+    </f:then>
+    <f:else>
+        <v:variable.set value="1" name="showEmpty"/>
+    </f:else>
+</f:if>
 
-        <ot:events.getNext as="events"
-                           organizationId="{settings.organizationId}"
-                           limit="{settings.eventsLimit}"
-                           period="{settings.eventsPeriod}"
-                           fromParents="{fromParents}"
-                           fromChildren="{fromChildren}">
+<section class="mt-50 events">
+    <div class="container">
+        <div class="row">
 
-            <f:for each="{events}" as="event">
+            <ot:events.getNext as="events"
+                               organizationId="{settings.organizationId}"
+                               limit="{settings.eventsLimit}"
+                               period="{settings.eventsPeriod}"
+                               fromParents="{fromParents}"
+                               fromChildren="{fromChildren}">
 
-                <div class="event-card">
+                <f:if condition="{events -> f:count()} > 0 || {showEmpty}">
 
-                    <div class="event-poster">
-                        <f:if condition="{event.image}">
-                            <f:then>
-                                <img src='{event.image}' alt="poster" />
-                            </f:then>
-                            <f:else>
-                                <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
-                            </f:else>
-                        </f:if>
+                    <div class="col-lg-12 col-md-12">
+                        <div class="text-center">
+                            <f:if condition="{fromParents}">
+                                <f:then>
+                                    <h2 class="mb-50">Prochains événements de notre réseau</h2>
+                                </f:then>
+                                <f:else if="{fromChildren}">
+                                    <h2 class="mb-50">Prochains événements de nos structures</h2>
+                                </f:else>
+                                <f:else>
+                                    <h2 class="mb-50">Nos prochains évènements</h2>
+                                </f:else>
+                            </f:if>
+                        </div>
                     </div>
 
-                    <div class="event-summary">
-                        <span class="event-name">
-                            {event.name}
-                        </span>
-                        <span class="event-date">
-                            {f:format.date(date: event.datetimeStart,
-                                           format: "\l\e d-m-Y \à H\hi")}
-                        </span>
-                        <f:if condition="{eventsPageUid} > 0">
-                            <f:then>
-                                <span class="event-see">
-                                    <f:if condition="{fromParents}||{fromChildren}">
-                                        <f:then>
-                                            <a href="https://{event.subDomain}.opentalent.fr"
-                                               target="_blank">
-                                                Plus d'infos
-                                            </a>
-                                        </f:then>
-                                        <f:else>
-                                            <f:link.page pageUid="{eventsPageUid}"
-                                                         additionalParams="{eventId: event.id}">
-                                                Plus d'infos
-                                            </f:link.page>
-                                        </f:else>
-                                    </f:if>
-                                </span>
+                    <f:for each="{events}" as="event">
 
-                            </f:then>
-                        </f:if>
-                    </div>
+                        <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
+                            <div class="card border-0 theme-bg o-hidden h-100">
 
-                </div>
-            </f:for>
-
-            <f:if condition="{events -> f:count()} == 0">
-                <f:then>
-                    <span class="no-events">
-                        Aucun évènement dans les prochaines semaines
-                    </span>
-                </f:then>
-            </f:if>
-        </ot:events.getNext>
+                                <f:if condition="{fromParents}||{fromChildren}">
+                                    <f:then>
+                                        <a href="https://{event.subDomain}.opentalent.fr" target="_blank">                                   >
+                                    </f:then>
+                                    <f:else>
+                                        <a href="{f:uri.page(pageUid: eventsPageUid, additionalParams: '{eventId: event.id}')}">
+                                    </f:else>
+                                </f:if>
+                                    <img class="img-fluid"
+                                         src="{f:if(condition: event.image,
+                                                    then: event.image,
+                                                    else: defaultImage)}"/>
+                                    <div class="p-4">
+                                        <h4 class="text-white">{event.name}</h4>
+                                        <p class="mb-0 pb-0 text-white">
+                                            {f:format.date(date: event.datetimeStart,
+                                            format: "\l\e d-m-Y \à H\hi")} - {event.city}
+                                        </p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </f:for>
 
-        <footer>
-            <f:if condition="{fromParents}||{fromChildren}">
-                <f:then>
-                </f:then>
-                <f:else>
-                    <f:if condition="{eventsPageUid} > 0"><f:then>
-                        <div class="event-see-all">
-                            <f:link.page pageUid="{eventsPageUid}">
-                                Voir tous les évènements
-                            </f:link.page>
+                    <f:if condition="{eventsPageUid} > 0">
+                        <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
+                            <div class="card border-0 theme-bg o-hidden h-100">
+                                <f:link.page pageUid="{eventsPageUid}" class="p-4 more-events">
+                                    <h2 class="text-white"> <i class="fa fa-plus fa-3x"></i> </h2>
+                                    <h3 class="text-white"> Voir tous les évènements </h3>
+                                </f:link.page>
+                            </div>
                         </div>
-                    </f:then></f:if>
-                </f:else>
-            </f:if>
-        </footer>
+                    </f:if>
+
+                </f:if>
+
+            </ot:events.getNext>
+
+        </div>
     </div>
-</div>
+</section>
+