src/Flexy/FrontBundle/Themes/CoWorking/templates/pages/actualites.html.twig line 1

  1. {% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}
  2. {% block stylesheets %}
  4. {{ parent() }}
  5.      
  6.    
  7. <style>
  8.  .pagination {
  9.     display: flex;
  10.     justify-content: center;
  11.     margin-top: 20px;
  12. }
  14. .pagination li {
  15.     margin: 0 5px;
  16.     list-style: none;
  17. }
  19. .pagination li a {
  20.     text-decoration: none;
  21.     padding: 8px 12px;
  22.     border: 1px solid #FFCB00; /* Ajout de la couleur principale */
  23.     border-radius: 5px;
  24.     color: #FFCB00; /* Texte en couleur principale */
  25.     font-weight: 600;
  26.     transition: background-color 0.3s, color 0.3s;
  27. }
  29. .pagination li a:hover {
  30.     background-color: #FFCB00; /* Couleur au survol */
  31.     color: white; /* Texte en blanc au survol */
  32. }
  34. .pagination li.active a {
  35.     background-color: #FFCB00; /* Couleur principale pour l'élément actif */
  36.     color: white; /* Texte en blanc */
  37.     border: none; /* Supprimer la bordure */
  38. }
  40. .pagination li.disabled {
  41.     display: none; /* Cacher les boutons désactivés */
  42. }
  45.     
  46.     .img-article {
  47.     width: 100%; /* La largeur de l'image s'ajuste à la colonne */
  48.     height: 260px; /* Hauteur fixe pour uniformiser toutes les images */
  49.     object-fit: cover; /* Coupe les parties excédentaires pour conserver le rapport d'aspect */
  50.     border-radius: 5px; /* Optionnel : coins arrondis */
  51. }
  52.     
  53.     #hideHeaderInPageHome{
  54.         display:none !important;
  55.     }
  56.     
  57.     .title-article{
  58.         color: #292825;
  59.         font-size: 21px;
  60.         line-height: 35px;
  61.         font-weight: 800;
  62. }
  63. .lire-suite{
  64.    
  65.     /*padding: 10px;*/
  66.     font-weight:600;
  67.     font-size:13px;
  68.     border-radius: 4px;
  69. } 
  70. .img-article{
  71.     width:95%;
  72. }
  74. .shadow-custom:hover{
  75.      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  76. }
  78.  
  80. .shadow-custom{
  81.     box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  82. }
  84.   .custom-hr {
  85.      width: 10%;
  86.     border: 3px solid #555;
  87.     margin: 4px;
  88. }
  90. .custom-hr-1{
  91.      width: 3%;
  92.     border: 3px solid #555;
  93.     margin: 4px;
  94. }
  95.   .carousel-image {
  96.     width: 100%; /* Adapte la largeur à celle du conteneur */
  97.     height: 400px; /* Hauteur fixe pour un rendu uniforme */
  98.     object-fit: cover; /* Coupe et zoome l'image pour remplir le conteneur */
  99.     
  100. }
  101. </style>
  103.   
  104. {% endblock  %}
  105. {% block body %}
  106.  
  110. <!--Carousel-->
  111. <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  112.   <div class="carousel-inner">
  113.    <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  114.   <div class="carousel-inner">
  115.     {% for news in newshome %}
  116.     <div class="carousel-item {% if loop.first %}active{% endif %}" data-bs-interval="6000">
  117.       <img src="/uploads/coworking/{{ news.image }}" class="d-block w-100 carousel-image" alt="...">
  118.     </div>
  119.     {% endfor %}
  120.   </div>
  121. </div>
  123.   <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
  124.     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  125.     <span class="visually-hidden">Previous</span>
  126.   </button>
  127.   <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
  128.     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  129.     <span class="visually-hidden">Next</span>
  130.   </button>
  131. </div>
  132. <div class="container" style="max-width: 1230px;">
  134.  
  138.     <div class="row">
  139.         <div class="col-lg-12">
  140.             
  141.             <h1 style="font-size: 34px; color: black;" class="title-actualites mt-5 mb-2">Actualités</h1>
  142.              <hr class="custom-hr-1">
  143.             
  144.             <div class="row">
  145.                 <!-- Articles -->
  146.                 
  147.                 <div class="col-lg-9">
  148.                 
  149.          <div id="result-container">
  150.     {% include '@Flexy/FrontBundle/Themes/CoWorking/templates/pages/_sorted_results.html.twig' with { 'news': newshome } %}
  151. </div>
  152.                    {# {% for news in newshome %}
  153.     
  154.                     <article class="card shadow-custom mt-4">
  155.                         <div class="row g-0">
  156.                             <div class="col-lg-5">
  157.                                 <img class="img-article img-fluid" 
  158.                                      src="/uploads/coworking/{{ news.image }}"
  159.                                      alt="image">
  160.                             </div>
  161.                             <div class="col-lg-7 col-md-12 " >
  162.                                 <p class="mt-2" style="font-size:12px">{{ news.dateDebut|date('d M Y')|default('Aucune date') }}</p>
  163.                                 <h3>  {{ news.title }}  </h3>
  164.                                 <h2 class="title-article"> {{ news.underTitle }}</h2>
  165.                                 <p style="font-size: 15px;width:95%;">{{ news.description|slice(0, 110) ~ '...' }}</p>
  166.                                 <a href="{{path('actualite',{id:news.id})}}" class="lire-suite">Lire Plus <i style="font-size:18px" class="fa fa-play-circle" aria-hidden="true"></i></a>
  167.                                 
  168.                             </div>
  169.                         </div>
  170.                     </article>
  171.                     {% endfor %}
  172.      #}
  173.                 </div>
  174.                 <!-- Sidebar -->
  175.                 <div class="col-lg-3">
  176.                 
  177.              <select id="sortSelect" class="form-select" aria-label="Default select example">
  178.                         <option selected value="1">Les plus récentes</option>
  179.                         <option value="2">Les plus anciens</option>
  180.                 </select>
  181.                 <br>
  183.                     <!-- Remplacez 'ffff' par du contenu réel -->
  184.                     <h5 class="">Actualités récentes</h5>
  185.                     <hr class="custom-hr">
  186.                     
  187.                          {% for news in newshome %}
  188.                     {% if loop.index <= 8 %}
  189.                        <p class="mt-3" style="font-size: 14px;">{{ news.Title }}</p>
  190.                        {% endif %}
  191.                      {% endfor %}
  192.                 </div>
  193.             </div>
  194.         </div>
  195.       {% if newshome is not null %}
  196.         <div class="pagination">
  197.     {{ knp_pagination_render(newshome) }}
  198. </div>
  199.     {% endif %}
  200.  
  201.     </div>
  202.     
  203. </div>
  207.  
  208.     
  209. {% endblock %}
  211. {% block javascripts %}
  213. {{ parent() }}
  214.  
  215.  
  216. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  220. <script>
  221. $(document).ready(function () {
  222.     // Fonction pour charger les actualités triées
  223.     function loadSortedNews(sortOrder, page = 1) {
  224.         console.log("Tri sélectionné :", sortOrder, "Page :", page);
  226.         $.ajax({
  227.             url: '{{ path('app_sort_data') }}',
  228.             type: 'GET',
  229.             data: { sortOrder: sortOrder, page: page },
  230.             beforeSend: function () {
  231.                 $('#result-container').html('<div class="text-center"><i class="fa fa-spinner fa-spin fa-3x"></i>  Chargement en cours ....</div>');
  232.     
  233.             },
  234.             success: function (response) {
  235.                 $('#result-container').html(response);
  237.                 // Gérer les liens de pagination après le tri
  238.                 $('#result-container').on('click', '.pagination a', function (e) {
  239.                     e.preventDefault();
  240.                     let pageUrl = $(this).attr('href');
  241.                     let pageNumber = pageUrl.split('page=')[1];
  242.                     loadSortedNews(sortOrder, pageNumber);
  243.                 });
  244.             },
  245.             error: function () {
  246.                 alert('Une erreur est survenue lors du tri.');
  247.             }
  248.         });
  249.     }
  251.     // Événement de changement sur le select
  252.     $('#sortSelect').on('change', function () {
  253.         let selectedValue = $(this).val();
  254.         loadSortedNews(selectedValue);
  255.     });
  257.     // Capture les clics de pagination dès le chargement initial
  258.     $('#result-container').on('click', '.pagination a', function (e) {
  259.         e.preventDefault();
  260.         let selectedValue = $('#sortSelect').val();
  261.         let pageUrl = $(this).attr('href');
  262.         let pageNumber = pageUrl.split('page=')[1];
  263.         loadSortedNews(selectedValue, pageNumber);
  264.     });
  265. });
  268.  
  269. </script>
  270. {% endblock %}