templates/Theme/regiovacatures/pages/vacancy_overview.html.twig line 1

Open in your IDE?
  1. {% import 'page/macro/breadcrumbs.html.twig' as breadcrumbNode %}
  2. <div data-component="SearchVacancy" data-facet-limit="{{ config_setting('site_vacancy_facet_limit') }}"
  3.      data-limit="{{ config_setting('site_vacancy_limit_per_page') }}" data-base-url="{{ path('vacancies') }}"
  4.      class="row vacancies-overview vacancies-overview__first-version">
  5.     {% if breadcrumbs is defined %}
  6.         <div class="col-12">
  7.             {{ breadcrumbNode.generate(breadcrumbs) }}
  8.         </div>
  9.     {% endif %}
  10.     <aside class="sidebar col-12 col-md-4">
  11.         <div class="block-filters">
  12.             <h2 class="animation-element fadeup-element is-color-base">{{ 'Filter results'|trans }}</h2>
  13.             <form action="{{ path('vacancies') }}" id="vacancy_options_form" method="post">
  14.                 <script id="facetSelectionTemplate" type="text/x-jsrender">
  15.                     <%if type == 'facets' && values.length %>
  16.                         <%for values%>
  17.                             <%for values ~filter=title%>
  18.                                 <a href="#" data-selected="<%:~filter%>[<%:name%>]" class="tag">
  19.                                     <%:name%>
  20.                                     <i class="fas fa-times icon-right"></i>
  21.                                 </a>
  22.                             <%/for%>
  23.                         <%/for%>
  24.                     <%/if%>
  25.                     <%if type == 'keyword'%>
  26.                         <a href="#" data-selected="<%:type%>[<%:query%>]" data-tag-type="keyword" class="tag">
  27.                             <%:label%>: <%:query%>
  28.                             <i class="fas fa-times icon-right"></i>
  29.                         </a>
  30.                     <%/if%>
  31.                     <%if type == 'location'%>
  32.                         <a href="#" data-selected="<%:type%>[<%:location.name%>]" data-tag-type="location" class="tag">
  33.                             Binnen <%:location.range%>km van <%:location.name%>
  34.                             <i class="fas fa-times icon-right"></i>
  35.                         </a>
  36.                     <%/if%>
  37.                 </script>
  38.                 <div id="selected-filters" data-selected-filters style="display:none;"
  39.                      class="component component--filters animation-element fadeup-element">
  40.                     <div class="is-card widget widget--selection-tags">
  41.                         <div class="card-body">
  42.                             <h2>{{ 'Your selection'|trans }}:</h2>
  43.                             <a href="#" title="{{ 'Delete everything'|trans }}" class="remove-all">
  44.                                 <i class="far fa-trash icon-before"></i>
  45.                                 {{ 'Delete everything'|trans }}
  46.                             </a>
  47.                             <div class="tags">
  48.                             </div>
  49.                         </div>
  50.                     </div>
  51.                 </div>
  52.                 <div class="is-overflow-visible">
  53.                     <div class="component component--filters">
  54.                         <div class="filters list w-100">
  55.                             {% if feature('feature_vacancy_search_location_slider') %}
  56.                                 <div class="filter-group distance is-card is-box-shadow-0 is-margin-bottom-30 is-padding-0 w-100 animation-element fadeup-element"
  57.                                 data-component="LocationField">
  58.                                     <div class="card-body w-100">
  59.                                         <div class="form-horizontal form-location w-100">
  60.                                             <h2 class="w-100">{{ 'Location'|trans }}</h2>
  61.                                             <input value="" type="hidden" name="location[name]" id="location-name">
  62.                                             <input value="10" type="hidden" name="location[range]"
  63.                                                    id="location-range">
  64.                                             <input value="" type="hidden" name="location[latitude]"
  65.                                                    id="location-latitude">
  66.                                             <input value="" type="hidden" name="location[longitude]"
  67.                                                    id="location-longitude">
  68.                                             <input value="desc" type="hidden" name="options[sort_order]"
  69.                                                    id="sort_order">
  70.                                             <div class="info">
  71.                                                         <span class="city">
  72.                                                             <span class="location_placeholder"></span>
  73.                                                         </span>
  74.                                                 <p class="location lead" id="distance-label"></p>
  75.                                                 <div class="delete-location-filter" style="display: none;">
  76.                                                     <i class="fas fa-trash-alt"></i>
  77.                                                 </div>
  78.                                             </div>
  79.                                             <span class="edit-city is-margin-top-15">
  80.                                                       <input name="" id="location-edit-sidebar" class="location-edit"
  81.                                                              value="">
  82.                                                     </span>
  83.                                             <div class="location-slider">
  84.                                                 <div id="location-range-slider"></div>
  85.                                             </div>
  86.                                         </div>
  87.                                     </div>
  88.                                 </div>
  89.                             {% endif %}
  90.                             <script id="facetTemplate" type="text/x-jsrender">
  91.                                     <div class="filter-group is-card is-box-shadow-0 is-margin-bottom-30 is-padding-0 animation-element fadeup-element">
  92.                                     <div class="card-body">
  93.                                         <h2><%:title%><i class="far fa-angle-up"></i></h2>
  94.                                         <ul class="checkbox-group<%if !expanded_by_default%> collapsed<%/if%> education_level" id="<%:slug%>">
  95.                                             <%for values ~filter=title%>
  96.                                                 <li><input  class="filter-checkbox"
  97.                                                             id="<%:~filter%>[<%:name%>]"
  98.                                                             name="filters[<%:~filter%>][]"
  99.                                                             value="<%:name%>"
  100.                                                             type="checkbox"
  101.                                                             <%if selected%>
  102.                                                             checked="checked"
  103.                                                             <%/if%>
  104.                                                     ><label for="<%:~filter%>[<%:name%>]"><%:name%>
  105.                                                     <span class="count"><%:count%></span></label>
  106.                                                 </li>
  107.                                             <%/for%>
  108.                                         </ul>
  109.                                         <a href="#"
  110.                                             class="show-more-options"
  111.                                             data-component="ButtonToggle"
  112.                                             data-toggle-default="<%if !expanded_by_default%>more<%else%>less<%/if%>"
  113.                                             data-toggle-more-label="{{ 'Show more'|trans }}" data-toggle-more-icon="fa-plus-square"
  114.                                             data-toggle-less-label="{{ 'Show less'|trans }}" data-toggle-less-icon="fa-minus-square"
  115.                                         >
  116.                                             <i class="far fa-plus-square icon-before"></i>
  117.                                             <span>{{ 'Show more'|trans }}</span>
  118.                                         </a>
  119.                                     </div>
  120.                                 </div>
  127.                             </script>
  128.                             <div class="filters list" id="facet_list"></div>
  129.                         </div>
  130.                     </div>
  131.                 </div>
  132.                 {% if company %}
  133.                     <input type="hidden" name="company" value="{{ company.slug }}"/>
  134.                     <input type="hidden" name="companyName" value="{{ company.name }}"/>
  135.                 {% endif %}
  136.             </form>
  137.         </div>
  138.         <div class="widget widget--jobalert-cta animation-element fadeup-element">
  139.             <div class="card is-box-shadow-0 is-background-color-accent">
  140.                 <div class="card-body">
  141.                     <div class="is-color-blank">
  142.                         <h2>{{ 'Create Job Alert'|trans }}</h2>
  143.                         <p>{{ 'We will automatically search for new vacancies corresponding to your searchquery and send them to your emailaddress'|trans }}
  144.                             .</p>
  145.                     </div>
  146.                     <a class="is-btn is-background-color-blank is-color-base" data-component="JobAlertModal"
  147.                        href="/jobalert"
  148.                        title="" data-settings='{"class": "buttonProps"}'>
  149.                         {{ 'Create Job Alert'|trans }}
  150.                     </a>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.         <script id="facetSeoTemplate" type="text/x-jsrender">
  155.             <%for snippets%>
  156.                 <div class="widget is-margin-bottom-20">
  157.                     <%:%>
  158.                 </div>
  159.             <%/for%>
  160.         </script>
  161.         <div class="facet-seo"></div>
  162.     </aside>
  163.     <main id="vacancy-list" class="main-content col-12 col-md-8">
  164.         <div class="animation-element fadeup-element">
  165.             <h1 data-search-title class="is-margin-bottom-5 is-color-base">
  166.                 <span>{{ 'All vacancies'|trans }}</span>
  167.                 <span data-search-query="{{ 'with searchword'|trans }}"></span>
  168.                 <span data-company="{{ 'at company'|trans }}"></span>
  169.                 <span data-location="{{ 'in'|trans }}"></span>
  170.                 <span data-count-wrapper class="results" style="display:none;">
  171.                 (<span data-count>0</span>&nbsp;<span data-count-title-plural="{{ 'results'|trans }}"
  172.                                                       data-count-title-singular="{{ 'result'|trans }}">{{ 'results'|trans }}</span>)
  173.             </span>
  174.             </h1>
  175.             <div class="vacancy-fixed-width">
  176.                 <!-- STATIC -->
  177.                 <p class="is-font-size-16 d-none"><a href="javascript:void(0)" title="Lees meer"
  178.                                                      data-component="ScrollTo"
  179.                                                      data-target="#option-seo-content">Lees meer<i
  180.                                 class="far fa-angle-right icon-after"></i></a>
  181.                 </p>
  182.                 <div class="sorting">
  183.                     <ul>
  184.                         <span>{{ 'Sort by'|trans }}:</span>
  185.                         <li class="current"><a data-sort="date" data-dir="desc" href="#" class="asc"
  186.                                                data-orderable="true">{{ 'Placement date'|trans }}</a></li>
  187.                         <li class="" style="display: none;"><a href="#" data-sort="score"
  188.                                                                data-orderable="false">{{ 'Relevance'|trans }}</a></li>
  189.                         <li class="distance_sort" style="display: none;"><a href="#" data-sort="distance"
  190.                                                                             data-orderable="true"
  191.                                                                             data-sortdefault="asc">{{ 'Location'|trans }}</a>
  192.                         </li>
  193.                     </ul>
  194.                 </div>
  195.             </div>
  196.         </div>
  197.         <script id="vacancyTemplate" type="text/x-jsrender">
  198.             <div data-component="Favorite" data-vacancy-id="<%:id%>" class="card is-box-shadow-0 <%if featured%>is-border-1<%/if%> is-border-color-accent vacancy__first-version  <%if featured%>vacancy--featured<%/if%>">
  199.                 <div class="card-body">
  200.                    <div class="vacancy">
  201.                         <div class="vacancy-top has-icon">
  202.                             <%if overview_image%>
  203.                                 <figure class="is-margin-right-25 is-margin-right-mobile-15">
  204.                                     <a href="<%generateCompanyUrl company.id company.slug/%>" title="<%:company.name%>">
  205.                                     <img loading="lazy" src="<%:overview_image.w240%>"/>
  206.                                     </a>
  207.                                 </figure>
  208.                             <%/if%>
  209.                             <div class="vacancy-title">
  210.                             <%if detail_url%>
  211.                                 <a data-format="TitleFormatter" title="<%:title%>" href="<%:detail_url%>">
  212.                                     <h3><%:title%></h3>
  213.                                 </a>
  214.                             <%else%>
  215.                                 <a data-format="TitleFormatter" title="<%:title%>" href="<%generateUrl id slug/%>">
  216.                                     <h3><%:title%></h3>
  217.                                 </a>
  218.                             <%/if%>
  219.                             <%if company %>
  220.                                <div class="sub">
  221.                                   Bij
  222.                                   <a href="<%generateCompanyUrl company.id company.slug/%>" title="<%:company.name%>">
  223.                                      <%:company.name%>
  224.                                   </a>
  225.                                </div>
  226.                             <%/if%>
  227.                             <%if new%>
  228.                             <span class="badge badge--new">
  229.                                 <p>{{ 'New'|trans }}</p>
  230.                             </span>
  231.                             <%/if%>
  232.                             <%if featured%>
  233.                             <span class="badge badge--topvacancy float-right">
  234.                                 <p>{{ 'Featured vacancy'|trans }}</p>
  235.                             </span>
  236.                             <%/if%>
  237.                             </div>
  239.                         </div>
  240.                         <div class="vacancy-body" data-format="IntroFormatter">
  241.                         <%if intro%>
  242.                             <p>
  243.                                 <%stripIntro intro {{ config_setting('site_vacancy_intro_character_limit')|default(500) }}/%>
  244.                             </p>
  245.                         <%/if%>
  246.                         </div>
  247.                         <div class="vacancy-footer">
  248.                              <div data-format="FooterFormatter" class="vacancy-options">
  249.                                 <ul>
  250.                                     <%if city%>
  251.                                         {{ config_setting('site_vacancy_show_location') ? '<li><i class="fal fa-map-marker-alt"></i><%:city%></li>' : '' }}
  252.                                     <%/if%>
  253.                                     <%for option_values%>
  254.                                         <%if option.visible_in_detail%>
  255.                                         <li>
  256.                                             <i class="<%:option.font_awesome_icon%>"></i><%:value%>
  257.                                         </li>
  258.                                         <%/if%>
  259.                                     <%/for%>
  260.                                 </ul>
  261.                             </div>
  262.                             <%if detail_url%>
  263.                             <a href="<%:detail_url%>" title="<%:title%>" class="show-vacancy-btn is-btn is-btn-outlined-primary is-color-base is-padding-x-30">{{ 'Show vacancy'|trans }}
  264.                                 <i class="far fa-angle-right icon-after is-margin-top-5"></i></a>
  265.                             <%else%>
  266.                             <a href="<%generateUrl id slug/%>" title="<%:title%>" class="show-vacancy-btn is-btn is-btn-outlined-primary is-color-base is-padding-x-30">{{ 'Show vacancy'|trans }}
  267.                                 <i class="far fa-angle-right icon-after is-margin-top-5"></i></a>
  268.                             <%/if%>
  269.                         </div>
  270.                         <div class="footer">
  271.                         </div>
  272.                     </div>
  273.                 </div>
  274.             </div>
  280.         </script>
  281.         {% if not map %}
  282.             <div id="vacancy-results" class="animation-element fadeup-element">
  283.                 <div id="ajax-wait" style=""><img loading="lazy" src="{{ asset('/assets/contentbox/spinner.svg') }}"
  284.                                                   id="ajax-wait-image" alt="ajax-loader">
  285.                 </div>
  286.             </div>
  287.             <div class="pagination"></div>
  288.         {% endif %}
  289.     </main>
  290.     <div class="clearfix"></div>
  291.     <div class="lazyload-trigger"></div>
  293.     <div class="overlay overlay-hugeinc-search">
  294.         <div class="inner">
  295.             <div class="container-fluid footer-search">
  296.                 <h2>{{ 'Search vacancies'|trans }}</h2>
  297.                 <div class="component--search"></div>
  298.             </div>
  299.         </div>
  300.         <nav class="overlay-close">
  301.             <div class="container-fluid">
  302.                 <div class="row">
  303.                     <div class="col-12">
  304.                         <a href="javascript:void(0)" class="close-btn c-align">
  305.                             <i class="far fa-times"></i> {{ 'Close'|trans }}
  306.                         </a>
  307.                     </div>
  308.                 </div>
  309.             </div>
  310.         </nav>
  311.     </div>
  312.     <div class="overlay overlay-hugeinc-filters">
  313.         <div class="inner">
  314.             <div class="container-fluid footer-filters">
  315.             </div>
  316.         </div>
  317.         <nav class="overlay-close">
  318.             <div class="container-fluid">
  319.                 <div class="row">
  320.                     <div class="col-12">
  321.                         <a href="javascript:void(0)" class="close-btn c-align">
  322.                             <i class="far fa-times"></i> {{ 'Close'|trans }}
  323.                         </a>
  324.                     </div>
  325.                 </div>
  326.             </div>
  327.         </nav>
  328.     </div>
  329. </div>
  331. <!-- stickyfooter -->
  332. <section class="sticky-footer d-md-none">
  333.     <nav>
  334.         <div class="container-fluid">
  335.             <div class="row">
  336.                 <div class="col-5 col-sm-6 search-trigger trigger">
  337.                     <a href="javascript:void(0)">
  338.                         <i class="fa fa-search"></i> {{ 'Search'|trans }}
  339.                     </a>
  340.                 </div>
  341.                 <div class="col-7 col-sm-6 filter-trigger trigger">
  342.                     <a href="javascript:void(0)">
  343.                         {{ 'Filter results'|trans }}
  344.                         <i class="fa fa-filter"></i>
  345.                     </a>
  346.                 </div>
  347.             </div>
  348.         </div>
  349.     </nav>
  350. </section>