Commit dbbc3c76 authored by Stuart Robson's avatar Stuart Robson
Browse files

Merge branch 'refactor/filtering' into 'master'

updates the HTML for the jobs filters and more

See merge request !29
parents fbae3167 843a8ded
Pipeline #152100 passed with stages
in 2 minutes and 10 seconds
{# Position location #} {# Position location #}
{% set locations = { {% set locations = {
'barcelona': 'Barcelona, Spain', 'barcelona': 'Barcelona',
'grenoble': 'Grenoble, France', 'grenoble': 'Grenoble',
'hamburg': 'Hamburg, Germany', 'hamburg': 'Hamburg',
'heidelberg': 'Heidelberg, Germany', 'heidelberg': 'Heidelberg',
'hinxton': 'EMBL-EBI Hinxton, UK', 'EMBO': 'EMBO, Heidelberg',
'rome': 'Rome, Italy', 'hinxton': 'EMBL-EBI Hinxton',
'EMBO': 'EMBO, Heidelberg, Germany' 'rome': 'Rome'
} %} } %}
<fieldset class="vf-form vf-form__fieldset | vf-stack vf"> <fieldset class="vf-form__fieldset | vf-stack vf-stack--400">
<style>
.vf-form__label {
font-size: 1rem;
}
</style>
<legend class="vf-form__legend">Position location</legend> <legend class="vf-form__legend">Position location</legend>
{% spaceless %} {% spaceless %}
{% for key, name in locations | dictsort %} {% for key, name in locations | dictsort %}
......
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
'OTH': 'Other' 'OTH': 'Other'
} -%} } -%}
<fieldset class="vf-form vf-form__fieldset | vf-stack vf-stack--400"> <fieldset class="vf-form__fieldset | vf-stack vf-stack--400">
<legend class="vf-form__legend">Position type</legend> <legend class="vf-form__legend">Type</legend>
{% spaceless %} {% spaceless %}
{% for key, type in positiontypes | dictsort %} {% for key, type in positiontypes | dictsort %}
{% set counter = 0 %} {% set counter = 0 %}
......
...@@ -32,6 +32,8 @@ ...@@ -32,6 +32,8 @@
<meta property="og:description" content="{{ pagination.items[0].field_jobs_description | striptags | truncate(150) }}"> <meta property="og:description" content="{{ pagination.items[0].field_jobs_description | striptags | truncate(150) }}">
{% if meta.image -%} {% if meta.image -%}
<meta property="og:image" content="{{ meta.image }}"> <meta property="og:image" content="{{ meta.image }}">
{% else %}
<meta property="og:image" content="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/embl-jobs-social-image.png">
{%- endif %} {%- endif %}
<!-- Twitter --> <!-- Twitter -->
...@@ -41,6 +43,8 @@ ...@@ -41,6 +43,8 @@
<meta property="twitter:description" content="{{ pagination.items[0].field_jobs_description | striptags | truncate(150) }}"> <meta property="twitter:description" content="{{ pagination.items[0].field_jobs_description | striptags | truncate(150) }}">
{% if meta.image -%} {% if meta.image -%}
<meta property="twitter:image" content="{{ meta.image }}"> <meta property="twitter:image" content="{{ meta.image }}">
{% else %}
<meta property="twitter:image" content="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/embl-jobs-social-image.png">
{%- endif %} {%- endif %}
<!-- Content descriptors --> <!-- Content descriptors -->
......
...@@ -21,7 +21,7 @@ embl_content_meta_properties: ...@@ -21,7 +21,7 @@ embl_content_meta_properties:
expiry: never expiry: never
--- ---
<section class="vf-hero vf-hero--1200 vf-hero--primary | vf-u-fullbleed | vf-u-margin__top--400" style="--vf-hero--bg-image: url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/0607_ells-school-group_hd-s.jpg?w=1200&h=375')"> <section class="vf-hero vf-hero--1200 vf-hero--primary | vf-u-fullbleed" style="--vf-hero--bg-image: url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/0607_ells-school-group_hd-s.jpg?w=1200&h=375')">
<style> <style>
.vf-hero__content { .vf-hero__content {
width: fit-content; width: fit-content;
...@@ -37,9 +37,8 @@ embl_content_meta_properties: ...@@ -37,9 +37,8 @@ embl_content_meta_properties:
</section> </section>
<section class="vf-grid vf-grid__col-4"> <section class="embl-grid embl-grid--has-centered-content">
<div></div> <div></div>
<div class="vf-u-grid__col--span-2--md">
<form action="#jobFilter" onsubmit="return false;" class="vf-form | vf-search vf-search--inline"> <form action="#jobFilter" onsubmit="return false;" class="vf-form | vf-search vf-search--inline">
<div class="vf-form__item | vf-search__item"> <div class="vf-form__item | vf-search__item">
<label class="vf-form__label vf-u-sr-only | vf-search__label" for="textbox-filter">Search</label> <label class="vf-form__label vf-u-sr-only | vf-search__label" for="textbox-filter">Search</label>
...@@ -59,93 +58,99 @@ embl_content_meta_properties: ...@@ -59,93 +58,99 @@ embl_content_meta_properties:
</div> </div>
<a href="#jobFilter" class="vf-search__button | vf-button vf-button--primary">Filter</a> <a href="#jobFilter" class="vf-search__button | vf-button vf-button--primary">Filter</a>
</form> </form>
</div>
<div></div>
</section> </section>
<section class="vf-grid vf-grid__col-4">
<div>
<a id="jobFilter"></a>
<!-- locations -->
{%- include "filter/job-location.njk" -%}
{# Position type #}
{%- include "filter/job-type.njk" -%}
<!-- Sort by time control --> <section class="embl-grid">
{% spaceless %} <style>.vf-form__legend { font-weight: 500; }</style>
{# <fieldset class="vf-form vf-form--fieldset"> #} <form class="vf-form">
<legend class="vf-form--legend | vf-text">Sort by time</legend> <a id="jobFilter"></a>
{# https://www.jplist.org/documentation/controls/hidden-sort #}
{# <div <!-- locations -->
style="display: none" {%- include "filter/job-location.njk" -%}
data-jplist-control="hidden-sort"
{# Position type #}
{%- include "filter/job-type.njk" -%}
<!-- Sort by time control -->
{% spaceless %}
<fieldset class="vf-form__fieldset | vf-stack vf-stack--400">
{# <fieldset class="vf-form vf-form--fieldset"> #}
<legend class="vf-form__legend">Sort by time</legend>
{# https://www.jplist.org/documentation/controls/hidden-sort #}
{# <div
style="display: none"
data-jplist-control="hidden-sort"
data-group="data-group-1"
data-path=".jplist-event-time"
data-order="desc"
data-type="datetime"
data-datetime-format="{day} {month}, {year} {hour}:{min}">
</div> #}
{# https://www.jplist.org/documentation/controls/radio-buttons-sort #}
<div class="vf-form__item vf-form__item--radio">
<!-- sort by title ASC -->
<input
type="radio"
class="vf-form__radio"
data-jplist-control="radio-buttons-sort"
data-path=".jplist-event-time"
data-group="data-group-1"
data-order="asc"
data-type="datetime"
data-name="sort1"
name="sort1"
id="sort-id1"
data-datetime-format="{month} {day}, {year} {hour}:{min}"
/>
<label for="sort-id1" class="vf-form__label">Closing first</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<!-- sort by title DESC -->
<input
type="radio"
class="vf-form__radio"
data-jplist-control="radio-buttons-sort"
data-path=".jplist-event-time"
data-group="data-group-1"
data-order="desc"
data-type="datetime"
data-name="sort1"
name="sort1"
id="sort-id2"
data-datetime-format="{month} {day}, {year} {hour}:{min}"
checked
/>
<label for="sort-id2" class="vf-form__label">Closing last</label>
</div>
</fieldset>
{# </fieldset> #}
{# <p class="vf-text"><a href="/events/archive" class="vf-link">View past events</a></p> #}
{% endspaceless %}
<a
class="vf-button vf-button--sm vf-button--primary"
href="/jobs">
Reset filters
</a>
{# <button
data-jplist-control="reset"
data-group="data-group-1" data-group="data-group-1"
data-path=".jplist-event-time" data-name="reset"
data-order="desc" class="vf-button vf-button--sm vf-button--tertiary"
data-type="datetime" type="button">
data-datetime-format="{day} {month}, {year} {hour}:{min}"> Reset filters
</div> #} </button> #}
</form>
{# https://www.jplist.org/documentation/controls/radio-buttons-sort #}
<div class="vf-form__item vf-form__item--radio">
<!-- sort by title ASC -->
<input
type="radio"
class="vf-form__radio"
data-jplist-control="radio-buttons-sort"
data-path=".jplist-event-time"
data-group="data-group-1"
data-order="asc"
data-type="datetime"
data-name="sort1"
name="sort1"
id="sort-id1"
data-datetime-format="{month} {day}, {year} {hour}:{min}"
/>
<label for="sort-id1" class="vf-form__label">Jobs closing soonest</label>
<!-- sort by title DESC -->
<input
type="radio"
class="vf-form__radio"
data-jplist-control="radio-buttons-sort"
data-path=".jplist-event-time"
data-group="data-group-1"
data-order="desc"
data-type="datetime"
data-name="sort1"
name="sort1"
id="sort-id2"
data-datetime-format="{month} {day}, {year} {hour}:{min}"
checked
/>
<label for="sort-id2" class="vf-form__label">Jobs closing latest</label>
</div>
{# </fieldset> #}
{# <p class="vf-text"><a href="/events/archive" class="vf-link">View past events</a></p> #}
{% endspaceless %}
<a
class="vf-button vf-button--sm vf-button--primary"
href="/jobs">
Reset filters
</a>
{# <button
data-jplist-control="reset"
data-group="data-group-1"
data-name="reset"
class="vf-button vf-button--sm vf-button--tertiary"
type="button">
Reset filters
</button> #}
</div>
<div class="vf-content vf-u-grid__col--span-3--lg"> <div class="vf-content">
<style>
.vf-summary--job .vf-summary__title { margin: 0; }
.vf-summary--job .vf-summary__title + .vf-summary__meta { margin-bottom: 1rem; }
</style>
<section data-jplist-group="data-group-1"> <section data-jplist-group="data-group-1">
{%- for job in emblJobs %} {%- for job in emblJobs %}
...@@ -155,6 +160,12 @@ embl_content_meta_properties: ...@@ -155,6 +160,12 @@ embl_content_meta_properties:
<div data-jplist-item> <div data-jplist-item>
<article class="vf-summary vf-summary--job | jplist-text-area vf-box vf-box-theme--quinary"> <article class="vf-summary vf-summary--job | jplist-text-area vf-box vf-box-theme--quinary">
<h3 class="vf-summary__title">
<a href="/jobs/position/{{ job.field_jobs_reference_number }}" class="vf-summary__link">dddd
{{ job.title | striptags | safe | jobTitleClean | safe }}
</a>
</h3>
<p class="vf-summary__meta"> <p class="vf-summary__meta">
Featured | Featured |
{# <a href="JavaScript:Void(0);" class="vf-summary__link">{{ job.field_jobs_staff_category | striptags }}</a> in {# <a href="JavaScript:Void(0);" class="vf-summary__link">{{ job.field_jobs_staff_category | striptags }}</a> in
...@@ -163,12 +174,6 @@ embl_content_meta_properties: ...@@ -163,12 +174,6 @@ embl_content_meta_properties:
{{ job.field_jobs_duty_station | striptags }} {{ job.field_jobs_duty_station | striptags }}
</p> </p>
<h3 class="vf-summary__title">
<a href="/jobs/position/{{ job.field_jobs_reference_number }}" class="vf-summary__link">dddd
{{ job.title | striptags | safe | jobTitleClean | safe }}
</a>
</h3>
<p class="vf-summary__text"> <p class="vf-summary__text">
{{ job.field_jobs_description | striptags | truncate(200) }} {{ job.field_jobs_description | striptags | truncate(200) }}
<span class="vf-u-display-none | used-for-search-index"> <span class="vf-u-display-none | used-for-search-index">
...@@ -178,7 +183,7 @@ embl_content_meta_properties: ...@@ -178,7 +183,7 @@ embl_content_meta_properties:
<span class="jplist-job-type | vf-u-display-none">{{ job.field_jobs_type_key }}</span> <span class="jplist-job-type | vf-u-display-none">{{ job.field_jobs_type_key }}</span>
<a href="/jobs/position/{{ job.field_jobs_reference_number }}" class="vf-summary__button | vf-button vf-button--primary vf-button--outline vf-button--sm">Learn more</a> {# <a href="/jobs/position/{{ job.field_jobs_reference_number }}" class="vf-summary__button | vf-button vf-button--primary vf-button--outline vf-button--sm">Learn more</a> #}
<p class="vf-summary__date">Closes {{ job.field_jobs_expiration | striptags | parseDate | prettyDate }}</p> <p class="vf-summary__date">Closes {{ job.field_jobs_expiration | striptags | parseDate | prettyDate }}</p>
</article> </article>
...@@ -194,6 +199,13 @@ embl_content_meta_properties: ...@@ -194,6 +199,13 @@ embl_content_meta_properties:
<div data-jplist-item> <div data-jplist-item>
<article class="vf-summary vf-summary--job | jplist-text-area"> <article class="vf-summary vf-summary--job | jplist-text-area">
<h3 class="vf-summary__title">
<a href="/jobs/position/{{ job.field_jobs_reference_number }}" class="vf-summary__link">
{{ job.title | striptags | safe }}
</a>
</h3>
<p class="vf-summary__meta"> <p class="vf-summary__meta">
{# <a href="JavaScript:Void(0);" class="vf-summary__link">{{ job.field_jobs_staff_category | striptags }}</a> in {# <a href="JavaScript:Void(0);" class="vf-summary__link">{{ job.field_jobs_staff_category | striptags }}</a> in
<a href="JavaScript:Void(0);" class="vf-summary__link | jplist-duty-station">{{ job.field_jobs_duty_station | striptags }}</a> #} <a href="JavaScript:Void(0);" class="vf-summary__link | jplist-duty-station">{{ job.field_jobs_duty_station | striptags }}</a> #}
...@@ -205,11 +217,6 @@ embl_content_meta_properties: ...@@ -205,11 +217,6 @@ embl_content_meta_properties:
{% endif %} {% endif %}
</p> </p>
<h3 class="vf-summary__title">
<a href="/jobs/position/{{ job.field_jobs_reference_number }}" class="vf-summary__link">
{{ job.title | striptags | safe }}
</a>
</h3>
{# Hidden fields for data sorting #} {# Hidden fields for data sorting #}
<div class="vf-u-display-none | used-for-filtering"> <div class="vf-u-display-none | used-for-filtering">
...@@ -228,7 +235,7 @@ embl_content_meta_properties: ...@@ -228,7 +235,7 @@ embl_content_meta_properties:
<span class="jplist-job-type | vf-u-display-none">{{ job.field_jobs_type_key }}</span> <span class="jplist-job-type | vf-u-display-none">{{ job.field_jobs_type_key }}</span>
<a href="/jobs/position/{{ job.field_jobs_reference_number }}" class="vf-summary__button | vf-button vf-button--primary vf-button--outline vf-button--sm">Learn more</a> {# <a href="/jobs/position/{{ job.field_jobs_reference_number }}" class="vf-summary__button | vf-button vf-button--primary vf-button--outline vf-button--sm">Learn more</a> #}
<p class="vf-summary__date">Closes {{ job.field_jobs_expiration | striptags | parseDate | prettyDate}}</p> <p class="vf-summary__date">Closes {{ job.field_jobs_expiration | striptags | parseDate | prettyDate}}</p>
</article> </article>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment