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

Open in your IDE?
  1. {% extends 'Nordinfo/Main/base.html.twig' %}
  2. {% block title %}Contacts et élus - Nord Info{% endblock %}
  3. {% block body_class %}body-contacts
  4. {% endblock %}
  5. {% block header_epingles %}
  6.   {{ include('Lenord/Main/parts/epingles.html.twig') }}
  7. {% endblock %}
  8. {% block header_breadcrumb %}
  9.   {{ include('Nordinfo/Main/parts/breadcrumb.html.twig') }}
  10. {% endblock %}
  11. {% block body %}
  12.   <main role="main" class="mainContent pt-5" id="mainContent" tabindex="-1" data-aria-hidden-by-modal>
  13.     {% if referer is not null %}
  14.       {% set url_back = referer %}
  15.     {% else %}
  16.       {% set url_back = path('info') %}
  17.     {% endif %}
  18.     {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'_list-page'} %}
  19.     <div class="container">
  20.       <div class="containerPageHeader">
  21.         <h1>Contacts et élus</h1>
  22.         <p class="text-center"><strong>{{ filter_title }}</strong></p>
  23.       </div>
  24.     </div>
  25.     <hr class="hrBrown mb-0 mt-0">
  26.     <div class="filtersBarContainer">
  27.       <div class="container">
  28.         <div class="__inner">
  29.           <div class="__col-filters">
  30.             <div class="filtersBar">
  31.               <ul>
  32.                 <li {% if is_search == 0 %}class="active"{% endif %}>
  33.                   <a href="{{ path('contacts') }}" {% if is_search == 0 %}aria-current="true"{% endif %}>
  34.                     <svg aria-hidden="true" focusable="false" id="Layer_1" class="__icon" data-name="Layer 1"
  35.                          xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32.2 39.1">
  36.                       <path class="cls-1"
  37.                             d="M29.4,0H2.7A2.69,2.69,0,0,0,0,2.7V33.3H0v3.1a2.69,2.69,0,0,0,2.7,2.7H29.5a2.69,2.69,0,0,0,2.7-2.7V2.5A2.82,2.82,0,0,0,29.4,0ZM7.9,27.2a2.9,2.9,0,1,1,2.9-2.9A2.9,2.9,0,0,1,7.9,27.2Zm0-8.3A2.9,2.9,0,1,1,10.8,16,2.9,2.9,0,0,1,7.9,18.9Zm0-8.3a2.9,2.9,0,1,1,2.9-2.9A2.9,2.9,0,0,1,7.9,10.6ZM28.1,24.4A2.05,2.05,0,0,1,26,26.5H15.2a2.05,2.05,0,0,1-2.1-2.1V24a2.05,2.05,0,0,1,2.1-2.1H26A2.05,2.05,0,0,1,28.1,24Zm.7-8.3a2.05,2.05,0,0,1-2.1,2.1H15.3a2.05,2.05,0,0,1-2.1-2.1v-.3a2.05,2.05,0,0,1,2.1-2.1H26.7a2.05,2.05,0,0,1,2.1,2.1Zm0-8.2A2.05,2.05,0,0,1,26.7,10H15.3a2.05,2.05,0,0,1-2.1-2.1V7.6a2.05,2.05,0,0,1,2.1-2.1H26.7a2.05,2.05,0,0,1,2.1,2.1Z"/>
  38.                     </svg>
  39.                     <svg aria-hidden="true" focusable="false" version="1.1" id="Layer_1"
  40.                          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  41.                          viewbox="0 0 93.1 69.5" style="enable-background:new 0 0 93.1 69.5;" xml:space="preserve"
  42.                          class="__check">
  43.                                                 <g>
  44.                           <g>
  45.                             <path d="M93.1,11.8C93.1,12,93,12.2,93,12.4c-0.2,0.8-0.6,1.6-1.2,2.2C73.9,32.4,56.1,50.2,38.2,68.1c-1.8,1.8-4.8,1.8-6.6,0
  46.                                                                                                                                                                                                       C21.6,58,11.5,47.9,1.4,37.8c-1.9-1.9-1.9-4.8,0-6.6C3.6,29,5.8,26.8,8,24.6c1.8-1.8,4.7-1.8,6.6,0c6.7,6.7,13.3,13.3,20,20
  47.                                                                                                                                                                                                       c0.1,0.1,0.2,0.3,0.4,0.5c0.2-0.2,0.3-0.4,0.4-0.6C49.7,30.2,64.1,15.8,78.5,1.5c2-2,4.8-2,6.8,0c2.1,2.1,4.3,4.3,6.4,6.4
  48.                                                                                                                                                                                                       c0.8,0.8,1.2,1.6,1.4,2.7c0,0,0,0.1,0.1,0.1C93.1,11,93.1,11.4,93.1,11.8z"/>
  49.                           </g>
  50.                         </g>
  51.                                             </svg>
  52.                     <span>Liste complète</span>
  53.                   </a>
  54.                 </li>
  55.                 <li {% if app.request.query.all['canton_id'] is defined %}class="active"{% endif %}>
  56.                   <a href="#" data-toggle="modal" {% if app.request.query.all['canton_id'] is defined %}aria-current="true"{% endif %} data-target="#modalContactsFilter">
  57.                     <svg aria-hidden="true" focusable="false" id="Layer_1" data-name="Layer 1" class="__icon"
  58.                          xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22.37 34.9">
  59.                       <path class="cls-1"
  60.                             d="M21.52,16.5a12.14,12.14,0,0,0,.2-8.4,6.94,6.94,0,0,0-.5-1.3c-.1-.2-.1-.3-.2-.5a2.51,2.51,0,0,0-.4-.7,2.19,2.19,0,0,0-.3-.5l-.6-.9a10.6,10.6,0,0,0-6.6-4h0A7.49,7.49,0,0,0,11,0a10.26,10.26,0,0,0-8.4,4.5v.1A12,12,0,0,0,.92,16.7c2.4,6.3,6,11.8,10.3,18.2,3.5-5.1,7-10.4,9.4-16.2A8.49,8.49,0,0,0,21.52,16.5Zm-9.9-.1h-.5a4.91,4.91,0,0,1-4.5-4.9,5.08,5.08,0,0,1,5-5,5,5,0,0,1,4.9,4.9A5.13,5.13,0,0,1,11.62,16.4Z"/>
  61.                     </svg>
  62.                     <svg aria-hidden="true" focusable="false" version="1.1" id="Layer_1"
  63.                          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  64.                          viewbox="0 0 93.1 69.5" style="enable-background:new 0 0 93.1 69.5;" xml:space="preserve"
  65.                          class="__check">
  66.                                                 <g>
  67.                           <g>
  68.                             <path d="M93.1,11.8C93.1,12,93,12.2,93,12.4c-0.2,0.8-0.6,1.6-1.2,2.2C73.9,32.4,56.1,50.2,38.2,68.1c-1.8,1.8-4.8,1.8-6.6,0
  69.                                                                                                                                                                                                       C21.6,58,11.5,47.9,1.4,37.8c-1.9-1.9-1.9-4.8,0-6.6C3.6,29,5.8,26.8,8,24.6c1.8-1.8,4.7-1.8,6.6,0c6.7,6.7,13.3,13.3,20,20
  70.                                                                                                                                                                                                       c0.1,0.1,0.2,0.3,0.4,0.5c0.2-0.2,0.3-0.4,0.4-0.6C49.7,30.2,64.1,15.8,78.5,1.5c2-2,4.8-2,6.8,0c2.1,2.1,4.3,4.3,6.4,6.4
  71.                                                                                                                                                                                                       c0.8,0.8,1.2,1.6,1.4,2.7c0,0,0,0.1,0.1,0.1C93.1,11,93.1,11.4,93.1,11.8z"/>
  72.                           </g>
  73.                         </g>
  74.                                             </svg>
  75.                     <span>Filtre géographique</span>
  76.                   </a>
  77.                 </li>
  78.               </ul>
  79.             </div>
  80.           </div>
  81.           <div class="__col-search">
  82.             <form action="{{ path('search_contact') }}" class="formSearchMain form">
  83.               <label class="sr-only" for="inputSearch">Recherche</label>
  84.               <div class="__input-wrapper">
  85.                 <input name="search" type="text" id="inputSearch" placeholder="Rechercher"
  86.                        class="form-control __input-search" title="Rechercher">
  87.                 <button type="submit" class="__btn-search">
  88.                   <img src="{{ asset('img/brandmaster/icon-search-le-nord.svg') }}" alt="">
  89.                   <span class="sr-only">rechercher un élu</span>
  90.                 </button>
  91.               </div>
  92.             </form>
  93.           </div>
  94.         </div>
  95.       </div>
  96.     </div>
  97.     <hr class="hrBrown mb-0 mt-0">
  98.     <div class="containerContactsList">
  99.       <div class="__inner">
  100.         <div class="__col-contacts">
  101.           <div class="container">
  103.             <ul>
  104.               {% for contact in contacts %}
  105.                 <li>
  106.                   <a href="{{ path('contact_detail', {'slug': contact.slug}) }}" class="itemContact"
  107.                      data-first-letter="{{ contact.firstName|first }}">
  108.                     <div class="__inner">
  109.                       <div class="__col-img">
  110.                         <div class="__img"
  111.                              style="background-image:url('{{ asset('upload/images/'~contact.picture) }}')"></div>
  112.                       </div>
  113.                       <div class="__col-text">
  114.                         <div class="__name">
  115.                                                         <span>{{ contact.firstName }}
  116.                               {{ contact.lastName }}</span>
  117.                         </div>
  118.                         <div class="__info">
  119.                           {% if contact.civilite == "Mr" %}Conseiller départemental{% else %}Conseillère départementale{% endif %}
  120.                           {% if contact.shortDescription is not null %}
  121.                             -
  122.                             {{ contact.shortDescription }}
  123.                           {% endif %}
  124.                           {% if contact.canton is not null %}
  125.                             -
  126.                             {{ contact.canton.canton }}
  127.                           {% endif %}
  128.                         </div>
  129.                       </div>
  130.                     </div>
  131.                   </a>
  132.                 </li>
  133.               {% endfor %}
  134.             </ul>
  135.           </div>
  136.         </div>
  137.         <div class="__col-letters">
  138.           <div class="container-letters" id="containerLetters">
  139.             <ul>
  140.               <li>A</li>
  141.               <li>B</li>
  142.               <li>C</li>
  143.               <li>D</li>
  144.               <li>E</li>
  145.               <li>F</li>
  146.               <li>G</li>
  147.               <li>H</li>
  148.               <li>I</li>
  149.               <li>J</li>
  150.               <li>K</li>
  151.               <li>L</li>
  152.               <li>M</li>
  153.               <li>N</li>
  154.               <li>O</li>
  155.               <li>P</li>
  156.               <li>Q</li>
  157.               <li>R</li>
  158.               <li>S</li>
  159.               <li>T</li>
  160.               <li>U</li>
  161.               <li>V</li>
  162.               <li>W</li>
  163.               <li>X</li>
  164.               <li>Y</li>
  165.               <li>Z</li>
  166.             </ul>
  167.           </div>
  168.         </div>
  169.       </div>
  170.       <div style="padding-bottom:200px;"></div>
  171.     </div>
  172.     <div class="modal fade modalCustom _no-header" id="modalContactsFilter" tabindex="-1" role="dialog"
  173.          aria-label="Filtre géographique" aria-hidden="true">
  174.       <div class="modal-dialog" role="document">
  175.         <button type="button" class="close" data-dismiss="modal">
  176.           <span aria-hidden="true">&times;</span>
  177.           <span class="sr-only">Fermer Filtre géographique</span>
  178.         </button>
  179.         <div class="modal-content">
  180.           <div class="modal-body">
  181.             <form action="{{ path('search_contact') }}" id="formContactsFilter">
  182.               <div class="form-group">
  183.                 <label for="selectCanton">
  184.                   <strong>Votre canton :</strong>
  185.                 </label>
  186.                 <select class="form-control" name="canton_id" id="selectCanton" aria-label="Votre canton, mise à jour de la liste des conseillers départementaux à la sélection d'un canton">
  187.                   <option value="" selected>Votre canton</option>
  188.                   {% for canton in cantons %}
  189.                     <option value="{{ canton.id }}">{{ canton.canton }}</option>
  190.                   {% endfor %}
  191.                 </select>
  192.               </div>
  193.               <div class="separatorOr">
  194.                 <p>ou</p>
  195.               </div>
  196.               <div class="form-group">
  197.                 <label for="inputCommune">
  198.                   <strong>Votre commune :</strong>
  199.                 </label>
  200.                 <input class="form-control" name="search" id="inputCommune" type="text"
  201.                        placeholder="Saisir le nom de votre commune">
  202.               </div>
  203.               <div
  204.                 class="text-right">
  205.                 <button type="submit" class="btn btnSubmit">
  206.                   <span class="__text">Confirmer</span>
  207.                 </button>
  208.               </div>
  209.             </form>
  210.           </div>
  211.         </div>
  212.       </div>
  213.     </div>
  214.   </main>
  215. {% endblock %}