The search filters panel shows a standard layout for a UoL search page. The pattern consists of a heading section, a filter panel (left hand side on large screens / behind a toggle button on smaller devices), a search form, results count, a chips container, search results and pagination.
This documentation details the sections of the page relating to filters (filters panel and search form).
The heading area houses the uol-page-heading component. Here the page is introduced with a title, subheading and further content where required.
The filter panel is viewable at all times on the left hand side for large width devices, but hidden on smaller devices. This is triggered by a filter results button.
The title for the filter panel is dynamically added depending on what type of filters are included within. With no Javascript enabled this title is set to be “Filter by”, When Javascript is enabled, a “scan” through the type of filters included with the panel sets this title to be one of the following:
Filters only - “Filter by” Sort only - “Sort by” Combination - “Filter and sort by”
This text is also applied to the filter button which triggers panel opening as detailed above.
Filters can be radio button groups, checkbox groups or select lists (single or multiselect). These input types are all derived from the @uol-form-input component. Each of these is introduced here via an example. Each filter is nested within a form block denoted by the config example for radio button group below.
The default variant has a radio button selected to select either full time or part time mode of study option (only one can be selected at any point). This is set up with the following config:
'form': {
'action': '/forms/some-action',
'filter_inputs': [{
"id": "filter-study-mode",
"name": "filter-study-mode",
"label": "Mode of study",
"type": "radio",
'input_width': 'small',
"legend": "Mode of study",
"hint": "Select one option",
"heading_level": "h3",
"group_label_id": "filter-study-mode-group",
"options": [{
"id": "filter-study-mode-1",
"name": "filter-study-mode-group",
"value": "full-time",
"label": "Full time"
},
{
"id": "filter-study-mode-2",
"name": "filter-study-mode-group",
"value": "part-time",
"label": "Part time",
"checked": true
}Of note in the above:
The second filter type on the default variant has a checkbox group - the difference here being that more than one option can be selected. This is set up with the following config:
"type": "checkbox",
"input_width": "small",
"legend": "Delivery type",
"hint": "Select all that apply",
"heading_level": "h3",
"group_label_id": "filter-delivery-type-group",
"options": [{
"id": "filter-delivery-type-campus",
"name": "filter-delivery-type-campus",
"value": "campus",
"label": "On campus"
},
{
"id": "filter-delivery-type-blended",
"name": "filter-delivery-type-blended",
"value": "blended",
"label": "Blended learning",
"checked": true
},Of note in the above:
The second filter type on the default variant has a checkbox group - the difference here being that more than one option can be selected. This is set up with the following config:
"type": "select",
"label": "Subject",
"hint": "Select one option",
"name": "filter-subject",
"id": "filter-subject",
"invalid": false,
"options": [{
"value": "art_design_media_and_communication",
"label": "Art, Design, Media and Communication"
},
{
"value": "biological_biomedical_and_sports_sciences",
"label": "Biological, Biomedical and Sports Sciences"
},
{
"value": "business_management_finance_and_economics",
"label": "Business, Management, Finance and Economics",
"selected": true
},Of note in the above:
To incorporate a multiple select typeahead component requires the following parameters setting (all other config as per single typeahead above)
"type": "select",
"multiple": true,
"chips_hide": true,The multiselect component when used in other page areas shows ‘chips’ for each selection within the component. For search results pages, chips should appear elsewhere on the page (see below), and their incorporation is done server side and beyond the scope of this pattern.
All filters panel include a “Clear all filters” button. When activated this button loops through all filters in the filter panel and clears their default values.
The search form uses the @uol-form-block component. This config is nested within the form element used above for filter inputs (although in different sections of the page layout, both the filters and form above results act as form elements). The default config below results in a form with keyword and search button. Please note this is not a second form but an addition to the above form object.
'form': {
'form_block': {
'lead': null,
'additional_info_before': null,
'button': {
'style': 'primary',
'type': 'submit',
'content': 'Search'
},
'fields': [
{
'type': 'search',
'id': 'inputId2',
'name': 'searchCourses2',
'label': 'Search by keyword',
'invalid': 'false',
'autocomplete': 'off',
'has_icon': true
}
],
'button_inline': true
}
For all current live Design System pages utilising chips, these are generated at run time via Funnelback integration. This design pattern includes a container which can be used to house these chips (further information to follow).
This variant of the search results will display the usual search results page pattern but without the Search Form. This will enable editors to create a filterable (but not searchable) list of results.
This can be implemented through the following configuration:
{
'no_form_variant': true,
'form': {
'form_block': false,
}
}Please note the property ‘no_form_variant’: true, is required for this variant to add the correct styling.
This variant of the search results pattern shows an example with the addition of the content area at the top of the results. The content area uses the @uol-typography-rich-text component to allow editors to add and edit content within this section (typically through a text editor found within a CMS).
This can be implemented through the following configuration (for example):
{
'content': `
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Find out more about cheese</a>
</h2>
<p class="uol-in-text-cta__text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
`
}
<form {% if form.action %}action="{{ form.action }}"{% endif %} class="uol-col-container uol-search-results {{ 'uol-search--has-filters' if form.filter_inputs }} {{ 'uol-search--publications' if publications_items }} {{ 'uol-search--has-map-content' if with_map_and_content_variant }} {{ 'uol-search--no-form' if no_form_variant }}">
<div class="uol-search-results__page-heading">
{% render '@uol-page-heading', { page_heading: page_heading } %}
</div>
{% if content %}
<div class="uol-search-results__content-area">
<div class="uol-rich-text">
{{ content | safe }}
</div>
</div>
{% endif %}
{% if iframe %}
{% render '@uol-iframe', { iframe: iframe } %}
{% endif %}
{% if form.filter_inputs %}
<div class="uol-search-result__filters">
{% render '@uol-filters-panel', { filter_inputs: form.filter_inputs,
results_button: form.results_button } %}
</div>
{% endif %}
<div id="main" tabindex="-1" class="uol-search-results__main">
{% render '@uol-form-block', { form_block: form.form_block } %}
<div class="uol-search-results__results">
{% render '@uol-results-count' %}
<div class="uol-search-results__button-chips-container">
{% render '@uol-chips', { items: chips } %}
</div>
{% render '@uol-results-items', { items: results_items } %}
{% render '@uol-publications-items', { publications: publications_items } %}
{% render '@uol-pagination', { pagination: pagination } %}
</div>
</div>
</form>
<form action="/forms/some-action" class="uol-col-container uol-search-results uol-search--has-filters ">
<div class="uol-search-results__page-heading">
<header class="page-heading">
<h1 class="page-heading__title">
<span class="page-heading__title__main">Search cheeses</span>
</h1>
</header>
</div>
<div class="uol-search-result__filters">
<div class="uol-filters-panel " id="search-filters" aria-labelledby="filters-panel-title" role="group">
<div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>
<h2 id="filters-panel-title" class="uol-filters-panel__title">Filters</h2>
<div class="uol-form__input-container
uol-form__input-container--small">
<div role="radiogroup" aria-labelledby="filter-study-mode-group filter-study-mode-group-hint" class="uol-form__custom-fieldset">
<span id="filter-study-mode-group" class="uol-form__custom__legend">Mode of study</span>
<span class="uol-form__input-label__hint" id="filter-study-mode-group-hint">Select one option </span>
<div class="uol-form__inputs-wrapper ">
<div class="uol-form__input--radio-wrapper">
<input class="uol-form__input--radio" type="radio" id="filter-study-mode-1" name="filter-study-mode-group" value="full-time">
<label class="uol-form__input--radio__label" for="filter-study-mode-1">Full time</label>
<span class="uol-form__input--custom-radio" hidden>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
</div>
<div class="uol-form__input--radio-wrapper">
<input class="uol-form__input--radio" type="radio" id="filter-study-mode-2" name="filter-study-mode-group" value="part-time" checked>
<label class="uol-form__input--radio__label" for="filter-study-mode-2">Part time</label>
<span class="uol-form__input--custom-radio" hidden>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--small">
<div role="group" aria-labelledby="filter-delivery-type-group filter-delivery-type-group-hint" class="uol-form__custom-fieldset">
<span id="filter-delivery-type-group" class="uol-form__custom__legend">Delivery type</span>
<span class="uol-form__input-label__hint" id="filter-delivery-type-group-hint">Select all that apply </span>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="filter-delivery-type-campus" name="filter-delivery-type-campus" value="">
<label class="uol-form__input--checkbox-label" for="filter-delivery-type-campus" id="filter-delivery-type-campus-label">On campus</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="filter-delivery-type-blended" name="filter-delivery-type-blended" value="" checked>
<label class="uol-form__input--checkbox-label" for="filter-delivery-type-blended" id="filter-delivery-type-blended-label">Blended learning</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="filter-delivery-type-online" name="filter-delivery-type-online" value="">
<label class="uol-form__input--checkbox-label" for="filter-delivery-type-online" id="filter-delivery-type-online-label">Online exclusive</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--small">
<div role="group" aria-labelledby="filter-course-type filter-course-type-hint" class="uol-form__custom-fieldset">
<span id="filter-course-type" class="uol-form__custom__legend">Course type</span>
<span class="uol-form__input-label__hint" id="filter-course-type-hint">Select all that apply </span>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="filter-course-type-foundation" name="filter-course-type-foundation" value="">
<label class="uol-form__input--checkbox-label" for="filter-course-type-foundation" id="filter-course-type-foundation-label">Foundation year</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="filter-course-type-apprenticeship" name="filter-course-type-apprenticeship" value="">
<label class="uol-form__input--checkbox-label" for="filter-course-type-apprenticeship" id="filter-course-type-apprenticeship-label">Apprenticeships</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="filter-course-type-intercalated" name="filter-course-type-intercalated" value="">
<label class="uol-form__input--checkbox-label" for="filter-course-type-intercalated" id="filter-course-type-intercalated-label">Intercalated degree</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="uol-form__input-container
">
<label class="uol-form__input-label" for="filter-subject" id="filter-subject-label">
<span class="uol-form__input-label__text">Subject</span>
<span class="uol-form__input-label__hint" id="filter-subject-hint">Select one option </span>
</label>
<div class="uol-form__input-wrapper " data-field-invalid=false>
<select class="uol-form__input uol-form__input--select " name="filter-subject" id="filter-subject" aria-label="Select Subject">
<option value="">Select an option</option>
<option value="art_design_media_and_communication">Art, Design, Media and Communication</option>
<option value="biological_biomedical_and_sports_sciences">Biological, Biomedical and Sports Sciences</option>
<option value="business_management_finance_and_economics" selected>Business, Management, Finance and Economics</option>
<option value="chemistry_food_science_and_nutrition">Chemistry, Food Science and Nutrition</option>
<option value="education_sociology_and_social_policy">Education, Sociology and Social Policy</option>
<option value="engineering_and_computing">Engineering and Computing</option>
<option value="english_history_and_humanities">English, History and Humanities</option>
<option value="geography_environment_and_earth_sciences">Geography, Environment and Earth Sciences</option>
<option value="languages_cultures_and_societies">Languages, Cultures and Societies</option>
<option value="law_criminology_and_politics">Law, Criminology and Politics</option>
<option value="mathematics_and_physics">Mathematics and Physics</option>
<option value="medicine_dentistry_psychology_and_healthcare">Medicine, Dentistry, Psychology and Healthcare</option>
<option value="music_theatre_and_performance">Music, Theatre and Performance</option>
</select>
<svg class="uol-form__input__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" focusable="false" aria-hidden="true">
<path fill="none" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
</div>
</div>
<div class="uol-form__input-container
">
<label class="uol-form__input-label" for="filter-subject-2" id="filter-subject-2-label">
<span class="uol-form__input-label__text">Subject</span>
<span class="uol-form__input-label__hint" id="filter-subject-2-hint">Select one option </span>
</label>
<div class="uol-form__input-wrapper " data-field-invalid=false>
<select class="uol-form__input uol-form__input--select " name="filter-subject-2" id="filter-subject-2" aria-label="Select Subject">
<option value="">Select an option</option>
<option value="art_design_media_and_communication">Art, Design, Media and Communication</option>
<option value="biological_biomedical_and_sports_sciences">Biological, Biomedical and Sports Sciences</option>
<option value="business_management_finance_and_economics" selected>Business, Management, Finance and Economics</option>
<option value="chemistry_food_science_and_nutrition">Chemistry, Food Science and Nutrition</option>
<option value="education_sociology_and_social_policy">Education, Sociology and Social Policy</option>
<option value="engineering_and_computing">Engineering and Computing</option>
<option value="english_history_and_humanities">English, History and Humanities</option>
<option value="geography_environment_and_earth_sciences">Geography, Environment and Earth Sciences</option>
<option value="languages_cultures_and_societies">Languages, Cultures and Societies</option>
<option value="law_criminology_and_politics">Law, Criminology and Politics</option>
<option value="mathematics_and_physics">Mathematics and Physics</option>
<option value="medicine_dentistry_psychology_and_healthcare">Medicine, Dentistry, Psychology and Healthcare</option>
<option value="music_theatre_and_performance">Music, Theatre and Performance</option>
</select>
<svg class="uol-form__input__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" focusable="false" aria-hidden="true">
<path fill="none" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
</div>
</div>
<div class="uol-filters-panel__footer">
<button id="clear_filter_panel" class="uol-button uol-button--secondary
uol-icon uol-icon--mdiDeleteForeverOutline
uol-icon--icon-only--large
" type="button">Clear all filters</button>
<button id="show_search_results" class="uol-button uol-button--primary
" type="button">Show 15 search results</button>
</div>
</div>
<div class="uol-filters-panel__overlay"></div>
</div>
<div id="main" tabindex="-1" class="uol-search-results__main">
<div class="uol-form__container">
<div class="uol-form__inner-wrapper">
<div class="uol-form uol-form--button-inline">
<div class="uol-form__inputs-wrapper">
<div class="uol-form__input-container
">
<label class="uol-form__input-label" for="inputId2">
<span class="uol-form__input-label__text">Search by keyword</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--search
uol-form__input-wrapper--with-icon " data-field-invalid=false>
<!-- -->
<input class="uol-form__input uol-form__input--search" type="search" id="inputId2" name="searchCourses2" aria-invalid="false" value="" autocomplete="off">
<!-- -->
</div>
</div>
</div>
<div class="uol-form__button-wrapper">
<button class="uol-button uol-button--primary
" type="submit">Search</button>
</div>
</div>
</div>
</div>
<div class="uol-search-results__results">
<div class="uol-results-count">
<h2 class="uol-results-count__title">5 results for <strong>'ipsum'</strong></h2>
</div>
<div class="uol-search-results__button-chips-container">
</div>
<div class="uol-results-items">
<article class="uol-results-items__item uol-results-items__item--has-image ">
<div class="uol-results-items__item__text-container">
<h2 class="uol-results-items__item__title">
<a href="/cheese/brie" class="uol-results-items__item__link">Brie</a>
</h2>
<p class="uol-results-items__item__summary">Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment</p>
</div>
<div class="uol-results-items__item__image-container">
<img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
</div>
</article>
<article class="uol-results-items__item ">
<div class="uol-results-items__item__text-container">
<h2 class="uol-results-items__item__title">
<a href="/cheese/cashel-blue" class="uol-results-items__item__link">Cashel Blue</a>
</h2>
<p class="uol-results-items__item__summary">Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.</p>
</div>
</article>
<article class="uol-results-items__item ">
<div class="uol-results-items__item__text-container">
<h2 class="uol-results-items__item__title">
<a href="/cheese/cheddar" class="uol-results-items__item__link">Cheddar</a>
</h2>
<p class="uol-results-items__item__summary">Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world</p>
</div>
</article>
<article class="uol-results-items__item uol-results-items__item--has-image ">
<div class="uol-results-items__item__text-container">
<h2 class="uol-results-items__item__title">
<a href="/cheese/edam" class="uol-results-items__item__link">Edam</a>
</h2>
<p class="uol-results-items__item__summary">Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens</p>
</div>
<div class="uol-results-items__item__image-container">
<img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
</div>
</article>
<article class="uol-results-items__item uol-results-items__item--has-image ">
<div class="uol-results-items__item__text-container">
<h2 class="uol-results-items__item__title">
<a href="/cheese/manchego" class="uol-results-items__item__link">Manchego</a>
</h2>
<p class="uol-results-items__item__summary">Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets</p>
</div>
<div class="uol-results-items__item__image-container">
<img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
</div>
</article>
<article class="uol-results-items__item uol-results-items__item--has-image ">
<div class="uol-results-items__item__text-container">
<h2 class="uol-results-items__item__title">
<a href="/cheese/parmigiano-reggiano" class="uol-results-items__item__link">Parmigiano-Reggiano</a>
</h2>
<p class="uol-results-items__item__summary">Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months.</p>
</div>
<div class="uol-results-items__item__image-container">
<img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
</div>
</article>
</div>
<div class="uol-results-items">
</div>
<nav class="uol-pagination" aria-label="pagination">
<ol class="uol-pagination__list">
<li class="uol-pagination__item">
<button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageFirst" type="button" disabled>First page</button>
</li>
<li class="uol-pagination__item">
<button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowLeft" type="button" disabled>Previous page</button>
</li>
<li class="uol-pagination__item uol-pagination__item--numeric uol-pagination__item--current">
<a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-1" data-number="1" aria-current=page>
<span class="uol-icon__label">
<span class="hide-accessible">Page </span>1
</span>
</a>
</li>
<li class="uol-pagination__item uol-pagination__item--numeric ">
<a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-2" data-number="2">
<span class="uol-icon__label">
<span class="hide-accessible">Page </span>2
</span>
</a>
</li>
<li class="uol-pagination__item uol-pagination__item--numeric ">
<a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-3" data-number="3">
<span class="uol-icon__label">
<span class="hide-accessible">Page </span>3
</span>
</a>
</li>
<li class="uol-pagination__item">
<a href="/page-2" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowRight">Next page</a>
</li>
<li class="uol-pagination__item">
<a href="/page-4" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageLast">Last page</a>
</li>
</ol>
<span class="uol-pagination__status">
Page 1 of 4
</span>
</nav>
</div>
</div>
</form>
.uol-search-results__page-heading {
@extend .uol-col;
@extend .uol-col-12;
padding-bottom: 0;
.page-heading {
@include media("<uol-media-xs") {
padding-left: $spacing-2;
padding-top: $spacing-2;
}
margin-bottom: $spacing-4;
@include media(">=uol-media-m") {
margin-bottom: $spacing-6;
}
}
}
.uol-search--no-form {
.page-heading {
margin-bottom: 0.625rem; // 10px
@include media(">=uol-media-xs") {
margin-bottom: 0.125rem; // 2px
}
@include media(">=uol-media-m") {
margin-bottom: 0.938rem; // 15px
}
@include media(">=uol-media-l") {
margin-bottom: 1.688rem; // 27px
}
@include media(">=uol-media-xl") {
margin-bottom: 1.188rem; // 19px
}
}
}
.uol-search-results__content-area {
@extend .uol-col;
@extend .uol-col-12;
padding: 0 $spacing-2;
.site-outer & {
padding-top: 0;
margin-top: -0.438rem; // -7px
@include media(">=uol-media-xs") {
padding-bottom: 0;
margin-top: -0.938rem // -15px
}
@include media(">=uol-media-m") {
padding-bottom: $spacing-4;
margin-top: -$spacing-5;
}
@include media(">=uol-media-l") {
padding-bottom: 1.75rem; // 28px
margin-top: -1.563rem; // -25px
}
@include media(">=uol-media-xl") {
padding-bottom: $spacing-4;
margin-top: -1.813rem; // -29px
}
}
.site-outer .uol-search--has-map-content & {
@include media(">=uol-media-l") {
padding-bottom: 1.25rem // 20px
}
@include media(">=uol-media-xl") {
padding-bottom: 0.75rem // 12px
}
}
.site-outer .uol-search--no-form & {
margin-bottom: -0.938rem; // -15px
padding-top: 0.375rem; // 6px
@include media(">=uol-media-xs") {
padding-top: 0.875rem; // 14px
}
@include media(">=uol-media-m") {
margin-bottom: -1.063rem; // -17px
padding-top: 1rem; // 16px
}
@include media(">=uol-media-l") {
margin-bottom: 0;
padding-top: 0.313rem; // 5px
}
@include media(">=uol-media-xl") {
padding-top: 0.813rem; // 13px
}
}
}
.uol-search-results__main {
@include page-width("full");
}
.uol-search-result__filters {
@extend .uol-col;
@extend .uol-col-12;
@extend .uol-col-l-3;
.js & {
@include media("<uol-media-l") {
padding: 0;
}
}
}
// Components margin/padding changes if in search results pattern
.uol-search-results {
margin-bottom: $spacing-7;
.uol-form__container,
.uol-results-count {
margin-bottom: $spacing-6;
@include media(">=uol-media-m") {
margin-bottom: $spacing-7;
}
}
.uol-chips {
padding: 0;
}
.uol-search-results__button-chips-container {
.uol-button {
margin-bottom: $spacing-5;
@include media(">=uol-media-m") {
margin-bottom: $spacing-6;
}
}
}
.uol-results-items {
margin: 1.25rem 0 $spacing-6;
padding: 0;
@include media(">=uol-media-m") {
margin: 2.25rem 0 $spacing-7;
}
}
.uol-form__inner-wrapper .uol-form__input-wrapper {
&::before {
@include media("<uol-media-m") {
bottom: 0; // add comment to force update
}
}
}
.uol-publications-list {
@include media(">=uol-media-s") {
margin-right: calc(100% / 12 * 2 + 0.25rem);
}
@include media(">=uol-media-l") {
margin-right: calc(100% / 9 * 2 + 0.25rem);
}
}
}
.uol-search--publications .page-heading__title__main::after {
content: " - Publications";
}
const focusTrap = require('focus-trap');
let courseFinderFilterPage = false;
export const uolSearchResults = () => {
const filterPanel = document.querySelector('.uol-search-result__filters');
const searchResultsPage = document.querySelector('.uol-search--has-filters');
let filterPanelTitle = "Filter By";
if (filterPanel) {
const numOfSortByOptions = filterPanel.getElementsByClassName("uol-form__input-container__sort-by").length;
const numOfFilterOptions = filterPanel.getElementsByClassName("uol-form__input-container").length;
console.log('numOfSortByOptions ' + numOfSortByOptions);
console.log('numOfFilterOptions ' + numOfFilterOptions);
if (numOfSortByOptions > 0 && numOfFilterOptions == numOfSortByOptions) {
filterPanelTitle = "Sort by";
}
if (numOfSortByOptions == 0 && numOfFilterOptions > 0) {
filterPanelTitle = "Filter by";
}
if (numOfSortByOptions > 0 && numOfFilterOptions > numOfSortByOptions) {
filterPanelTitle = "Filter and sort by";
}
document.getElementById("filters-panel-title").innerHTML = filterPanelTitle;
}
if (searchResultsPage) {
let filtersOffscreen = false;
// Create ResizeObserver to toggle offscreen filters
const searchScreenResize = new ResizeObserver((entries) => {
const viewportWidth = entries[0].contentRect.width;
// TODO: investigate docwidth issue further
// var docWidth = document.documentElement.clientWidth || document.body.clientWidth;
// console.log('viewportWidth ' + viewportWidth);
if (viewportWidth < 1008) {
if (filtersOffscreen === false) {
offScreenFiltersCreate();
filtersOffscreen = true;
}
} else {
if (filtersOffscreen === true) {
offScreenFiltersDestroy();
filtersOffscreen = false;
}
}
});
searchScreenResize.observe(document.body);
// Select button container
const btnContainer = searchResultsPage.querySelector('.uol-search-results__button-chips-container');
// Close filters panel button
const btnCloseFilters = document.getElementById('filters-close-button');
// Show results button
const btnShowResults = document.getElementById('show_search_results');
// Create toggle button
const btnFilterToggle = document.createElement('button');
btnFilterToggle.id = 'filters-toggle';
btnFilterToggle.type = 'button';
btnFilterToggle.classList.add('uol-button');
btnFilterToggle.classList.add('uol-button--secondary');
btnFilterToggle.classList.add('uol-icon');
btnFilterToggle.classList.add('uol-icon--icon-only--large');
// Sort by icon if only sorting, otherwise, filter by icon
if (filterPanel) {
if (filterPanelTitle) {
let svgCode = (filterPanelTitle == "Sort by") ?
`<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M120-240v-60h240v60H120Zm0-210v-60h480v60H120Zm0-210v-60h720v60H120Z"/></svg>`:
`<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M400-240v-60h160v60H400ZM240-450v-60h480v60H240ZM120-660v-60h720v60H120Z"/></svg>`;
btnFilterToggle.innerHTML = svgCode +
`<span id="open-filter-button-text" class="uol-icon__label">` +
filterPanelTitle +
`</span>
`;
}
}
// Select filters panel
const filtersPanel = document.querySelector('.uol-filters-panel');
const filterPanelFocusTrap = focusTrap.createFocusTrap(filtersPanel, {
clickOutsideDeactivates: true,
returnFocusOnDeactivate: true,
onActivate: () => {
filtersPanel.classList.add('uol-filters-panel--open');
document.body.style.overflow = 'hidden';
},
onDeactivate: () => {
filtersPanel.classList.remove('uol-filters-panel--open');
document.body.style.removeProperty('overflow');
// Slight delay before attempting to move focus to allow reactivation of non-modal elements
const interval = setInterval(() => {
btnFilterToggle.focus();
clearInterval(interval);
}, 5);
}
});
btnFilterToggle.addEventListener('click', () => {
filtersOpen();
})
const filtersOpen = () => {
filtersPanel.setAttribute('tabindex', '-1')
filtersPanel.removeAttribute('hidden');
filtersPanel.focus();
filterPanelFocusTrap.activate();
}
const filtersClose = () => {
filterPanelFocusTrap.deactivate();
filtersPanel.addEventListener('transitionend', hidePanel)
const hidePanel = () => filtersPanel.setAttribute('hidden', true);
filtersPanel.removeEventListener('transitionend', hidePanel)
}
const offScreenFiltersCreate = () => {
// Hide the filters
filtersPanel.setAttribute('hidden', true);
// Add btnFilterToggle to DOM
btnContainer.insertAdjacentElement('afterbegin', btnFilterToggle);
btnCloseFilters.addEventListener('click', () => {
filtersClose();
})
btnShowResults.addEventListener('click', () => {
filtersClose();
})
}
const offScreenFiltersDestroy = () => {
// Unhide the filters
filtersPanel.removeAttribute('hidden');
// Remove btnFilterToggle from DOM
btnFilterToggle.remove();
// In case the filters are open we need to close
filtersClose();
// Remove 'hidden' attribute that was added by filtersClose()
filtersPanel.removeAttribute('hidden');
}
}
}
{
"page_heading": {
"title": "Search cheeses"
},
"form": {
"action": "/forms/some-action",
"filter_inputs": [
{
"id": "filter-study-mode",
"name": "filter-study-mode",
"label": "Mode of study",
"type": "radio",
"input_width": "small",
"legend": "Mode of study",
"hint": "Select one option",
"heading_level": "h3",
"group_label_id": "filter-study-mode-group",
"options": [
{
"id": "filter-study-mode-1",
"name": "filter-study-mode-group",
"value": "full-time",
"label": "Full time"
},
{
"id": "filter-study-mode-2",
"name": "filter-study-mode-group",
"value": "part-time",
"label": "Part time",
"checked": true
}
]
},
{
"id": "filter-delivery-type",
"name": "filter-delivery-type",
"label": "Delivery type",
"type": "checkbox",
"input_width": "small",
"legend": "Delivery type",
"hint": "Select all that apply",
"heading_level": "h3",
"group_label_id": "filter-delivery-type-group",
"options": [
{
"id": "filter-delivery-type-campus",
"name": "filter-delivery-type-campus",
"value": "campus",
"label": "On campus"
},
{
"id": "filter-delivery-type-blended",
"name": "filter-delivery-type-blended",
"value": "blended",
"label": "Blended learning",
"checked": true
},
{
"id": "filter-delivery-type-online",
"name": "filter-delivery-type-online",
"value": "online",
"label": "Online exclusive"
}
]
},
{
"id": "filter-course-type",
"name": "filter-course-type",
"label": "Course type",
"type": "checkbox",
"input_width": "small",
"legend": "Course type",
"hint": "Select all that apply",
"heading_level": "h3",
"group_label_id": "filter-course-type",
"options": [
{
"id": "filter-course-type-foundation",
"name": "filter-course-type-foundation",
"value": "foundation",
"label": "Foundation year"
},
{
"id": "filter-course-type-apprenticeship",
"name": "filter-course-type-apprenticeship",
"value": "apprenticeship",
"label": "Apprenticeships"
},
{
"id": "filter-course-type-intercalated",
"name": "filter-course-type-intercalated",
"value": "intercalated",
"label": "Intercalated degree"
}
]
},
{
"type": "select",
"label": "Subject",
"hint": "Select one option",
"name": "filter-subject",
"id": "filter-subject",
"invalid": false,
"options": [
{
"value": "art_design_media_and_communication",
"label": "Art, Design, Media and Communication"
},
{
"value": "biological_biomedical_and_sports_sciences",
"label": "Biological, Biomedical and Sports Sciences"
},
{
"value": "business_management_finance_and_economics",
"label": "Business, Management, Finance and Economics",
"selected": true
},
{
"value": "chemistry_food_science_and_nutrition",
"label": "Chemistry, Food Science and Nutrition"
},
{
"value": "education_sociology_and_social_policy",
"label": "Education, Sociology and Social Policy"
},
{
"value": "engineering_and_computing",
"label": "Engineering and Computing"
},
{
"value": "english_history_and_humanities",
"label": "English, History and Humanities"
},
{
"value": "geography_environment_and_earth_sciences",
"label": "Geography, Environment and Earth Sciences"
},
{
"value": "languages_cultures_and_societies",
"label": "Languages, Cultures and Societies"
},
{
"value": "law_criminology_and_politics",
"label": "Law, Criminology and Politics"
},
{
"value": "mathematics_and_physics",
"label": "Mathematics and Physics"
},
{
"value": "medicine_dentistry_psychology_and_healthcare",
"label": "Medicine, Dentistry, Psychology and Healthcare"
},
{
"value": "music_theatre_and_performance",
"label": "Music, Theatre and Performance"
}
]
},
{
"type": "select",
"label": "Subject",
"hint": "Select one option",
"name": "filter-subject-2",
"id": "filter-subject-2",
"invalid": false,
"options": [
{
"value": "art_design_media_and_communication",
"label": "Art, Design, Media and Communication"
},
{
"value": "biological_biomedical_and_sports_sciences",
"label": "Biological, Biomedical and Sports Sciences"
},
{
"value": "business_management_finance_and_economics",
"label": "Business, Management, Finance and Economics",
"selected": true
},
{
"value": "chemistry_food_science_and_nutrition",
"label": "Chemistry, Food Science and Nutrition"
},
{
"value": "education_sociology_and_social_policy",
"label": "Education, Sociology and Social Policy"
},
{
"value": "engineering_and_computing",
"label": "Engineering and Computing"
},
{
"value": "english_history_and_humanities",
"label": "English, History and Humanities"
},
{
"value": "geography_environment_and_earth_sciences",
"label": "Geography, Environment and Earth Sciences"
},
{
"value": "languages_cultures_and_societies",
"label": "Languages, Cultures and Societies"
},
{
"value": "law_criminology_and_politics",
"label": "Law, Criminology and Politics"
},
{
"value": "mathematics_and_physics",
"label": "Mathematics and Physics"
},
{
"value": "medicine_dentistry_psychology_and_healthcare",
"label": "Medicine, Dentistry, Psychology and Healthcare"
},
{
"value": "music_theatre_and_performance",
"label": "Music, Theatre and Performance"
}
]
}
],
"results_button": {
"type": "button",
"content": "Show 15 search results",
"style": "primary",
"id": "show_search_results"
},
"form_block": {
"lead": null,
"additional_info_before": null,
"button": {
"style": "primary",
"type": "submit",
"content": "Search"
},
"fields": [
{
"type": "search",
"id": "inputId2",
"name": "searchCourses2",
"label": "Search by keyword",
"invalid": "false",
"autocomplete": "off",
"has_icon": true
}
],
"button_inline": true
}
},
"results_items": [
{
"url": "/cheese/brie",
"title": "Brie",
"text": "Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment",
"image": {
"src": "/placeholders/banner/banner-05.jpg",
"alt": "A super informative description"
}
},
{
"url": "/cheese/cashel-blue",
"title": "Cashel Blue",
"text": "Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb."
},
{
"url": "/cheese/cheddar",
"title": "Cheddar",
"text": "Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world"
},
{
"url": "/cheese/edam",
"title": "Edam",
"text": "Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens",
"image": {
"src": "/placeholders/banner/banner-05.jpg",
"alt": "A super informative description"
}
},
{
"url": "/cheese/manchego",
"title": "Manchego",
"text": "Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets",
"image": {
"src": "/placeholders/banner/banner-05.jpg",
"alt": "A super informative description"
}
},
{
"url": "/cheese/parmigiano-reggiano",
"title": "Parmigiano-Reggiano",
"text": "Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months.",
"image": {
"src": "/placeholders/banner/banner-05.jpg",
"alt": "A super informative description"
}
}
],
"pagination": {
"current": 1,
"pages": [
{
"number": 1,
"url": "/page-1"
},
{
"number": 2,
"url": "/page-2"
},
{
"number": 3,
"url": "/page-3"
},
{
"number": 4,
"url": "/page-4"
}
]
}
}