templates/office/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ setting.siteName }} : nos offices{% endblock %}
  5. {% block body %}
  7. <section class="container py-4">
  9.     <div class="row pt-3">
  10.         <div class="col">
  11.             {# Breadcrumbs #}
  12.             <div class="row">
  13.                 <div class="col small">
  14.                     <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);"
  15.                         aria-label="breadcrumb">
  16.                         <ol class="breadcrumb small">
  17.                             <li class="breadcrumb-item"><a href="{{ path('app_home') }}"
  18.                                     class="text-decoration-none text-dark">Accueil</a></li>
  19.                             <li class="breadcrumb-item active" aria-current="page">Nos offices</li>
  20.                         </ol>
  21.                     </nav>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.     </div>
  27.     <div class="row my-5">
  28.         <div class="col text-center">
  29.             <h1 class="color1 fw-700 text-uppercase" data-aos="fade-down" data-aos-duration="2000">{{ setting.officeTitre }}</h1>
  30.         </div>
  31.     </div>
  33.     <div class="row row row-cols-1 row-cols-md-3 g-4 mb-3">
  34.         {% for office in offices %}
  35.         <div class="col-lg-4 col-sm-12 offices-cards">
  36.             <div class="card h-100">
  37.                 <div class="card-body">
  38.                     <a href="{{ path('app_office_show', {'slug': office.slug}) }}" class="text-decoration-none text-dark">
  39.                         <h5 class="card-title color2 text-uppercase" data-aos="fade-left" data-aos-duration="2000">
  40.                             {{ office.titre }}
  41.                         </h5>
  42.                         <div class="card-text">
  43.                             <i class="bi bi-geo-alt-fill color2 me-2"></i>
  44.                             <span class="small">
  45.                                 {{ office.adresse }}
  46.                             </span>
  47.                             <br>
  48.                             <i class="bi bi-telephone-fill color2 me-2"></i>
  49.                             <span class="small">
  50.                                 {{ office.telephone }}
  51.                             </span>
  53.                             <div class="mt-4 hoverimage " style="height: 350px; position: relative;">
  54.                                 <div class="offices-color" data-aos="flip-left" data-aos-duration="2500" style="position: absolute; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url('{{ asset('assets/img/offices/' ~ office.imageBleu)|imagine_filter('offices') }}')">
  55.                                 </div>
  57.                                 <div class="offices-color nodisplay" style="position: absolute; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url('{{ asset('assets/img/offices/' ~ office.image)|imagine_filter('offices') }}')">
  58.                                 </div>
  59.                             </div>
  61.                             <div class="mt-4">
  62.                                 {{ office.presentation|replace({
  63.                                         '<div>': '<span>',
  64.                                         '</div>': '</span>',
  65.                                         '<p>': '<br><br>',
  66.                                         '</p>': '</span>',
  67.                                     })|raw }}
  68.                             </div>
  69.                         </div>
  70.                     </a>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.         {% endfor %}
  75.     </div>
  77.     <div class="row row row-cols-1 row-cols-md-3">
  78.         {% for office in offices %}
  79.         <div class="col-lg-4 col-sm-12 offices-cards mobile-offices-cards-bg">
  80.             <div class="card h-100">
  81.                 <div class="card-body">
  83.                         {# <iframe src="{{ office.map }}" width="100%" height="400" style="border:0; border-radius: 50%;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> #}
  84.                         <div class="googlemapsembed" data-url="{{ office.map }}" width="100%" height="400"></div>
  86.                     <div class="mt-4 text-center text-white small">
  87.                         {% if office.metro != null %}
  88.                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  89.                             aria-hidden="true" role="img" class="iconify iconify--maki color2" width="25" height="25"
  90.                             preserveAspectRatio="xMidYMid meet" viewBox="0 0 15 15">
  91.                             <path fill="currentColor"
  92.                                 d="M5.5 0s-.75 0-1 1L3 6.5V10c0 1 1 1 1 1h7s1 0 1-1V6.5L10.5 1c-.273-1-1-1-1-1h-4zm1 1.5h2s.536 0 .75 1L10 6c.215 1.002-1 1-1 1H6s-1.215.002-1-1l.75-3.5c.214-1 .75-1 .75-1zM5 8a1 1 0 1 1 0 2a1 1 0 0 1 0-2zm1.75 0h1.5a.25.25 0 1 1 0 .5h-1.5a.25.25 0 1 1 0-.5zM10 8a1 1 0 1 1 0 2a1 1 0 0 1 0-2zm-5.875 4L3 15h1.5l.375-1h5.25l.375 1H12l-1.125-3h-1.5l.375 1h-4.5l.375-1h-1.5z">
  93.                             </path>
  94.                         </svg>
  95.                         {{ office.metro|replace({
  96.                                 '<p>': '<span>',
  97.                                 '</p>': '</span>'
  98.                             })|raw }}<br><br>
  99.                         {% endif %}
  100.                         {% if office.bus != null %}
  101.                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  102.                             aria-hidden="true" role="img" class="iconify iconify--bxs color2" width="25" height="25"
  103.                             preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  104.                             <path fill="currentColor"
  105.                                 d="M21 6.021c.003-.146-.007-1.465-1.3-2.735C18.427 2.036 17.143 2 17 2H6.996c-.239 0-1.493.063-2.708 1.302C3.036 4.578 3 5.859 3 6v3H2v3h1v6c0 .734.406 1.373 1 1.721V21a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h10v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1.277A1.99 1.99 0 0 0 21 18v-6h1V9h-1V6.021zM9 4h6v2H9V4zM6.5 18a1.5 1.5 0 1 1 .001-3.001A1.5 1.5 0 0 1 6.5 18zm4.5-5H5V8h6v5zm6.5 5a1.5 1.5 0 1 1 .001-3.001A1.5 1.5 0 0 1 17.5 18zm1.5-5h-6V8h6v5z">
  106.                             </path>
  107.                         </svg>
  108.                         {{ office.bus|replace({
  109.                                 '<p>': '<span>',
  110.                                 '</p>': '</span>'
  111.                             })|raw }}<br><br>
  112.                         {% endif %}
  113.                         {% if office.parking != null %}
  114.                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  115.                             aria-hidden="true" role="img" class="iconify iconify--ri color2" width="25" height="25"
  116.                             preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  117.                             <path fill="currentColor"
  118.                                 d="M11 14h1.5a3.5 3.5 0 0 0 0-7H9v10h2v-3zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm7 6h1.5a1.5 1.5 0 0 1 0 3H11V9z">
  119.                             </path>
  120.                         </svg>
  121.                         {{ office.parking|replace({
  122.                                 '<p>': '<span>',
  123.                                 '</p>': '</span>'
  124.                             })|raw }}<br><br>
  125.                         {% endif %}
  126.                         {% if office.accesPmr != null %}
  127.                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  128.                             aria-hidden="true" role="img" class="iconify iconify--bx color2" width="25" height="25"
  129.                             preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  130.                             <circle cx="9" cy="4" r="2" fill="currentColor"></circle>
  131.                             <path fill="currentColor"
  132.                                 d="M16.98 14.804A1 1 0 0 0 16 14h-4.133l-.429-3H16V9h-4.847l-.163-1.142A1 1 0 0 0 10 7H9a1.003 1.003 0 0 0-.99 1.142l.877 6.142A2.009 2.009 0 0 0 10.867 16h4.313l.839 4.196c.094.467.504.804.981.804h3v-2h-2.181l-.839-4.196z">
  133.                             </path>
  134.                             <path fill="currentColor"
  135.                                 d="M12.51 17.5c-.739 1.476-2.25 2.5-4.01 2.5A4.505 4.505 0 0 1 4 15.5a4.503 4.503 0 0 1 2.817-4.167l-.289-2.025C3.905 10.145 2 12.604 2 15.5C2 19.084 4.916 22 8.5 22a6.497 6.497 0 0 0 5.545-3.126l-.274-1.374H12.51z">
  136.                             </path>
  137.                         </svg>
  138.                         {{ office.accesPmr|replace({
  139.                                 '<p>': '<span>',
  140.                                 '</p>': '</span>'
  141.                             })|raw }}<br><br>
  142.                         {% endif %}
  143.                     </div>
  144.                 </div>
  145.             </div>
  146.         </div>
  147.         {% endfor %}
  148.     </div>
  150. </section>
  152. <section class="container-fluid offices-cards-prefooter">
  153. </section>
  155. <script>
  156.     let imageContainer = document.querySelectorAll('.hoverimage');
  158.     imageContainer.forEach(container => {
  159.         container.addEventListener('mouseover', function() {
  160.             let bgImage = container.children[1];
  162.             if (bgImage.classList.contains('nodisplay') != false)
  163.             {
  164.                 bgImage.classList.remove('nodisplay');
  165.             }
  166.         })
  168.         container.addEventListener('mouseleave', function() {
  169.             let bgImage = container.children[1];
  171.             if (bgImage.classList.contains('nodisplay') == false)
  172.             {
  173.                 bgImage.classList.add('nodisplay');
  174.             }
  175.         })
  176.     })
  177. </script>
  178. {% endblock %}