css fixes

ot_templating/Resources/Private/Layouts/Modern/Home.html

@@ -18,6 +18,12 @@
         </div>
     </section>
 
+    <f:comment><!-- Render the donors section defined in partial/Donors.html--></f:comment>
+    <f:render partial="Modern/EventsPreview" />
+
+    <f:comment><!-- Render the donors section defined in partial/Donors.html--></f:comment>
+    <f:render partial="Modern/Donors" />
+
     <f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
     <f:render partial="Modern/Footer" />
 

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

@@ -55,6 +55,10 @@ Assets included with the VHS viewhelpers
                path="{assets_dir}/style/typography.css"
                standalone="{force_standalone}"/>
 
+<v:asset.style name="datetimepicker-css"
+               path="{assets_dir}/style/plugins/bootstrap-datetimepicker.min.css"
+               standalone="{force_standalone}"/>
+
 <v:asset.style name="slick-css"
                path="{assets_dir}/style/plugins/slick.css"
                standalone="{force_standalone}"/>
@@ -181,6 +185,16 @@ Assets included with the VHS viewhelpers
                 standalone="{force_standalone}"
                 dependencies="jquery"/>
 
+<v:asset.script name="moment-js"
+                path="{assets_dir}/script/bootstrap-datetimepicker/moment-datepicker.js"
+                standalone="{force_standalone}"
+                dependencies="jquery"/>
+
+<v:asset.script name="datetimepicker-js"
+                path="{assets_dir}/script/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"
+                standalone="{force_standalone}"
+                dependencies="jquery,moment-js"/>
+
 <v:asset.script name="slick-js"
                 path="{assets_dir}/script/slick/slick.js"
                 standalone="{force_standalone}"

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

@@ -1,68 +1,11 @@
+{namespace v=FluidTYPO3\Vhs\ViewHelpers}
 
+<f:comment><!-- Donors --></f:comment>
 
-<section class="page-section-pb partners">
-    <div class="container">
-        <div class="row mb-30 mt-100 sm-mt-50">
-            <div class="col-lg-12 col-md-12">
-                <div class="text-center">
-                    <h2 class="mb-50">Partenaires</h2>
-                </div>
-            </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-items="5" data-md-items="4" data-sm-items="3" data-xs-items="2" data-xx-items="2">
-                        <div class="item">
-                            <img class="img-fluid mx-auto" src="images/partners/Cluses.jpg" alt="">
-                        </div>
-                        <div class="item">
-                            <img class="img-fluid mx-auto" src="images/partners/CGHS.jpg" alt="">
-                        </div>
-                        <div class="item">
-                            <img class="img-fluid mx-auto" src="images/partners/RARH.png" alt="">
-                        </div>
-                        <div class="item">
-                            <img class="img-fluid mx-auto" src="images/partners/Ministere_Culture.png" alt="">
-                        </div>
-                        <div class="item reseau">
-                            <img class="img-fluid mx-auto" src="images/partners/CMF.png" alt="">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-
-<section class="page-section-pb partners reseau">
-    <div class="container">
-        <div class="row mb-50">
-            <div class="col-lg-12 col-md-12">
-                <div class="text-center">
-                    <h2 class="mb-50">Partenaires de mon réseau</h2>
-                </div>
-            </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-items="5" data-md-items="4" data-sm-items="3" data-xs-items="2" data-xx-items="2">
-                        <div class="item">
-                            <img class="img-fluid mx-auto" src="images/partners/Cluses.jpg" alt="">
-                        </div>
-                        <div class="item">
-                            <img class="img-fluid mx-auto" src="images/partners/CGHS.jpg" alt="">
-                        </div>
-                        <div class="item">
-                            <img class="img-fluid mx-auto" src="images/partners/RARH.png" alt="">
-                        </div>
-                        <div class="item">
-                            <img class="img-fluid mx-auto" src="images/partners/Ministere_Culture.png" alt="">
-                        </div>
-                        <div class="item reseau">
-                            <img class="img-fluid mx-auto" src="images/partners/CMF.png" alt="">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
+<v:render.request vendorName ="Opentalent"
+                  extensionName = 'OtWidgets'
+                  pluginName = 'Donors'
+                  controller = 'Donor'
+                  action = 'getDonors'
+                  arguments = "{options: settings}">
+</v:render.request>

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

@@ -1,135 +1,11 @@
+{namespace v=FluidTYPO3\Vhs\ViewHelpers}
 
-<section class="mt-50 events">
-    <div class="container">
-        <div class="row">
+<f:comment><!-- Next events --></f:comment>
 
