Skip to content

GitLab

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
Show whitespace changes
Inline Side-by-side
Showing with 120 additions and 114 deletions
src/site/_includes/filter/job-location.njk
View file @ dbbc3c76
{# Position location #}
{% set locations = {
'barcelona': 'Barcelona, Spain',
'grenoble': 'Grenoble, France',
'hamburg': 'Hamburg, Germany',
'heidelberg': 'Heidelberg, Germany',
'hinxton': 'EMBL-EBI Hinxton, UK',
'rome': 'Rome, Italy',
'EMBO': 'EMBO, Heidelberg, Germany'
'barcelona': 'Barcelona',
'grenoble': 'Grenoble',
'hamburg': 'Hamburg',
'heidelberg': 'Heidelberg',
'EMBO': 'EMBO, Heidelberg',
'hinxton': 'EMBL-EBI Hinxton',
'rome': 'Rome'
} %}
<fieldset class="vf-form vf-form__fieldset | vf-stack vf">
<style>
.vf-form__label {
font-size: 1rem;
}
</style>
<fieldset class="vf-form__fieldset | vf-stack vf-stack--400">
<legend class="vf-form__legend">Position location</legend>
{% spaceless %}
{% for key, name in locations | dictsort %}
......
src/site/_includes/filter/job-type.njk
View file @ dbbc3c76
......@@ -18,8 +18,8 @@
'OTH': 'Other'
} -%}
<fieldset class="vf-form vf-form__fieldset | vf-stack vf-stack--400">
<legend class="vf-form__legend">Position type</legend>
<fieldset class="vf-form__fieldset | vf-stack vf-stack--400">
<legend class="vf-form__legend">Type</legend>
{% spaceless %}
{% for key, type in positiontypes | dictsort %}
{% set counter = 0 %}
......
src/site/_includes/layouts/position.njk
View file @ dbbc3c76
......@@ -32,6 +32,8 @@
<meta property="og:description" content="{{ pagination.items[0].field_jobs_description | striptags | truncate(150) }}">
{% if 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 %}
<!-- Twitter -->
......@@ -41,6 +43,8 @@
<meta property="twitter:description" content="{{ pagination.items[0].field_jobs_description | striptags | truncate(150) }}">
{% if 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 %}
<!-- Content descriptors -->
......
src/site/index.njk
View file @ dbbc3c76
......@@ -21,7 +21,7 @@ embl_content_meta_properties:
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>
.vf-hero__content {
width: fit-content;
......@@ -37,9 +37,8 @@ embl_content_meta_properties:
</section>
<section class="vf-grid vf-grid__col-4">
<section class="embl-grid embl-grid--has-centered-content">
<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">
<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>
......@@ -59,24 +58,24 @@ embl_content_meta_properties:
</div>
<a href="#jobFilter" class="vf-search__button | vf-button vf-button--primary">Filter</a>
</form>
</div>
<div></div>
</section>
<section class="vf-grid vf-grid__col-4">
<div>
<a id="jobFilter"></a>
<section class="embl-grid">
<style>.vf-form__legend { font-weight: 500; }</style>
<form class="vf-form">
<a id="jobFilter"></a>
<!-- locations -->
{%- include "filter/job-location.njk" -%}
<!-- locations -->
{%- include "filter/job-location.njk" -%}
{# Position type #}
{%- include "filter/job-type.njk" -%}
{# Position type #}
{%- include "filter/job-type.njk" -%}
<!-- Sort by time control -->
{% spaceless %}
{# <fieldset class="vf-form vf-form--fieldset"> #}
<legend class="vf-form--legend | vf-text">Sort by time</legend>
<!-- 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"
......@@ -104,8 +103,9 @@ embl_content_meta_properties:
id="sort-id1"
data-datetime-format="{month} {day}, {year} {hour}:{min}"
/>
<label for="sort-id1" class="vf-form__label">Jobs closing soonest</label>
<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"
......@@ -121,31 +121,36 @@ embl_content_meta_properties:
data-datetime-format="{month} {day}, {year} {hour}:{min}"
checked
/>
<label for="sort-id2" class="vf-form__label">Jobs closing latest</label>
<label for="sort-id2" class="vf-form__label">Closing last</label>
</div>
{# </fieldset> #}
</fieldset>
{# </fieldset> #}
{# <p class="vf-text"><a href="/events/archive" class="vf-link">View past events</a></p> #}
{# <p class="vf-text"><a href="/events/archive" class="vf-link">View past events</a></p> #}
{% endspaceless %}
{% endspaceless %}
<a
<a
class="vf-button vf-button--sm vf-button--primary"
href="/jobs">
Reset filters
</a>
</a>
{# <button
{# <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>
</button> #}
</form>
<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">
{%- for job in emblJobs %}
......@@ -155,6 +160,12 @@ embl_content_meta_properties:
<div data-jplist-item>
<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">
Featured |
{# <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:
{{ job.field_jobs_duty_station | striptags }}
</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">
{{ job.field_jobs_description | striptags | truncate(200) }}
<span class="vf-u-display-none | used-for-search-index">
......@@ -178,7 +183,7 @@ embl_content_meta_properties:
<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>
</article>
......@@ -194,6 +199,13 @@ embl_content_meta_properties:
<div data-jplist-item>
<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">
{# <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> #}
......@@ -205,11 +217,6 @@ embl_content_meta_properties:
{% endif %}
</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 #}
<div class="vf-u-display-none | used-for-filtering">
......@@ -228,7 +235,7 @@ embl_content_meta_properties:
<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>
</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