templates/pages/search_properties.html.twig line 1

Open in your IDE?
  1. {{ render(controller(
  2.   'App\\Controller\\Website\\LayoutController::documentHead', {
  3.         params: {
  4.             documentClasses: 'bg-light-gray',
  5.             extension: {
  6.                 seo: {
  7.                     title: seo.title,
  8.                     description: seo.metaDescription
  9.                 }
  10.             },
  11.             URI : app.request.uri,
  12.             urlImgSeo : app.request.getSchemeAndHttpHost()~urlImgSeo
  13.         }
  14.     }
  15. )) }}
  17. <iframe src='{{path("just_menu")}}' class='popup-menu z-4' data-menu-scrollable data-min-width='1024' allowtransparency="true"></iframe>
  19. {% include 'search_properties/elements/cursor.html.twig' %}
  21. <div class='fixed-layout-piece z-4 no-scrollbar-flicker flex-container align-right'>
  22.   <button class='bg-white hamburger' aria-label='Menu' data-menu-toggle>
  23.     <div class='hamburger__flex header-height-offers border-left border-bottom'
  24.          style='margin-bottom: -1px; box-sizing: content-box'>
  25.       <div class='hamburger__line'></div>
  26.       <div class='hamburger__line'></div>
  27.       <div class='hamburger__line'></div>
  28.     </div>
  29.   </button>
  30. </div>
  32. <div data-vue-app
  33.   {% if detail is defined %}data-detail="{{detail|json_encode}}"{% endif %}
  34.   :class="{'pointer-none o-04': allResultsAreLoading}"
  35.   data-reload-on-change
  36.   {% if rent %}data-rent{% endif %}
  37. >
  39.   {% include 'search_properties/_header.html.twig' %}
  40.   {% include 'search_properties/_mobile-filters.html.twig' %}
  42.   <div class='pt-header-height-offers offer-list-animation'
  43.       :class="{'offer-list-animation--hidden': showDetail}"
  44.   >
  45.     <div class='no-scrollbar-flicker' data-above-sticky-footer>
  47.       {# placeholder for "modify search" #}
  48.       <div class='hide-for-xlarge py-16'>
  49.         <div class='py-16'>
  50.           <span class='t-button-medium'>&nbsp;</span>
  51.         </div>
  52.       </div>
  54.       {# list view #}
  55.       <main class='grid-x'>
  56.         <div class='small-12 large-auto cell bg-white' :class='{"show-for-large": showMap}'>
  57.           <div v-show='mapResults.length' style='display: none'>
  58.             <div class='offers-container'>
  59.               <h1 class='t-p-big-32 mb-16 pt-48 fw-500' v-text='seo.topTitle' id='topTitle'>{{seo.topTitle}}</h1>
  60.               <p class='t-label-regular'><span v-text='mapResults.length'></span> {{ 'Résultat(s)'|trans }}</p>
  61.             </div>
  63.             {% include 'search_properties/_toolbar.html.twig' %}
  65.             <div ref='cards' class='cards-list' :class='{"cards-list--2-col": !showMap, "pointer-none o-04": paginatedResultsAreLoading}'>
  66.               {{ render(controller('App\\Controller\\Website\\OfferController::searchCardsPaginated', {
  67.                 request: request,
  68.                 rent: rent,
  69.               })) }}
  70.             </div>
  71.           </div>
  73.           <div v-show='displayNoResults' style='display: none'>
  74.             <div class='offers-container'>
  75.               <h1 class='t-p-big-32 mb-16 pt-48 fw-500'>{{'Aucun résultat disponible'|trans|capitalize}}</h1>
  76.               <p class='t-label-regular mb-32'>{{"Elargissez vos critères de recherche pour afficher plus de résultats"|trans}}.</p>
  77.               {# <button @click.prevent='pickPopup("we-search-for-you")'
  78.                 class='button-reset py-16 bg-dark-blue c-white t-label-regular text-center px-24 mb-64'>{{'Décrire votre recherche'|trans|capitalize}}</button> #}
  79.             </div>
  80.           </div>
  81.         </div>
  82.         <div class='small-12 large-5 xlarge-6 cell' v-if='showMap'>
  83.           <div class='p-sticky-offers'>
  84.             <map-with-popup
  85.               :markers='mapResults'
  86.               map-element-class='mh-100vh-offers mh-100vh-offers--modify-search custom-google-map'
  87.               markers-dir='{{asset('frontend/search/images/vector/')}}'
  88.               :use-circles='!rent'
  89.               :on-popup-click='onMapPopupClick'
  90.               :show-zoom='!detail'
  91.                       :map-options="{minZoom: 3, maxZoom: 18, center: {lat: 46.5,lng: 6.5}}"
  92.               :swiss-coordinates="false"
  93.               :get-detail-url="getDetailUrl"
  94.               :display-price-per-sqm="filters.priceSqm"
  95.               :initial-bounds="boundsObject"
  96.               :disable-auto-fit="filters.bounds != null"
  97.               @boundschange='onBoundsChange'
  98.               :circles='mapCircles'
  99.             ></map-with-popup>
  100.             <div v-if='showMap' class='top-right pointer-none px-24 pt-48 show-for-large'>
  101.               <transition name='fade-in'>
  102.                 <button v-if="!detail" @click='showMap = false' aria-label='{{"cacher la carte"|trans|capitalize}}'
  103.                   class='button-reset bg-white pointer-auto border px-24 py-24 br-4'>
  104.                   <svg width='16' height='16'>
  105.                     <use xlink:href='#close-16' />
  106.                   </svg>
  107.                 </button>
  108.               </transition>
  109.             </div>
  110.           </div>
  111.         </div>
  112.       </main>
  113.     </div>
  114.   </div>
  115.   
  116.   {# map/list switch for mobile #}
  117.   <div class='fixed bottom z-2 hide-for-large px-16 mb-16 pointer-none'>
  118.     <div class='offer-list-animation flex-container align-right'
  119.       :class="{'offer-list-animation--hidden': showDetail}">
  120.       <button class='button-reset bg-dark-blue c-white icon-left icon-left--text-visible t-label-regular toggle-map-fixed-control pointer-auto'
  121.         @click='showMap = !showMap'>
  122.         <svg width='16' height='16'>
  123.           <use :xlink:href='fixedControlIcon' />
  124.         </svg>
  125.         <span v-text='showMap ? "{{'vue liste'|trans|title}}" : "{{'vue carte'|trans|capitalize}}"'></span>
  126.       </button>
  127.     </div>
  128.   </div>
  130.   {# detail #}
  131.   <div class='grid-container fluid pt-header-height-offers z-2 offer-detail-animation'
  132.        :class="{'offer-detail-animation--opened': showDetail}"
  133.        ref='detailScroller'>
  134.     <div class='grid-x grid-margin-x'>
  135.       <div class='large-offset-2 large-10 cell'>
  136.         <div class='offers-container-negative-left'>
  137.           <div class='offers-container bg-white mh-100vh-offers' ref="detail">
  138.             <div v-if="detail">
  139.               {% include 'search_properties/_detail.html.twig' with detail is defined ? detail : {} %}
  140.             </div>
  141.             <div v-else class='mh-100vh-offers flex-container align-center align-middle'>
  142.               <img src="{{ asset('frontend/search/dist/preloader.gif')}}" alt />
  143.             </div>
  144.           </div>
  145.         </div>
  146.       </div>
  147.     </div>
  148.   </div>
  150.   <div class='z-5 flex-container flex-dir-column modal-overlay offers-container py-32'
  151.     :class="{'modal-overlay--show': showOverlay}"
  152.     ref='popup' @click='closePopup'>
  153.     {% include 'search_properties/popups/_send-a-message.html.twig' %}
  154.     {% include 'search_properties/popups/_share.html.twig' %}
  155.     {% include 'search_properties/popups/_gallery.html.twig' %}
  156.     {% include 'search_properties/popups/_video.html.twig' %}
  157.     {% include 'search_properties/popups/_iframe.html.twig' %}
  158.   </div>
  159. </div>
  161. {{ render(controller(
  162.   'App\\Controller\\Website\\LayoutController::bodyEnd'
  163. )) }}