-            <div class="col-lg-12 col-md-12">
-                <div class="text-center">
-                    <h2 class="mb-50">Prochains évènements</h2>
-                </div>
-            </div>
-
-            <!-- Evenement avec illustration -->
-            <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">
-                    <a href="#">
-                        <img class="img-fluid" src="images/affiche_exemple.jpg" alt="">
-                        <div class="p-4">
-                            <h4 class="text-white"> Evènement avec illustration</h4>
-                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
-                        </div>
-                    </a>
-                </div>
-            </div>
-
-
-            <!-- Evenement sans illustration -->
-            <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">
-                    <a href="#">
-                        <img class="img-fluid" src="images/affiche_absente.jpg" alt="">
-                        <div class="p-4">
-                            <h4 class="text-white"> Evènement sans illustration </h4>
-                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
-                        </div>
-                    </a>
-                </div>
-            </div>
-
-
-            <!-- Evenement avec illustration -->
-            <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">
-                    <a href="#">
-                        <img class="img-fluid" src="images/affiche_exemple.jpg" alt="">
-                        <div class="p-4">
-                            <h4 class="text-white"> Evènement avec illustration </h4>
-                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
-                        </div>
-                    </a>
-                </div>
-            </div>
-
-
-            <!-- Voir tous les évènements -->
-            <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">
-                    <a href="" 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>
-                    </a>
-                </div>
-            </div>
-
-
-        </div>
-    </div>
-</section>
-
-
-<section class="mt-80 events reseau">
-    <div class="container">
-        <div class="row">
-
-            <div class="col-lg-12 col-md-12">
-                <div class="text-center">
-                    <h2 class="mb-50">Prochains évènements de mon réseau</h2>
-                </div>
-            </div>
-
-            <!-- Evenement avec illustration -->
-            <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">
-                    <a href="#">
-                        <img class="img-fluid" src="images/affiche_exemple.jpg" alt="">
-                        <div class="p-4">
-                            <h4 class="text-white"> Evènement avec illustration </h4>
-                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
-                        </div>
-                    </a>
-                </div>
-            </div>
-
-
-            <!-- Evenement sans illustration -->
-            <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">
-                    <a href="#">
-                        <img class="img-fluid" src="images/affiche_absente.jpg" alt="">
-                        <div class="p-4">
-                            <h4 class="text-white"> Evènement sans illustration </h4>
-                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
-                        </div>
-                    </a>
-                </div>
-            </div>
-
-
-            <!-- Evenement avec illustration -->
-            <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">
-                    <a href="#">
-                        <img class="img-fluid" src="images/affiche_exemple.jpg" alt="">
-                        <div class="p-4">
-                            <h4 class="text-white"> Evènement avec illustration </h4>
-                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
-                        </div>
-                    </a>
-                </div>
-            </div>
-
-
-            <!-- Voir tous les évènements -->
-            <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">
-                    <a href="#" class="p-4 more-events cmf-events">
-                        <h3 class="text-white"> <img src="images/cmf_logo_blanc.png" alt="CMF" width="90px" class="img-fluid" /> </h3>
-                        <h3 class="text-white"> Voir tous les évènements </h3>
-                    </a>
-                </div>
-            </div>
-
-
-        </div>
-    </div>
-</section>
+<v:render.request vendorName ="Opentalent"
+                  extensionName = 'OtWidgets'
+                  pluginName = 'Events'
+                  controller = 'Event'
+                  action = 'preview'
+                  arguments = "{options: settings}">
+</v:render.request>

ot_templating/Resources/Public/assets/Modern/style/custom.css

@@ -655,7 +655,9 @@ Event's details pages
     align-self: center;
 }
 
-
+/*============================
+Events preview
+============================*/
 
 /*============================
 Sitemap page

ot_widgets/Resources/Private/Templates/Event/Index.html

@@ -10,8 +10,8 @@
                 <f:form action="index">
                     <f:form.textfield name="search-loc" placeholder="Où?" value="{args.search-loc}"/>
                     <f:form.textfield name="search-name" placeholder="Quoi?" value="{args.search-name}" />
-                    <f:form.textfield name="search-datestart" placeholder="Depuis le..." class="datepicker" value="{args.search-datestart}" />
-                    <f:form.textfield name="search-dateend" placeholder="Jusqu'au..." class="datepicker" value="{args.search-dateend}" />
+                    <f:form.textfield name="search-datestart" placeholder="Depuis le..." class="datepicker datetimepicker" value="{args.search-datestart}" />
+                    <f:form.textfield name="search-dateend" placeholder="Jusqu'au..." class="datepicker datetimepicker" value="{args.search-dateend}" />
                     <f:form.button name="search-submit">Rechercher</f:form.button>
                 </f:form>
             </div>