templates/search_properties/_header.html.twig line 1

Open in your IDE?
  1. {% import 'search_properties/_macros.twig' as macros %}
  3. <header class='z-3 no-scrollbar-flicker bg-white border-bottom header-offers'>
  4.   <div class='grid-container fluid'>
  5.     <div class='grid-x grid-margin-x align-middle header-height-offers'>
  7.       <div class='shrink large-2 cell' :class='{"show-for-xlarge": showDetail}'>
  8.         <div class='header-height-offers flex-container align-middle'>
  9.           <a href='/' class='header-logo c-dark-blue'>
  10.             {% include 'search_properties/elements/logo.svg.twig' with { attrs: 'width="180" height="45"' } %}
  11.           </a>
  12.         </div>
  13.       </div>
  15.       <div class="auto cell pr-hamburger-width">
  16.         <button @click='closeDetail' v-show="showDetail" style='display: none'
  17.               class='button-reset t-label-regular icon-left icon-left--text-visible border hover-bc-dark-blue c-black'
  18.         >
  19.           <svg width="17" height="9">
  20.             <g class='scale-x--1'>
  21.               <use xlink:href='#arrow-small' />
  22.             </g>
  23.           </svg>
  24.           {{'Retour aux résultats'|trans|capitalize}}
  25.         </button>
  27.         <form v-show="!showDetail" class='offers-search show-for-xlarge'>
  28.           <div class='grid-x'>
  29.             <div class='shrink cell'>
  30.               <div class='dropdown dropdown--hoverable mr-32'>
  31.                 <div class='bg-dark-blue c-white bg-arrow px-24 py-24'>
  32.                     <p class='t-label-regular mr-12'
  33.                     v-text='rent ? "{{'Louer'|trans|capitalize}}" : "{{'Acheter'|trans|capitalize}}"'
  34.                   ></p>
  36.                 </div>
  37.                 <div class='dropdown__body bg-white z-2'>
  38.                       <ul>
  39.                           <li class='list-style-none'>
  40.                       <a href='#' class='checkbox border-bottom checkbox-dropdown-item checkbox-dropdown-item--py-24 px-24 t-label-regular ws-nowrap'
  41.                         @click.prevent='rent = !rent'
  42.                         v-text='rent ? "{{'Acheter'|trans|capitalize}}" : "{{'Louer'|trans|capitalize}}"'
  43.                       ></a>
  44.                           </li>
  45.                       </ul>
  46.                 </div>
  47.                 </div>
  48.             </div>
  50.             <label class='small-2 cell border hover-bc-dark-blue custom-multiselect custom-multiselect--topbar'>
  51.                 <locations-picker
  52.                 v-model="filters.location"
  53.                 url="{{path('offers_locations_autocomplete')}}"
  54.                 placeholder="{{'Localité(s) (Canton, ville, NPA)'|trans}}"
  55.                 :limit="topbarOptionsLimit"
  56.                 open-direction="bottom"
  57.               />
  58.             </label>
  59.             
  60.             <label class='small-1 cell border hover-bc-dark-blue custom-multiselect custom-multiselect--topbar' v-show="isRadiusEnabled">
  61.                 <multiselect
  62.                 v-model="filters.radius"
  63.                 :options="{{radiusOptions | json_encode}}"
  64.                 placeholder="{{'Radius'|capitalize}}"
  65.                 open-direction="bottom"
  66.                 :show-labels="false"
  67.                 :option-height="49"
  68.                 :searchable="false"
  69.                 :max-height="320"
  70.                       open-direction="bottom"
  71.               >
  72.                 <div slot='singleLabel' slot-scope='{ option }'>
  73.                               <span v-text='"+" + option + "km"'></span>
  74.                 </div>
  75.                 <span class="checkbox checkbox--radio" slot='option' slot-scope='{ option }'>
  76.                       <span class='checkbox__fake' :class='{"checkbox__fake--active": filters.radius && filters.radius == option }'>
  77.                           <svg width='10' height='10' viewBox='0 0 10 10'>
  78.                       <polyline points='2,5 4,7 8,3'></polyline>
  79.                     </svg>
  80.                       </span>
  81.                       <span class='checkbox__label t-label-regular' v-text='option + "km"'></span>
  82.                 </span>
  83.               </multiselect>
  84.             </label>
  86.             <div class='small-3 cell border hover-bc-dark-blue custom-multiselect custom-multiselect--topbar'>
  87.               <multiselect
  88.                 v-model="filters.type"
  89.                 :multiple="true"
  90.                 :options="{{categories | json_encode}}"
  91.                 placeholder="{{'type(s) de bien'|capitalize}}"
  92.                 open-direction="bottom"
  93.                 :show-labels="false"
  94.                 :option-height="49"
  95.                 :searchable="false"
  96.                 :limit="topbarOptionsLimit"
  97.                 :limit-text="count => `+${count}`"
  98.                 :max-height="320"
  99.               >
  100.                 <span class="checkbox" slot='option' slot-scope='props'>
  101.                       <span class='checkbox__fake' :class='{"checkbox__fake--active": filters.type && filters.type.includes(props.option) }'>
  102.                           <svg width='10' height='10' viewBox='0 0 10 10'>
  103.                       <polyline points='2,5 4,7 8,3'></polyline>
  104.                     </svg>
  105.                       </span>
  106.                       <span class='checkbox__label t-label-regular' v-text='props.option'></span>
  107.                 </span>
  108.               </multiselect>
  109.             </div>
  112.             <div class='auto cell grid-x'>
  113.               <div class='auto cell dropdown border hover-bc-dark-blue' tabindex='0'>
  114.                 <div class='input-block skip' :class='{"input-block_collapsed": !!surfaceSelectionDisplay}'>
  115.                     <span class='input-label t-label-regular'>{{'surface'|trans|title}}</span>
  116.                       <input class='input-field t-label-regular c-dark-blue' disabled tabindex='-1' :value='surfaceSelectionDisplay'>
  117.                   </div>
  118.                 <div class='dropdown__body dropdown__body--auto dropdown__body--auto-height bg-white z-2'>
  119.                   <div class='flex-container py-16'>
  120.                     <div class='px-16'>
  121.                       <number-input-with-suggestions input-class='simple-input number-input-reset w-176'
  122.                         v-model='filters.surfaceMin' :suggestions='minSurfaceSuggestions' :format-option='formatSurfaceOption'
  123.                         placeholder='Min' @change='handleFiltersChange'>
  124.                     </div>
  125.                     <div class='border-right o-02'></div>
  126.                     <div class='px-16 text-right'>
  127.                       <number-input-with-suggestions input-class='simple-input number-input-reset w-176'
  128.                         v-model='filters.surfaceMax' :suggestions='maxSurfaceSuggestions' :format-option='formatSurfaceOption'
  129.                         placeholder='Max' @change='handleFiltersChange'>
  130.                     </div>
  131.                   </div>
  132.                 </div>
  133.               </div>
  134.             </div>
  137.             <div class='auto cell dropdown border hover-bc-dark-blue' tabindex='0'>
  138.                 <div class='input-block skip' :class='{"input-block_collapsed": priceSelectionDisplay}'>
  139.                   <span class='input-label t-label-regular' v-text='rent ? "{{'loyer'|trans|title}}" : "{{'budget'|trans|title}}"'></span>
  140.                   <input class='input-field t-label-regular c-dark-blue' disabled tabindex='-1' :value='priceSelectionDisplay'>
  141.                 </div>
  142.                 <div class='dropdown__body dropdown__body--auto dropdown__body--right dropdown__body--auto-height bg-white z-2 py-16'>
  143.                   <div class='grid-x px-16 mb-16' v-if='rent'>
  144.                     <button type='button' class='button-reset t-label-regular small-tab-button small-6 cell text-center bg-white'
  145.                       :class='{"active": !filters.priceSqm}'
  146.                       @click='togglePricePerSqm(false)'
  147.                     >
  148.                       <span v-if="rent">{{'par mois'|trans|capitalize}}</span>
  149.                       <span v-else>{{'totale'|trans|capitalize}}</span>
  150.                     </button>
  151.                     <button type='button' class='button-reset t-label-regular small-tab-button small-6 cell text-center bg-white'
  152.                       :class='{"active": filters.priceSqm}'
  153.                       @click='togglePricePerSqm(true)'
  154.                     >
  155.                       {{'par m²'|trans|capitalize}} <span v-if="rent">{% if app.request.locale == "en" %}/year{% else %}/an{% endif %}</span>
  156.                     </button>
  157.                   </div>
  158.                   <div class='flex-container'>
  159.                     <div class='px-16'>
  160.                       <number-input-with-suggestions v-if="filters.priceSqm" input-class='simple-input number-input-reset w-176'
  161.                         v-model='filters.priceSqmMin' :suggestions='minPriceSuggestions' :format-option='formatPriceOption'
  162.                         placeholder='Min' @change='handleFiltersChange'></number-input-with-suggestions>
  163.                       <number-input-with-suggestions v-else input-class='simple-input number-input-reset w-176'
  164.                         v-model='filters.priceMin' :suggestions='minPriceSuggestions' :format-option='formatPriceOption'
  165.                         placeholder='Min' @change='handleFiltersChange'></number-input-with-suggestions>
  166.                     </div>
  167.                     <div class='border-right o-02'></div>
  168.                     <div class='px-16 text-right'>
  169.                       <number-input-with-suggestions v-if="filters.priceSqm" input-class='simple-input number-input-reset w-176'
  170.                         v-model='filters.priceSqmMax' :suggestions='maxPriceSuggestions' :format-option='formatPriceOption'
  171.                         placeholder='Max' @change='handleFiltersChange'></number-input-with-suggestions>
  172.                       <number-input-with-suggestions v-else input-class='simple-input number-input-reset w-176'
  173.                         v-model='filters.priceMax' :suggestions='maxPriceSuggestions' :format-option='formatPriceOption'
  174.                         placeholder='Max' @change='handleFiltersChange'></number-input-with-suggestions>
  175.                     </div>
  176.                   </div>
  177.                 </div>
  178.               </div>
  182.               <div class='shrink cell flex-container align-middle'>
  183.                 {{macros.checkbox({name: 'onlyNew', value: 'Projets neufs'|trans, class: 'px-16 ws-nowrap', attrs: {
  184.                   'v-model': 'filters.isNewProject'
  185.                 }})}}
  186.                 {# {{macros.checkbox({name: 'link360', value: 'Vue 360°', class: 'checkbox-dropdown-item checkbox-dropdown-item--py-24 px-16 ws-nowrap', attrs: {
  187.                   'v-model': 'filters.has360'
  188.                 }})}} #}
  189.               </div>
  192.           </div>
  193.         </form>
  194.       </div>
  195.     </div>
  196.   </div>
  198.   <div class='border-top hide-for-xlarge px-16 py-16' v-if='!showDetail && !showMobileFilters'>
  199.     <button class='button-reset w-100 icon-left icon-left--text-visible icon-left--center pr-32 border bc-dark-blue c-dark-blue grid-x'
  200.       @click='showMobileFilters = true'>
  201.       <svg width='16' height='16'><use xlink:href='#search-16' /></svg>
  202.       <span class='t-button-medium auto cell'>{{'Rechercher'|trans|title}}</span>
  203.     </button>
  204.   </div>
  205. </header>