University of Leeds Design System v1.0.15

Filters panel: Closed

No notes defined.

{# <div class="uol-col-container uol-example-col-container uol-col-debug"> #}
  <div class="uol-filters-panel {{ 'uol-filters-panel--open' if open }}" 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>

    {% for input in filter_inputs %}
      {% render '@uol-form-input', input %}
    {% endfor %}

    <div class="uol-filters-panel__footer">
      {% render '@uol-button', {
        "type": "button",
        "content": "Clear all filters",
        "icon": "mdiDeleteForeverOutline",
        "large_icon": true,
        "style": "secondary",
        "id": "clear_filter_panel"
      } %}
      {% render '@uol-button', results_button %}
    </div>
  </div>
  <div class="uol-filters-panel__overlay"></div>
{# </div> #}
 
<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 
">

        <div role="group" 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 all that apply </span>

            <div class="uol-form__input--checkbox-wrapper">
                <input class="uol-form__input--checkbox" type="checkbox" id="filter-study-mode-1" name="filter-study-mode-group" value="">
                <label class="uol-form__input--checkbox-label" for="filter-study-mode-1" id="filter-study-mode-1-label">Full time</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-study-mode-2" name="filter-study-mode-group" value="">
                <label class="uol-form__input--checkbox-label" for="filter-study-mode-2" id="filter-study-mode-2-label">Part time</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 
">

        <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="">
                <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 
">

        <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">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 14 search results</button>

    </div>
</div>
<div class="uol-filters-panel__overlay"></div>
  • Content: 
    $filters-z-index: 1000;

.uol-filters-panel {
  box-sizing: border-box;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: $color-white;
  width: 100%;
  box-shadow: 0 15px 25px 0 rgba(#000, 0), 0 5px 10px 0 rgba(#000, 0);
  transition: all 0.7s ease;
  opacity: 1;
  z-index: $filters-z-index;

  .uol-form__custom__legend {
    margin-bottom: $spacing-1;
  }

  .uol-form__input-label__hint {
    padding-bottom: $spacing-3;
  }



  .js & {
    @include media("<uol-media-l") {
      padding: $spacing-4 $spacing-4 $spacing-5;
      position: fixed;
      transform: translateX(-100%);
      overflow-y: auto;
    }
  }

  @media (prefers-reduced-motion) {
    transition: none;
  }

  @include media(">=uol-media-m") {
    .js & {
      width: calc((100% - #{$spacing-4}) / 12 * 9);
    }
  }

  // Like remove all this to accommodate in normal flow
  .js & {
    @include media(">=uol-media-l") {
      position: relative;
      width: auto;
      transform: translateX(0);
      // width: calc((100% - #{$spacing-5}) / 12 * 8);
    }
  }

  .uol-form__input-container {
    padding-bottom: $spacing-3;

    @include media(">=uol-media-l") {
      padding-bottom: calc(#{$spacing-3} + #{$spacing-2}); // increase by 8px, gives 20px
    }


    &:after {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      bottom: -#{$spacing-4};
      left: 0;
      height: 2px;
      background: $color-border--light;
    }
  }

  .uol-form__custom-fieldset {
    margin-bottom: 0;

    > *:last-child {
      margin-bottom: 0;
    }
  }

}

  .uol-filters-panel--open {
    .js & {
      transform: translateX(0);
      box-shadow: 0 15px 25px 0 rgba(#000, 0.15), 0 5px 10px 0 rgba(#000, 0.5);
    }


    @include media(">=uol-media-l") {
      box-shadow: none;
    }

    .uol-form__input-wrapper__num-of-selected-message {
      top: 11px;
    }
  }

  // TODO: Remove ID dependency
  #filters-close-button {
    position: absolute;
    top: $spacing-4;
    right: $spacing-4;

    @include media(">=uol-media-l") {
      display: none;
    }
  }

  // TODO: Remove ID dependency
  #show_search_results {
    @include media(">=uol-media-l") {
      display: none;
    }
  }

  // fix so filter panel text fits on one line
  #clear_filter_panel {
    padding: 0.8em 2.1em;
  }

  .uol-filters-panel__title {
    @extend %text-size-heading-4;
    @extend %uol-font-sans-serif;

    font-weight: $font-weight-bold--sans-serif;
    margin-top: 0;
  }

    .uol-filters-panel__title__count {
      @extend %text-size-heading-6;
    }

  .uol-filters-panel__footer {
    button {
      display: block;
      width: auto;
      margin-bottom: $spacing-5;

      &:first-of-type {
        margin-top: $spacing-4;
      }

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }


.uol-filters-panel__overlay {
  position: fixed;
  top: -100%;
  left: 0;
  right: 0;
  height: 100%;
  background: rgba($color-black--dark, 0);
  transition: background 0.7s ease;

  .uol-filters-panel--open + & {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba($color-black--dark, 0.78);
    z-index: ($filters-z-index - 1);
  }
}
// No max width for small input within filter panel
.uol-filters-panel {
  .uol-form__input-container--small {
    max-width: none;
  }
}

//Checkbox within filters panel

.uol-filters-panel {
  .uol-form__input--checkbox-custom {
    svg {
      height: 20px;
      width: 20px;
    }
  }
}

.uol-filters-panel--open {
  .uol-form__input--checkbox-custom {
    svg {
      height: 36px;
      width: 36px;
    }
  }
}
  • URL: /components/raw/uol-filters-panel/_filters-panel.scss
  • Filesystem Path: src/library/02-components/filters-panel/_filters-panel.scss
  • Size: 3.6 KB
  • Content: 
    export const uolFiltersPanel = () => {
  const filtersPanel = document.querySelector('.uol-filters-panel')

  if (filtersPanel) {
    const btnCloseFilters = document.createElement('button');
    btnCloseFilters.id = 'filters-close-button';
    btnCloseFilters.type = 'button';
    btnCloseFilters.classList.add('uol-button');
    btnCloseFilters.classList.add('uol-button--secondary');
    btnCloseFilters.classList.add('uol-icon');
    btnCloseFilters.classList.add('uol-icon--icon-only');
    btnCloseFilters.classList.add('uol-icon--icon-only--large');
    btnCloseFilters.innerHTML = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
        <path fill="#000000" fill-rule="nonzero" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>      </svg>
      <span class="uol-icon__label">Close filter panel</span>
    `;

    filtersPanel.insertAdjacentElement('afterbegin', btnCloseFilters);

    // Change text of clear filters button and filters title text for if single or plural
    const numOfFilters = filtersPanel.getElementsByClassName("uol-form__input-container").length;
    const clearFiltersButtonText = document.getElementById('clear_filter_panel').getElementsByTagName('span')[0];
    const filtersTitleText = document.getElementById('filters-panel-title');
    clearFiltersButtonText.innerHTML = (numOfFilters == 1) ? "Clear filter" : "Clear all filters";
    filtersTitleText.innerHTML = (numOfFilters == 1) ? "Filter" : "Filters";

    // in DS environment show chips placeholder
    if (window.location.href.indexOf('/components/') > -1) {
      const para = document.createElement("div");
      para.classList.add("uol-chips-ds-container");
      const node = document.createTextNode("Placeholder for chips: Filter selections will add chips to this area in live environment.");
      para.appendChild(node);

      const resultsItems = document.getElementsByClassName("uol-results")[0];
      const searchResults = document.getElementsByClassName("uol-search-results__results")[0];

      searchResults.insertBefore(para, resultsItems);   
    }

    // Clear Filter panel on click of Clear all filters button
    const clearFiltersBtn = document.querySelector('#clear_filter_panel')

    clearFiltersBtn.onclick = () => {
      //Get all checkboxes within the filter panel and clear
      const checkboxes = filtersPanel.querySelectorAll('input[type=checkbox]')
      checkboxes.forEach(checkbox => checkbox.checked = false);

      // Get all radios within the filter panel and clear
      const radios = filtersPanel.querySelectorAll('input[type=radio]')
      radios.forEach(radio => radio.checked = false);

      //Get all selects and set back to default
      const selects = filtersPanel.querySelectorAll('select')
      selects.forEach(select => select.selectedIndex = -1);

      //Get all selects and set back to default
      const customSelects = filtersPanel.querySelectorAll('input[type=text]')
      customSelects.forEach(customSelect => customSelect.value = "");

      //Get all li elements in filter panel and clear them
      const listItems = filtersPanel.querySelectorAll('li')
      listItems.forEach(listItem => {
        listItem.setAttribute('data-option-value', 'false');
        listItem.setAttribute('aria-selected', 'false');
        listItem.removeAttribute('data-filter-hidden');
        if (listItem.getElementsByTagName('svg')[0]) {
          listItem.getElementsByTagName('svg')[0].remove();
          
        }
      });

    }

  }
}
  • URL: /components/raw/uol-filters-panel/filters-panel.module.js
  • Filesystem Path: src/library/02-components/filters-panel/filters-panel.module.js
  • Size: 3.6 KB 
{
  "open": false,
  "filter_inputs": [
    {
      "id": "filter-study-mode",
      "name": "filter-study-mode",
      "label": "Mode of study",
      "type": "checkbox",
      "legend": "Mode of study",
      "hint": "Select all that apply",
      "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"
        }
      ]
    },
    {
      "id": "filter-delivery-type",
      "name": "filter-delivery-type",
      "label": "Delivery type",
      "type": "checkbox",
      "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"
        },
        {
          "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",
      "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"
        },
        {
          "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 14 search results",
    "style": "primary",
    "id": "show_search_results"
  }
}