templates/page-listing-v1.html.twig line 1

Open in your IDE?
  1. {% extends 'parent.html.twig' %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.   <style>
  6.   .area{
  7.     position: absolute;
  8.     right: 1.5vw;
  9.     font-weight: bold;
  10.   }
  11.   .invisible{
  12.     display: none;
  13.   }
  14.   @media(max-width: 756px)
  15.   {
  16.     .asRange
  17.     {
  18.       margin-top: 115px;
  19.     }
  20.   }
  21.   </style>
  22. {% endblock %}
  24. {% block body %}
  25.   <!-- Listing Grid View -->
  26.   <section class="our-listing pb30-991">
  27.     <div class="container">
  28.       <div class="row">
  29.         <div class="col-lg-12">
  30.           <div class="listing_sidebar dn db-lg">
  31.             <div class="sidebar_content_details style3">
  32.               <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
  33.               <div class="sidebar_listing_list style2 mobile_sytle_sidebar mb0">
  34.                 <div class="siderbar_widget_header">
  35.                   <h4 class="title mb0">Trouvez votre panneau<a class="filter_closed_btn float-right" href="#"><small>x</small><span class="flaticon-close"></span></a></h4>
  36.                 </div>
  37.                 <form method="get">
  38.                   <div class="sidebar_advanced_search_widget">
  39.                     <ul class="sasw_list mb0">
  40.                       <li class="search_area">
  41.                         <div class="form-group">
  42.                           <input type="text" class="form-control form_control" placeholder="Nom du panneau" name="name" value="{% if name is defined %}{{ name }}{% endif %}">
  43.                         </div>
  44.                       </li>
  45.                       <li>
  46.                         <div class="search_option_two">
  47.                           <div class="sidebar_select_options">
  48.                             <select class="selectpicker w100 show-tick" name="type">
  49.                               <option value="0">Tous types</option>
  50.                             {% for type_panel in type_panels %}
  51.                               <option value="{{ loop.index }}" {% if loop.index == type %}selected{% endif %}>{{ type_panel.name }}</option>
  52.                             {% endfor %}
  53.                             </select>
  54.                           </div>
  55.                         </div>
  56.                       </li>
  57.                       <li>
  58.                         <div class="search_option_two">
  59.                           <div class="sidebar_select_options">
  60.                             <select class="selectpicker w100 show-tick">
  61.                               <option>Toutes les villes</option>
  62.                               <option value="London">London</option>
  63.                               <option value="NewYork">New York</option>
  64.                               <option value="Paris">Paris</option>
  65.                               <option value="Istanbul">Istanbul</option>
  66.                               <option value="Amsterdam">Amsterdam</option>
  67.                               <option value="Rome">Rome</option>
  68.                               <option value="LogAngeles">Log Angeles</option>
  69.                             </select>
  70.                           </div>
  71.                         </div>
  72.                       </li>
  73.                       <li>
  74.                         <div class="sidebar_priceing_slider_mobile">
  75.                           <div class="wrapper">
  76.                             <p class="mb0">Prix</p>
  77.                             <div class="mt20 ml10" id="slider"></div>
  78.                             <span id="slider-range-value1"></span>
  79.                             <input class="invisible" name="lowest" id="lowest"/>
  80.                             <span id="slider-range-value2"></span>
  81.                             <input class="invisible" name="highest" id="highest"/>
  82.                           </div>
  83.                         </div>
  84.                       </li>
  85.                       <li>
  86.                         <div class="sidebar_range_slider mb30 mt100">
  87.                           <input class="range-example-km mb20" value="{% if area <= 0 %}{{ max_area }}{% else %}{{ area }}{% endif %}" type="text" name="area">
  88.                         </div>
  89.                       </li>
  90.                       <li>
  91.                         <div class="search_option_button text-center mt25">
  92.                           <script>
  93.                             const lowestSelector = document.querySelector("#slider-range-value1");
  94.                             const lowestInput = document.querySelector("#lowest");
  95.                             const highestSelector = document.querySelector("#slider-range-value2");
  96.                             const highestInput = document.querySelector("#highest");
  98.                             function updateInput()
  99.                             {
  100.                               lowestInput.value = lowestSelector.textContent;
  101.                               highestInput.value = highestSelector.textContent;
  102.                             }
  103.                           </script>
  104.                           <button type="submit" class="btn btn-block btn-thm mb25" onclick="updateInput();">Chercher</button>
  105.                           <ul class="mb0">
  106.                             <li class="list-inline-item mb0"><a href="/listing-panels"><span class="vam flaticon-return mr10"></span> Réinitialiser la recherche</a></li>
  107.                           </ul>
  108.                         </div>
  109.                       </li>
  110.                     </ul>
  111.                   </div>
  112.                 </form>
  113.               </div>
  114.             </div>
  115.           </div>
  116.         </div>
  117.       </div>
  118.       <div class="row">
  119.         <div class="col-lg-12">
  120.           <div class="breadcrumb_content style2 mb100">
  121.             <h2 class="breadcrumb_title">Panneaux publicitaires à louer</h2>
  122.             <p>Trouvez le panneau qui correspond à vos critères</p>
  123.           </div>
  124.         </div>
  125.         <div class="col-lg-12">
  126.           <div class="dn db-lg mb30-md text-center">
  127.             <div id="main2"><a id="open2" class="filter_open_btn btn-thm" href="#">Filtres<span class="flaticon-setting-lines ml10"></span></a></div>
  128.           </div>
  129.         </div>
  130.       </div>
  131.       <div class="row">
  132.         <div class="col-xl-3">
  133.           <div class="sidebar_listing_grid1 mb30 dn-lg">
  134.             <div class="sidebar_listing_list">
  135.             <form method="get">
  136.               <div class="sidebar_advanced_search_widget">
  137.                 <ul class="sasw_list mb0">
  138.                   <li><h4 class="mb0">Trouvez votre panneau</h4></li>
  139.                   <li class="search_area">
  140.                     <div class="form-group">
  141.                       <input type="text" class="form-control form_control" placeholder="Nom du panneau" name="name" value="{% if name is defined %}{{ name }}{% endif %}">
  142.                     </div>
  143.                   </li>
  144.                   <li>
  145.                     <div class="search_option_two">
  146.                       <div class="sidebar_select_options">
  147.                         <select class="selectpicker w100 show-tick" name="type">
  148.                           <option value="0">Tous types</option>
  149.                           {% for type_panel in type_panels %}
  150.                             <option value="{{ loop.index }}" {% if loop.index == type %}selected{% endif %}>{{ type_panel.name }}</option>
  151.                           {% endfor %}
  152.                         </select>
  153.                       </div>
  154.                     </div>
  155.                   </li>
  156.                   <li>
  157.                     <div class="search_option_two">
  158.                       <div class="sidebar_select_options">
  159.                         <select class="selectpicker w100 show-tick">
  160.                           <option>Toutes les villes</option>
  161.                           <option value="London">London</option>
  162.                           <option value="NewYork">New York</option>
  163.                           <option value="Paris">Paris</option>
  164.                           <option value="Istanbul">Istanbul</option>
  165.                           <option value="Amsterdam">Amsterdam</option>
  166.                           <option value="Rome">Rome</option>
  167.                           <option value="LogAngeles">Log Angeles</option>
  168.                         </select>
  169.                       </div>
  170.                     </div>
  171.                   </li>
  172.                   <li>
  173.                     <div class="sidebar_priceing_slider_desktop">
  174.                       <div class="wrapper">
  175.                         <p class="mb0">Prix</p>
  176.                         <div class="slider-range"></div>
  177.                         <input type="text" class="amount" placeholder="{{ lowest }}" name="lowest"> 
  178.                         <input type="text" class="amount2" placeholder="{{ highest }}" name="highest">
  179.                         <script>
  180.                           const input1 = document.querySelector('.amount');
  181.                           const input2 = document.querySelector('.amount2');
  182.                           input1.value = input1.placeholder;
  183.                           input2.value = input2.placeholder;
  184.                         </script>
  185.                       </div>
  186.                     </div>
  187.                   </li>
  188.                   <li>
  189.                     <div class="sidebar_range_slider mb30 mt100">
  190.                       <input class="range-example-km mb20" value="{% if area <= 0 %}{{ max_area }}{% else %}{{ area }}{% endif %}" type="text" name="area">
  191.                     </div>
  192.                   </li>
  193.                   <li>
  194.                     <div class="search_option_button text-center mt25">
  195.                       <button type="submit" class="btn btn-block btn-thm mb25">Chercher</button>
  196.                       <ul class="mb0">
  197.                         <li class="list-inline-item mb0"><a href="/listing-panels"><span class="vam flaticon-return mr10"></span>Réinitialiser la recherche</a></li>
  198.                       </ul>
  199.                     </div>
  200.                   </li>
  201.                 </ul>
  202.               </div>
  203.             </div>
  204.             </form>
  205.           </div>
  206.         </div>
  207.         <div class="col-xl-9">
  208.           <div class="row">
  209.             <div class="listing_filter_row dif db-767">
  210.               <div class="col-sm-12 col-md-4 col-lg-4 col-xl-5">
  211.                 <div class="left_area tac-xsd mb30-767">
  212.                   <p class="mb0 mt10"><span class="heading-color">{{ panels|length }}</span> résultat{% if panels|length > 1 %}s{% endif %}</p>
  213.                 </div>
  214.               </div>
  215.             </div>
  216.           </div>
  217.           <div class="row">
  218.           {% if error is defined %}
  219.           <h3 style="margin: auto; color: #969696;">{{ error }}</h3>
  220.           {% endif %}
  221.             {% for panel in panels %}
  222.             <div class="col-lg-6 col-xl-4">
  223.               <div class="feat_property">
  224.                 <div class="thumb">
  225.                 
  226.                   <a href="/listing-panel-single/{{ panel.id }}"><img class="img-whp" src="{{ images[loop.index0] }}" alt="fl1.jpg"></a>
  227.                   <div class="thmb_cntnt">
  228.                     <ul class="tag mb0" style="width:95%;display: flex;justify-content: space-between;">
  229.                       <li class="list-inline-item"><a href="#" style="background-color: #0D263B;">{% if panel.typePanel|length > 0 %}{{ panel.typePanel.name }}{% endif %}</a></li>
  230.                       <li class="list-inline-item color-panel">
  231.                       <span data-toggle="tooltip" title="{% if panel.zone|length > 0 %}
  232.                         {% if panel.zone.name == "Rouge" %}Les panneaux rouges sont situés dans des zones très fréquentées. Ceux-ci vous garantiront une exposition d'enfer, de quoi faire connaitre votre marque.
  233.                         {% elseif panel.zone.name == "Bleu" %}Les panneaux bleus sont un excellent compromis entre visibilité pour votre marque et budget raisonable. De quoi vous faire connaitre sans vous ruiner !
  234.                         {% elseif panel.zone.name == "Vert" %}Ces panneaux sont situés dans des zones rurales, et donc mois fréquentées. Un panneau vert vous conviendra si vous visez un petit budget !
  235.                         {% endif %}
  236.                       {% endif %}">
  237.                       <a href="#"style="background-color:
  238.                         {% if panel.zone|length > 0 %}
  239.                           {% if panel.zone.name == "Rouge" %}#ec1e28;
  240.                           {% elseif panel.zone.name == "Bleu" %}#4188fa;
  241.                           {% elseif panel.zone.name == "Vert" %}#42ed84;
  242.                           {% endif %}
  243.                         {% else %}#0D263B;{% endif %}">{% if panel.zone|length > 0 %}{{ panel.zone.name }}{% endif %}</a></span></li>
  244.                     </ul>
  245.                   </div>
  246.                   <div class="thmb_cntnt2">
  247.                     <ul class="listing_gallery mb0">
  248.                       <li class="list-inline-item"><a class="text-white" href="#"><span class="flaticon-photo-camera mr5"></span>{{ panel.images|length }}</a></li>
  249.                       <li class="list-inline-item"><a class="text-white" href="#"><svg class="svg-icon" viewBox="0 0 20 20">
  250.                         <path fill="none" d="M19.471,8.934L18.883,8.34c-2.096-2.14-4.707-4.804-8.903-4.804c-4.171,0-6.959,2.83-8.996,4.897L0.488,8.934c-0.307,0.307-0.307,0.803,0,1.109l0.401,0.403c2.052,2.072,4.862,4.909,9.091,4.909c4.25,0,6.88-2.666,8.988-4.807l0.503-0.506C19.778,9.737,19.778,9.241,19.471,8.934z M9.98,13.787c-3.493,0-5.804-2.254-7.833-4.3C4.182,7.424,6.493,5.105,9.98,5.105c3.536,0,5.792,2.301,7.784,4.332l0.049,0.051C15.818,11.511,13.551,13.787,9.98,13.787z"></path>
  251.                         <circle fill="none" cx="9.98" cy="9.446" r="1.629"></circle>
  252.                       </svg> {{ panel.historyViews|length }}</a></li>
  253.                       <style>
  254.                       .svg-icon {
  255.                         width: 1.6em;
  256.                         height: 1.6em;
  257.                       }
  258.                       .svg-icon path,
  259.                       .svg-icon polygon,
  260.                       .svg-icon rect {
  261.                         fill: #fff;
  262.                       }
  263.                       .svg-icon circle {
  264.                         stroke: #fff;
  265.                         stroke-width: 0.5;
  266.                       }
  267.                       </style>
  268.                     </ul>
  269.                   </div>
  270.                 </div>
  271.                 <div class="details">
  272.                   <div class="tc_content">
  273.                     <h4><a href="page-listing-single-v8.html">{{panel.situation}} ({{ panel.name }})</a></h4>
  274.                     <p>{{ panel.address }}</p>
  275.                   </div>
  276.                   <div class="fp_footer">
  277.                     <ul class="fp_meta float-left mb0">
  278.                       <li class="list-inline-item">
  279.                         <a href="#">
  280.                           <span class="heading-color fw600">{{ panel.price }}&euro;</span>
  282.                         </a>
  283.                       </li>
  284.                     </ul>
  285.                     <span class="area">{{ panel.area }} m<sup>2</sup></span>
  286.                   </div>
  287.                 </div>
  288.               </div>
  289.             </div>
  290.             {% endfor %}
  291.           </div>
  292.         </div>
  293.       </div>
  294.     </div>
  295.   </section>
  297.   <!-- Our Footer -->
  298.   <section class="footer_one home1">
  299.     <div class="container pt10 pb30">
  300.       <div class="row">
  301.         <div class="col-md-4 col-lg-4">
  302.           <div class="copyright-widget mt10 mb15-767" style="display: flex; flex-direction: row; justify-content: center;">
  303.             <li class="list-inline-item list_s"><a href="#" class="btn" data-toggle="modal" data-target="#logInModal"><span class="flaticon-user" style="color: white;"></span></a></li>
  304.             <p>| © 2022 Pubup | Developed by <a href="https://wecodx.com/" target="_blank">Wecodx.</a></p>
  305.           </div>
  306.         </div>
  307.         <div class="col-md-4 col-lg-4">
  308.           <div class="footer_logo_widget text-center mb15-767">
  309.             <div class="wrapper">
  310.               <div class="logo text-center"> <img src="/assets/images/footer-logo.svg" alt="footer-logo.svg"> <span class="logo_title text-white pl15">Houzing</span> </div>
  311.             </div>
  312.           </div>
  313.         </div>
  314.         <div class="col-md-4 col-lg-4">
  315.           <div class="footer_menu_widget text-right tac-md mt15">
  316.             <ul>
  317.               <li class="list-inline-item"><a href="/">Accueil</a></li>
  318.               <li class="list-inline-item"><a href="/listing-panels">Nos Panneaux</a></li>
  319.               <li class="list-inline-item"><a href="/about-us">Notre Équipe</a></li>
  320.               <li class="list-inline-item"><a href="/contact">Contact</a></li>
  321.             </ul>
  322.           </div>
  323.         </div>
  324.       </div>
  325.     </div>
  326.   </section>
  327. <a class="scrollToHome" href="#"><i class="fa fa-angle-up"></i></a>
  328. </div>
  329. <script>
  330.   var minPrice = {{ lowest }};
  331.   var maxPrice = {{ highest }};
  332.   var maxArea = {{ max_area }};
  333.   var mostExpensive = {{ most_expensive }};
  334. </script>
  335. {% endblock %}
  337. {% block footer %}
  340. {% endblock %}
  342. {% block javascripts %}
  343. <script src="/assets/js/jquery-3.6.0.js"></script>
  344. <script src="/assets/js/jquery-migrate-3.0.0.min.js"></script>
  345. <script src="/assets/js/popper.min.js"></script>
  346. <script src="/assets/js/bootstrap.min.js"></script>
  347. <script src="/assets/js/jquery.mmenu.all.js"></script>
  348. <script src="/assets/js/ace-responsive-menu.js"></script>
  349. <script src="/assets/js/bootstrap-select.min.js"></script>
  350. <script src="/assets/js/isotop.js"></script> 
  351. <script src="/assets/js/snackbar.min.js"></script>
  352. <script src="/assets/js/simplebar.js"></script>
  353. <script src="/assets/js/parallax.js"></script>
  354. <script src="/assets/js/scrollto.js"></script>
  355. <script src="/assets/js/jquery-scrolltofixed-min.js"></script>
  356. <script src="/assets/js/jquery.counterup.js"></script>
  357. <script src="/assets/js/wow.min.js"></script>
  358. <script src="/assets/js/progressbar.js"></script>
  359. <script src="/assets/js/slider.js"></script>
  360. <script src="/assets/js/pricing-slider.js"></script>
  361. <script src="/assets/js/timepicker.js"></script>
  362. <!-- Custom script for all pages --> 
  363. <script src="/assets/js/script.js"></script>
  365. {% endblock %}