templates/Nordinfo/Main/actus.html.twig line 1

Open in your IDE?
  1. {% extends 'Nordinfo/Main/base.html.twig' %}
  2. {% block title %}{{ title }} - Nord Info{% endblock %}
  3. {% block body %}
  4.   {{ include('Lenord/Main/parts/epingles.html.twig') }}
  5.   <main role="main" id="mainContent" tabindex="-1" class="mBXL" style="position:relative;">
  6.     {% include 'Nordinfo/Main/parts/add_tags_bar.html.twig' %}
  7.     {% if show_date_bar is defined and show_date_bar == 1 and posts is not empty %}
  8.       {% include 'Nordinfo/Main/parts/date_bar.html.twig' %}
  9.     {% endif %}
  10.     <div style="position:relative;">
  11.       <div class="gradientPosts"></div>
  12.     </div>
  13.     <h1 class="sr-only">{{ title }}</h1>
  14.     <div class="container _masonry">
  15.       {% if posts|length == 0 and latest_epingle_1 is null and latest_two_epingles_2|length == 0 %}
  16.         <p class="messageEmptyFeed">
  17.           Créez votre Une personnalisée en sélectionnant
  18.           <a href="{{ path('vos_lieux') }}">
  19.             <span>vos lieux de vie</span>
  20.           </a>
  21.           et/ou
  22.           <a href="{{ path('topics') }}">
  23.             <span>vos centres d'intérêts</span>
  24.           </a>
  25.           préférés à l’aide des filtres en haut de ce fil
  26.         </p>
  27.         <div class="gridMasonry" id="gridMasonry">
  28.           <div class="grid-sizer"></div>
  29.           <div class="colArticleItem col-item">
  30.             <div class="articleItem _empty"></div>
  31.           </div>
  32.           <div class="colArticleItem col-item">
  33.             <div class="articleItem _empty"></div>
  34.           </div>
  35.           <div class="colArticleItem col-item">
  36.             <div class="articleItem _empty"></div>
  37.           </div>
  38.           <div class="colArticleItem col-item d-none d-lg-block">
  39.             <div class="articleItem _empty"></div>
  40.           </div>
  41.           <div class="colArticleItem col-item d-none d-lg-block">
  42.             <div class="articleItem _empty"></div>
  43.           </div>
  44.           <div class="colArticleItem col-item d-none d-lg-block">
  45.             <div class="articleItem _empty"></div>
  46.           </div>
  47.         </div>
  48.       {% else %}
  49.         <div class="pb-5"></div>
  50.         {% if latest_epingle_1 %}
  51.           {% set date = "" %}
  52.           {% if latest_epingle_1.dateDebut is defined and latest_epingle_1.dateDebut is not null %}
  53.             {% set date_segments = latest_epingle_1.dateDebut | split('/') %}
  54.             {% set date = date_segments[1] ~ '/' ~ date_segments[0] ~ '/' ~ date_segments[2] %}
  55.           {% endif %}
  56.           {% set date_fin = "" %}
  57.           {% if latest_epingle_1.dateFin is defined and latest_epingle_1.dateFin != null %}
  58.             {% set date_segmentss = latest_epingle_1.dateFin | split('/') %}
  59.             {% set date_fin = date_segmentss[1] ~ '/' ~ date_segmentss[0] ~ '/' ~ date_segmentss[2] %}
  60.           {% endif %}
  61.           <div class="containerArticleBig">
  62.             <p class="sr-only"
  63.                style="position:absolute;left:0;width:100%;height:30px;visibility:hidden;opacity:0;"
  64.                id="list-item-{{ latest_epingle_1.id }}"
  65.                data-date-bar-scroll-point>{{ date|format_datetime(locale='fr', pattern="d MMMM Y") }}</p>
  66.             <a
  67.               href="{{ path('post_detail', {"slug": latest_epingle_1.slug}) }}"
  68.               class="articleItem _big">
  69.               <div class="__inner">
  70.                 <div class="__col-img">
  71.                   <div
  72.                     class="__img placement{% if latest_epingle_1.positionImage.id is defined %}{{ latest_epingle_1.positionImage.id }}{% endif %} lozad"
  73.                     data-background-image="{% if latest_epingle_1.defautFil is defined and latest_epingle_1.defautFil is same as(true) %}{{ latest_epingle_1.illustrationfilName }}{% else %}{{ asset('upload/images/'~latest_epingle_1.illustrationfilName) | imagine_filter('thumb') }}{% endif %}"
  74.                   ></div>
  75.                 </div>
  76.                 <div class="__col-info">
  77.                   <div class="__info-wrapper">
  78.                     <p class="__tag">à la une</p>
  79.                     <h2 class="__title">
  80.                       <span>{{ latest_epingle_1.title }}</span>
  81.                     </h2>
  82.                     {% if latest_epingle_1.shortDescription|length > 0 %}
  83.                       <p class="__desc">
  84.                         {{ latest_epingle_1.shortDescription }}
  85.                       </p>
  86.                     {% endif %}
  87.                   </div>
  88.                 </div>
  89.               </div>
  90.             </a>
  91.           </div>
  92.         {% endif %}
  93.         <div class="gridMasonry" id="gridMasonry">
  94.           <div class="grid-sizer"></div>
  95.           {% if latest_two_epingles_2|length > 0 %}
  96.             {% for post in latest_two_epingles_2 %}
  97.               {% set date = "" %}
  98.               {% if post.dateDebut is defined and post.dateDebut is not null %}
  99.                 {% set date_segments = post.dateDebut | split('/') %}
  100.                 {% set date = date_segments[1] ~ '/' ~ date_segments[0] ~ '/' ~ date_segments[2] %}
  101.               {% endif %}
  102.               {% set date_fin = "" %}
  103.               {% if post.dateFin is defined and post.dateFin != null %}
  104.                 {% set date_segmentss = post.dateFin | split('/') %}
  105.                 {% set date_fin = date_segmentss[1] ~ '/' ~ date_segmentss[0] ~ '/' ~ date_segmentss[2] %}
  106.               {% endif %}
  107.               <div class="colArticleItem col-item _epingle">
  108.                 <p class="sr-only"
  109.                    style="position:absolute;left:0;width:100%;height:30px;visibility:hidden;opacity:0;"
  110.                    id="list-item-{{ post.id }}"
  111.                    data-date-bar-scroll-point>{{ date|format_datetime(locale='fr', pattern="d MMMM Y") }}</p>
  112.                 <a
  113.                   href="{{ path('post_detail', {"slug": post.slug}) }}"
  114.                   class="articleItem _article _epingle">
  115.                   <div class="__inner">
  116.                     <div class="__col-img">
  117.                       <div
  118.                         class="__img placement{% if post.positionImage.id is defined %}{{ post.positionImage.id }}{% endif %} lozad"
  119.                         data-background-image="{% if post.defautFil is defined and post.defautFil is same as(true) %}{{ post.illustrationfilName }}{% else %}{{ asset('upload/images/'~post.illustrationfilName) | imagine_filter('thumb') }}{% endif %}"
  120.                       ></div>
  121.                     </div>
  122.                     <div class="__col-info">
  123.                       <div class="__info-wrapper">
  124.                         <h2 class="__title">
  125.                           <span>{{ post.title }}</span>
  126.                         </h2>
  127.                         {% if post.shortDescription|length > 0 %}
  128.                           <p class="__desc">
  129.                             {{ post.shortDescription }}
  130.                           </p>
  131.                         {% endif %}
  132.                       </div>
  133.                     </div>
  134.                   </div>
  135.                 </a>
  136.               </div>
  137.             {% endfor %}
  138.           {% endif %}
  139.           {% for post in posts %}
  140.             {% if post.type.type == 'event' and post.dateDebut >= date_day %}
  141.             {% else %}
  142.               {{ include('Nordinfo/Main/parts/item_list.html.twig') }}
  143.             {% endif %}
  144.           {% endfor %}
  145.         </div>
  146.         {% if items_total > initial_limit %}
  147.           {% include 'Nordinfo/Main/parts/loader_ajax.html.twig' %}
  148.         {% endif %}
  149.       {% endif %}
  150.     </div>
  151.     <script>
  152.       (() => {
  153.         const containerArticleBig = document.querySelector('.containerArticleBig');
  154.         const articleItemsEpingle = document.querySelectorAll('.colArticleItem._epingle');
  155.         const gradientPosts = document.querySelector('.gradientPosts');
  157.         function calculateHeights() {
  158.           let heightContainerArticleBig = 0;
  159.           let heightArticleItemsEpingle = 0;
  161.           if (document.body.contains(containerArticleBig)) {
  162.             const styles = window.getComputedStyle(containerArticleBig);
  163.             heightContainerArticleBig = containerArticleBig.offsetHeight +
  164.               parseFloat(styles.marginTop) +
  165.               parseFloat(styles.marginBottom);
  166.           }
  168.           // Check if screen is larger than 991px
  169.           const isLargeScreen = window.matchMedia('(min-width: 992px)').matches;
  171.           if (isLargeScreen) {
  172.             // For large screens, get only the tallest element
  173.             let maxHeight = 0;
  174.             articleItemsEpingle.forEach((item) => {
  175.               const styles = window.getComputedStyle(item);
  176.               const itemHeight = item.offsetHeight +
  177.                 parseFloat(styles.marginTop) +
  178.                 parseFloat(styles.marginBottom);
  179.               if (itemHeight > maxHeight) {
  180.                 maxHeight = itemHeight;
  181.               }
  182.             });
  183.             heightArticleItemsEpingle = maxHeight;
  184.           } else {
  185.             // For smaller screens, add all heights together
  186.             articleItemsEpingle.forEach((item) => {
  187.               const styles = window.getComputedStyle(item);
  188.               const itemHeight = item.offsetHeight +
  189.                 parseFloat(styles.marginTop) +
  190.                 parseFloat(styles.marginBottom);
  191.               heightArticleItemsEpingle += itemHeight;
  192.             });
  193.           }
  195.           const totalHeight = heightContainerArticleBig + heightArticleItemsEpingle;
  196.           if (document.body.contains(gradientPosts)) {
  197.             gradientPosts.style.height = totalHeight + 'px';
  198.           }
  199.         }
  201.         // Initial calculation
  202.         calculateHeights();
  204.         // Create ResizeObserver
  205.         const resizeObserver = new ResizeObserver(() => {
  206.           calculateHeights();
  207.         });
  209.         // Observe the container
  210.         if (containerArticleBig) {
  211.           resizeObserver.observe(containerArticleBig);
  212.         }
  214.         // Observe each article item
  215.         articleItemsEpingle.forEach(item => {
  216.           resizeObserver.observe(item);
  217.         });
  218.       })();
  219.     </script>
  222.   </main>
  223.   {{ include('Nordinfo/Main/parts/cookieManager.js.html.twig') }}
  224. {% endblock %}