templates/event/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Nos Futurs Événements - RénovAtHome Un Artisant Près De Chez Soi{% endblock %}
  5. {% block stylesheets %}
  6. {{ parent() }}
  7. <link rel="stylesheet" href="{{ asset('assets/styles/evenements.css')}}">
  8. <meta name="description" content="Vous trouverez ci-dessous tous les lieux et dates à retenir afin de rencontrer nos équipes pour discuter de vos projets de rénovation.">
  9. {% endblock %}
  11. {% block banner %}{% endblock %}
  13. {% block main %}
  14. <main>
  15.     <div class="container">
  16.         <div class="evenements">
  17.             {% for event in events |sort((a, b) => a.dateDebut <= b.dateDebut) %} 
  18.             <div class="evenement">
  19.                 <div class="background-evenement">
  20.                     <img src="{{ asset('uploads/evenements/'~event.photo)}}" alt="affiche de l'évenement {{ event.nom }}">
  21.                 </div>
  23.                 <div class="text-evenement">
  24.                     <a class="titre-evenement" href="{{ path('event', { 'slug' : event.slug })}}"> {{ event.nom }}</a>
  25.                     <div class="lieu">
  26.                         <img src="{{ asset('assets/images/france.png')}}" alt="drapeau de la france">
  27.                         <span> {{ event.lieu }}</span>
  28.                     </div>
  29.                     <div class="description-evenement">
  30.                     {{ event.description|raw }}
  31.                     </div>
  32.                 </div>
  33.                 <div class="date-evenement">
  34.                     <div class="date-chiffre">
  35.                         <span class="">
  36.                             {{ event.dateDebut | localizeddate('none', 'none', 'fr', null, 'd') }} 
  37.                             - {{ event.dateFin | localizeddate('none', 'none', 'fr', null, 'd') }}
  38.                         </span>
  39.                     </div>
  40.                     <div class="date-mois">
  41.                          {{event.dateDebut | date("MMMM") == event.dateFin | date("MMMM") ?  event.dateDebut |localizeddate('none', 'none', 'fr', null, 'MMMM') :
  42.                          event.dateDebut |localizeddate('none', 'none', 'fr', null, 'MMMM')~" , "~ event.dateFin |localizeddate('none', 'none', 'fr', null, 'MMMM') }} 
  43.                          <span class="date-annee">{{ event.dateFin |localizeddate('none', 'none', 'fr', null, 'Y') }} </span>
  44.                     </div>
  45.                 </div>
  46.                 
  47.             </div>
  48.             {% endfor %}
  49.         </div>
  50.         
  51.     <div class="plus-evenenement">
  52.         AFFICHER PLUS D’ÉVÈNEMENTS
  53.     </div>
  54.     </div>
  55.     
  56. </main>
  57. {% endblock %}
  59. {% block contact %}{% endblock %}
  61. {% block footer %}{% endblock %}
  63. {% block script %}
  64.     {{ parent() }}
  65.     <script src="{{ asset('assets/js/main.js')}}"></script>
  66.     <script>
  67.         $(document).ready(function () {
  68.             var card = $('.evenement')
  69.             var nombrereal = 2;
  70.             if (nombrereal >= card.length) {
  71.                     $(".plus-evenenement").css('display','none');
  72.                 }
  73.             for (var i =nombrereal ; i < card.length; i++) {
  74.                card[i].style.display = 'none';
  75.             }
  76.             $(".plus-evenenement").click(function () {
  77.                 for (var i = nombrereal; i < nombrereal + 2; i++) {
  78.                     if (card[i]) {
  79.                         card[i].style.display = 'flex';
  80.                     }
  81.                 }
  82.                 nombrereal += 2;
  83.                 if (nombrereal >= card.length) {
  84.                     event.target.style.display = 'none';
  85.                 }
  86.             });
  87.         });
  88.     </script>
  89. {% endblock %}