templates/Services/base.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% block html_class_site_variant %}htmlNordServices
  3. {% endblock %}
  4. {% block body_class_site_variant %}bodyNordServices
  5. {% endblock %}
  6. {% block header_main_css_class %}--nordServices
  7. {% endblock %}
  8. {% block title %}
  9.     {% if title == "" %}Nord services
  10.     {% else %}
  11.         {{ title }}
  12.         - Nord services
  13.     {% endif %}
  14. {% endblock %}
  15. {% block seo %}
  16.     {% if breadcrumb is defined and breadcrumb|length > 0 and seo_breadcrumb is defined %}
  17.          <script type="application/ld+json">
  18.                       {{ seo_breadcrumb|raw }}
  19.             </script>
  20.     {% endif %}
  21. {% endblock %}
  22. {% block favicon %}
  23.     <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('img/favicon/favicon_services.png') }}">
  24.     <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('img/favicon/favicon_services.png') }}">
  25.     <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('img/favicon/favicon_services.png') }}">
  26.     <link rel="manifest" href="{{ asset('img/favicon/nord-services') }}/site.webmanifest">
  27.     <meta name="msapplication-TileColor" content="#da532c">
  28.     <meta name="theme-color" content="#ffffff">
  29. {% endblock %}
  30. {% block stylesheets %}
  31.     {{ encore_entry_link_tags('common') }}
  32.     <link href="{{ asset('css/colleges.css') }}?ver=1.0.6" rel="stylesheet">
  33. {% endblock %}
  34. {% block header_logo %}
  35.     <a href="{{ app.request.getSchemeAndHttpHost() }}" data-tabindex-mobile="1" title="Aller à l'accueil du site Nord Services">
  36.         <div>
  37.             <img src="{{ asset('img/logos/logo-nord-services.svg') }}" alt="Nord Services (retourner à la page d'accueil)">
  38.         </div>
  39.     </a>
  40. {% endblock %}
  41. {% block header_logo_pdf %}
  42.     <div style="text-align:center;">
  43.         <img src="https://spontaneit1.fra1.digitaloceanspaces.com/nord-services/images/logos/logo-nord-services.png" style="width:190px;height:75px;display:inline-block;" alt="">
  44.     </div>
  45. {% endblock %}
  46. {% block header_logo_print %}
  47.     <div style="text-align:center;" class="d-print-block d-none">
  48.         <img src="https://spontaneit1.fra1.digitaloceanspaces.com/nord-services/images/logos/logo-nord-services.png" style="width:190px;height:75px;display:inline-block;" alt="">
  49.     </div>
  50. {% endblock %}
  51. {% block header_col_dynamic %}
  52.     <nav class="__col _glossaire --nord-services">
  53.         <a href="/glossaire" class="{% if app.request.pathinfo == '/glossaire' %}active{% endif %}">
  54.             <span>Glossaire</span>
  55.         </a>
  56.     </nav>
  57. {% endblock %}
  58. {% block header_mobile_dynamic %}
  59.     <li>
  60.         <a href="/glossaire" class="{% if app.request.pathinfo == '/glossaire' %}active{% endif %}">
  61.             <span>Glossaire</span>
  62.         </a>
  63.     </li>
  64. {% endblock %}
  65. {% block header_col_login %}
  66.     <li style="display:flex;align-items:center;transform:translateY(-1px)">
  67.         {% if app.user %}
  68.             <a href="{{ services_account }}" title="Accéder à mon compte" class="linkLogin _services --logged-in">
  69.                 <div class="__inner">
  70.                     {{ source('svg/user-solid.svg') }}
  71.                     <span>
  72.             {% if app.user.prenom|default %}{{ app.user.prenom }}{% endif %}
  73.             {% if app.user.nom|default %}{{ app.user.nom }}{% endif %}
  74.           </span>
  75.                 </div>
  76.             </a>
  77.       <a href="{{ path('oauth_logout') }}">Déconnexion</a>
  78.         {% else %}
  79.             <a href="{{ path('connect_keycloak') }}" class="linkLogin _services">
  80.                 <div class="__inner">
  81.                     {{ source('svg/user-solid.svg') }}
  82.                     <span>Connexion</span>
  83.                 </div>
  84.             </a>
  85.         {% endif %}
  86.     </li>
  87. {% endblock %}
  88. {% block header_form_search %}
  89.     <form action="{{ path('services_recherche') }}" method="GET" class="formSearchMain _header form --nordServices">
  90.         <label for="inputSearch" hidden>Je recherche</label>
  91.         <div class="__input-wrapper">
  92.             <input required name="search" title="Je recherche" type="text" id="inputSearch" data-tabindex-mobile="5" placeholder="Je recherche" class="form-control __input-search">
  93.             <input type="hidden" name="checkservices" value="on">
  94.             <input type="hidden" name="checkactualites" value="on">
  95.             <input type="hidden" name="checkevenements" value="on">
  96.             <input type="hidden" name="checkdocuments" value="on">
  97.             <button type="submit" class="__btn-search" data-tabindex-mobile="5">
  98.                 <img src="{{ asset('img/brandmaster/icon-search-1.svg') }}" alt="" aria-hidden="true">
  99.                 <span class="sr-only">Recherche</span>
  100.             </button>
  101.         </div>
  102.     </form>
  103. {% endblock %}
  104. {% block header_dropdown_user_menu %}
  105.     <div class="dropdown dropdownUserMenuHeader --nordServices" id="dropdownUserMenu">
  106.         <button class="toggleUserMenu" role="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  107.             <span class="__name">
  108.                 <span class="__left">
  109.                     <span>Menu</span>
  110.                 </span>
  111.                 <span class="__right">
  112.                     <svg aria-hidden="true" focusable="false" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 19.6 7.3">
  113.                         <g id="Ligne_22" data-name="Ligne 22">
  114.                             <rect y="6.3" width="19.6" height="1"/>
  115.                         </g>
  116.                         <g id="Ligne_23" data-name="Ligne 23">
  117.                             <rect y="3.2" width="19.6" height="1"/>
  118.                         </g>
  119.                         <g id="Ligne_24" data-name="Ligne 24">
  120.                             <rect width="19.6" height="1"/>
  121.                         </g>
  122.                     </svg>
  123.                 </span>
  124.             </span>
  125.         </button>
  126.         <div class="dropdown-menu dropdown-menu-right" aria-label="Menu" role="navigation">
  127.             <ul>
  128.                 {% if app.user %}
  129.                     <li class="_user _services" role="menuitem">
  130.             <a href="{{ path('oauth_logout') }}" class="linkLogout">
  131.               <div class="__inner">
  132.                 <span>Se déconnecter</span>
  133.               </div>
  134.             </a>
  135.                         <a href="{{ services_account }}" class="linkLogin --logged-in" data-tabindex-mobile="3" aria-current="true">
  136.                             <div class="__inner">
  137.                                 {{ source('svg/user-solid.svg') }}
  138.                                 <span>
  139.                   {% if app.user.prenom|default %}{{ app.user.prenom }}{% endif %} {% if app.user.nom|default %}{{ app.user.nom }}{% endif %}
  140.                 </span>
  141.                             </div>
  142.                         </a>
  143.                     </li>
  144.                 {% else %}
  145.                     <li class="_user _services" role="menuitem">
  146.                         <a href="{{ path('connect_keycloak') }}" class="linkLogin" data-tabindex-mobile="3" aria-current="true">
  147.                             <div class="__inner">
  148.                                 {{ source('svg/user-solid.svg') }}
  149.                                 <span>Connexion</span>
  150.                             </div>
  151.                         </a>
  152.                     </li>
  153.                 {% endif %}
  154.                 <li role="menuitem">
  155.                     <a class="dropdown-item {% if slug is defined and slug == 'particulier' %}active{% endif %}" href="{{ path('services_services', {'slug': 'particulier'}) }}" {% if slug is defined and slug == 'particulier' %} aria-current="true" {% endif %} data-tabindex-mobile="3">
  156.                         <span>Particulier</span>
  157.                     </a>
  158.                 </li>
  159.                 <li role="menuitem">
  160.                     <a class="dropdown-item {% if slug is defined and slug == 'professionnel' %}active{% endif %}" href="{{ path('services_services', {'slug': 'professionnel'}) }}" {% if slug is defined and slug == 'professionnel' %} aria-current="true" {% endif %} data-tabindex-mobile="3">
  161.                         <span>Professionnel</span>
  162.                     </a>
  163.                 </li>
  164.                 <li role="menuitem">
  165.                     <a class="dropdown-item {% if slug is defined and slug == 'association' %}active{% endif %}" href="{{ path('services_services', {'slug': 'association'}) }}" {% if slug is defined and slug == 'association' %} aria-current="true" {% endif %} data-tabindex-mobile="3">
  166.                         <span>Association</span>
  167.                     </a>
  168.                 </li>
  169.                 <li role="menuitem">
  170.                     <a class="dropdown-item --pBExtra {% if slug is defined and slug == 'collectivite' %}active{% endif %}" href="{{ path('services_services', {'slug': 'collectivite'}) }}" {% if slug is defined and slug == 'collectivite' %} aria-current="true" {% endif %} data-tabindex-mobile="3">
  171.                         <span>Collectivité</span>
  172.                     </a>
  173.                 </li>
  174.                 <li role="menuitem">
  175.                     <a class="dropdown-item --pTExtra --glossaire {% if app.request.pathinfo == '/glossaire' %}active{% endif %}" href="/glossaire" data-tabindex-mobile="3">
  176.                         <span>Glossaire</span>
  177.                     </a>
  178.                 </li>
  179.                 <li role="menuitem">
  180.                     <a class="dropdown-item {% if app.request.pathinfo == '/formulaire-de-contact' or is_page_politique|default %}active{% endif %}" href="{{ path('services_support') }}" data-tabindex-mobile="3">
  181.                         <span>Contact</span>
  182.                     </a>
  183.                 </li>
  184.             </ul>
  185.         </div>
  186.     </div>
  187.     <div class="__containerBtnContact">
  188.         <a href="{{ path('services_support') }}" class="{% if app.request.pathinfo == '/formulaire-de-contact' or is_page_politique|default %}--active{% endif %}">
  189.             <span class="__title">Nous contacter</span>
  190.             <span class="__icon">
  191.                 {{ source('svg/icons/icon-envelope.svg') }}
  192.             </span>
  193.         </a>
  194.     </div>
  195. {% endblock %}
  196. {% block header_logo_mobile %}
  197.     <div class="__containerLogoMobile">
  198.         <a href="{{ app.request.getSchemeAndHttpHost() }}" title="Aller à l'accueil du site Nord Services">
  199.             <div>
  200.                 <img src="{{ asset('img/logos/logo-nord-services.svg') }}" alt="Nord Services (retourner à la page d'accueil)">
  201.             </div>
  202.         </a>
  203.     {{ include('Nordinfo/Main/parts/menu_button.html.twig') }}
  204.     </div>
  205. {% endblock %}
  206. {% block header_nav %}
  207.     <div class="navHeaderWrapperOuter">
  208.         <div class="navHeaderWrapper --nordServices" id="navHeaderWrapper">
  209.             <nav class="__inner" aria-label="principale" role="navigation">
  210.                 <ul class="nav justify-content-center navHeader --nordServices">
  211.                     <li class="nav-item {% if slug is defined and slug == 'particulier' %}active{% endif %}">
  212.                         <a class="nav-link" href="{{ path('services_services', {'slug': 'particulier'}) }}" {% if slug is defined and slug == 'particulier' %} aria-current="true" {% endif %} data-focus-menu-target>
  213.                             <span>particulier</span>
  214.                         </a>
  215.                     </li>
  216.                     <li class="nav-item {% if slug is defined and slug == 'professionnel' %}active{% endif %}">
  217.                         <a class="nav-link" href="{{ path('services_services', {'slug': 'professionnel'}) }}" {% if slug is defined and slug == 'professionnel' %} aria-current="true" {% endif %}>
  218.                             <span>professionnel</span>
  219.                         </a>
  220.                     </li>
  221.                     <li class="nav-item {% if slug is defined and slug == 'association' %}active{% endif %}">
  222.                         <a class="nav-link" href="{{ path('services_services', {'slug': 'association'}) }}" {% if slug is defined and slug == 'association' %} aria-current="true" {% endif %}>
  223.                             <span>association</span>
  224.                         </a>
  225.                     </li>
  226.                     <li class="nav-item {% if slug is defined and slug == 'collectivite' %}active{% endif %}">
  227.                         <a class="nav-link" href="{{ path('services_services', {'slug': 'collectivite'}) }}" {% if slug is defined and slug == 'collectivite' %} aria-current="true" {% endif %}>
  228.                             <span>collectivité</span>
  229.                         </a>
  230.                     </li>
  231.                 </ul>
  232.             </nav>
  233.         </div>
  234.     </div>
  235. {% endblock %}
  236. {% block footer %}
  237.     {% if is_pdf != 1 %}
  238.         <footer class="d-print-none" role="contentinfo">
  239.       {% block footer_top %}{% endblock %}
  240.       {% include 'Nordinfo/Main/parts/preFooter.html.twig' with {prefooter_template: 'services'} %}
  241.             <div class="footer --leNord" data-aria-hidden-by-modal>
  242.                 <div class="__top">
  243.                     <div class="container">
  244.                         <div class="__inner">
  245.                             <div class="__col">
  246.                                 <a href="https://lenord.fr" title="Aller à l'accueil du site du Nord, le Département est là">
  247.                                     {{ source('svg/footer_logo.svg') }}
  248.                                 </a>
  249.                             </div>
  250.                             <div class="__col">
  251.                                 <address>
  252.                                     {{ footer.adresse|raw }}
  253.                                 </address>
  254.                             </div>
  255.                             <div class="__col">
  256.                                 <ul class="listButtons">
  257.                                     <li>
  258.                                         <a href="{{ path('services_support') }}">
  259.                                             <div class="__inner">
  260.                                                 <span class="__icon">{{ source('svg/icons/icon-envelope.svg') }}</span>
  261.                                                 <span class="__text">Formulaire de contact</span>
  262.                                             </div>
  263.                                         </a>
  264.                                     </li>
  265.                                     <li>
  266.                                         <a href="tel:{{ footer.telephoneUrl }}">
  267.                                             <div class="__inner">
  268.                                                 <span class="__icon">{{ source('svg/icons/icon-telephone.svg') }}</span>
  269.                                                 <span class="__text">{{ footer.telephone|raw }}</span>
  270.                                             </div>
  271.                                         </a>
  272.                                     </li>
  273.                                     <li>
  274.                                         <a href="{{ footer.lienAcceo }}" class="--icon-external" title="Sourd ou malentendant ? - Aller sur la page du Département du Nord sur Acceo (site externe)">
  275.                                             <div class="__inner">
  276.                                                 <span class="__icon">{{ source('svg/icons/icon-ear.svg') }}</span>
  277.                                                 <span class="__text">
  278.                                                     <span class="__inner">Sourd ou malentendant ?</span>
  279.                                                     <span class="__icon">{{ source('svg/icons/icon-external.svg') }}</span>
  280.                                                 </span>
  281.                                             </div>
  282.                                         </a>
  283.                                     </li>
  284.                                 </ul>
  285.                             </div>
  286.                         </div>
  287.                         <div class="containerListIconsSocial">
  288.                             {{ footer.reseauxSociaux|raw }}
  289.                         </div>
  290.                     </div>
  291.                 </div>
  292.                 <div class="__bottom">
  293.                     <div class="container">
  294.                         <ul>
  295.                             <li><a href="{{ path('services_detail_service', {slug: 'mentions-legales-nord-services'}) }}"><span>Mentions légales</span></a></li>
  296.                             <li><a href="{{ path('services_detail_service', {slug: 'accessibilite-nord-services'}) }}"><span>Accessibilité : partiellement conforme</span></a></li>
  297.                             <li><a href="{{ path('services_plandusite') }}"><span>Plan du site</span></a></li>
  298.                         </ul>
  299.                     </div>
  300.                     <a target="_blank" href="#0" class="buttonBtt cd-top js-cd-top no-print no-pdf no-external-icon" data-toggle="tooltip" data-placement="top" title="retour en haut de page">
  301.                         <svg aria-hidden="true" focusable="false" data-name="Calque 1" viewbox="0 0 283.5 283.5" xmlns="http://www.w3.org/2000/svg">
  302.                             <defs></defs>
  303.                             <title>retour en haut de page</title>
  304.                             <g data-name="Chevron horizontal" id="Chevron_horizontal">
  305.                                 <path class="" d="M7.09,190.21l125.1-126.6a13.4,13.4,0,0,1,18.9-.2l.2.2,125.1,126.6a19.92,19.92,0,0,1,0,27.9,19.4,19.4,0,0,1-27.4.2l-.2-.2-107-108.3-107,108.3a19.4,19.4,0,0,1-27.4.2l-.2-.2a19.83,19.83,0,0,1-.1-27.9" id="Chevron"></path>
  306.                             </g>
  307.                         </svg>
  308.                         <span class="sr-only">Retour en haut de page</span>
  309.                     </a>
  310.                 </div>
  311.             </div>
  312.       <script>
  313.         (function() {
  314.           document.querySelectorAll('address strong').forEach((strong) => {
  315.             const span = document.createElement('span');
  316.             span.className = 'font-weight-bold';
  317.             span.innerHTML = strong.innerHTML;
  318.             strong.replaceWith(span);
  319.           });
  320.         })();
  321.       </script>
  322.         </footer>
  323.     {% endif %}
  324.     {% if false %}
  325.         <footer class="d-print-none" role="contentinfo">
  326.             <div class="footer --nordServices" data-aria-hidden-by-modal>
  327.                 <div class="container">
  328.                     <div class="footer__inner --nordServices">
  329.                         <div class="__col-left">
  330.                             <div class="__inner">
  331.                                 <div class="__col-left">
  332.                                     <a href="https://lenord.fr" target="_blank" class="__anchor" title="Aller à l'accueil du site du Nord, le Département est là">
  333.                                         <span>Un service proposé par</span>
  334.                                         {{ source('svg/footer_logo.svg') }}
  335.                                     </a>
  336.                                 </div>
  337.                             </div>
  338.                         </div>
  339.                         <div class="__col-right">
  340.                             <ul class="footer__menu --nordServices">
  341.                                 <li>
  342.                                     <a href="{{ path('services_support') }}">
  343.                                         <span>Contact</span>
  344.                                     </a>
  345.                                 </li>
  346.                                 <li>
  347.                                     <a href="{{ path('services_detail_service', {slug: 'mentions-legales-nord-services'}) }}">
  348.                                         <span>Mentions légales</span>
  349.                                     </a>
  350.                                 </li>
  351.                                 <li>
  352.                                     <a href="{{ path('services_detail_service', {slug: 'accessibilite-nord-services'}) }}">
  353.                                         <span>Accessibilité: non conforme</span>
  354.                                     </a>
  355.                                 </li>
  356.                                 <li>
  357.                                     <a href="{{ path('services_plandusite') }}">
  358.                                         <span>Plan du site</span>
  359.                                     </a>
  360.                                 </li>
  361.                             </ul>
  362.                         </div>
  363.                     </div>
  364.                 </div>
  365.                 <a target="_blank" href="#0" class="buttonBtt cd-top js-cd-top no-print no-pdf no-external-icon --nordServices" data-toggle="tooltip" data-placement="top" title="retour en haut de page">
  366.                     <svg aria-hidden="true" focusable="false" data-name="Calque 1" viewbox="0 0 283.5 283.5" xmlns="http://www.w3.org/2000/svg">
  367.                         <defs></defs>
  368.                         <title>retour en haut de page</title>
  369.                         <g data-name="Chevron horizontal" id="Chevron_horizontal">
  370.                             <path class="" d="M7.09,190.21l125.1-126.6a13.4,13.4,0,0,1,18.9-.2l.2.2,125.1,126.6a19.92,19.92,0,0,1,0,27.9,19.4,19.4,0,0,1-27.4.2l-.2-.2-107-108.3-107,108.3a19.4,19.4,0,0,1-27.4.2l-.2-.2a19.83,19.83,0,0,1-.1-27.9" id="Chevron"></path>
  371.                         </g>
  372.                     </svg>
  373.                     <span class="sr-only">Retour en haut de page</span>
  374.                 </a>
  375.             </div>
  376.         </footer>
  377.     {% endif %}
  378. {% endblock %}