R1-324: ScholarshipsListingPage - Wire up Home / Overseas toggle switch JS

rca/project_styleguide/templates/patterns/atoms/reset/reset.html

@@ -1,4 +1,4 @@
-<a class="reset{% if modifier %} reset--{{ modifier }}{% endif %}" href="{{ value.href|default:request.path }}" data-filters-reset>
+<a class="reset{% if modifier %} reset--{{ modifier }}{% endif %}" href="{{ value.href|default:request.path }}{% if scholarships %}#results{% endif %}" data-filters-reset>
     {% if not scholarships %}
         <svg class="reset__icon" width="14" height="14">
             <use xlink:href="#reset" />

rca/project_styleguide/templates/patterns/molecules/steps/steps.html

@@ -25,11 +25,7 @@ <h5 class="step-item__heading body body--one">{{ step.heading }}</h5>
                 </div>
             {% endwith %}
         {% endfor %}
-        {% if scholarships %}
-            {% if not results %}
-                {% include "patterns/atoms/exceptional-cta/exceptional-cta.html" with text="Select a programme" not_blank=True link="#programme" %}
-            {% endif %}
-        {% else %}
+        {% if not scholarships %}
             {% include "patterns/atoms/exceptional-cta/exceptional-cta.html" with link=programme_page_global_fields.apply_cta_link text=programme_page_global_fields.apply_cta_text %}
         {% endif %}
     </div>

rca/project_styleguide/templates/patterns/pages/scholarships/scholarships_listing_page.html

@@ -39,7 +39,7 @@ <h2 class="introduction__text section__heading heading heading--five">
         </header>
 
         <div class="page__content js-sticky-point js-sticky-point--bottom">
-            <section class="section bg bg--{{ page.scholarships_listing_background_color }} section--end" id="scholarships">
+            <section class="section bg bg--{{ page.scholarships_listing_background_color }} section--end-mobile-tablet-only" id="scholarships">
                 <div class="section__row section__row--first section__row--last-small grid">
                     <h2 id="scholarship-listing-title" class="heading heading--two layout__start-one layout__span-two layout__@large-start-two layout__@large-span-two anchor-heading">{{ page.scholarship_listing_title }}</h2>
                 </div>
@@ -51,7 +51,7 @@ <h2 id="scholarship-listing-title" class="heading heading--two layout__start-one
 
             <form class="section bg bg--{{ page.scholarships_listing_background_color }} js-tabs" method="get" action="#results" id="results">
                 <div class="section__row">
-                    <nav class="section filter-bar filter-bar--large {% if result_count == 0 %}filter-bar--no-results-large{% endif %} " data-filter-bar>
+                    <nav class="section filter-bar filter-bar--large" data-filter-bar>
                         <div class="grid">
                             <div class="layout__start-one layout__span-two layout__@large-start-two layout__@large-span-three">
                                 {% include "patterns/molecules/categories-tablist/categories-tablist.html" with value=filters modifier="large" reset=True dark=page.scholarships_has_dark_background reset_button_text="Clear filter" scholarships=True %}
@@ -71,7 +71,7 @@ <h2 id="scholarship-listing-title" class="heading heading--two layout__start-one
                         </div>
                     </nav>
 
-                    <nav class="filter-bar filter-bar--small {% if result_count == 0 %}filter-bar--no-results-small{% endif %} bg bg--light" data-filter-bar-small>
+                    <nav class="filter-bar filter-bar--small bg bg--light" data-filter-bar-small>
                         <a class="filter-bar__link body body--two" href="#filters-active" data-filter-launcher>
                             <span class="filter-bar__label">Filters</span>
                             <svg width="12" height="8" class="filter-bar__icon" aria-hidden="true">
@@ -106,8 +106,8 @@ <h2 class="results-total results-total__heading heading heading--four layout__st
                         <p class="body body--two results-total__disclaimer">{{ page.characteristics_disclaimer }}</p>
                     </div>
                 </div>
-                <div class="section__row section__row--last-small">
-                    {% include "patterns/organisms/accordion-block/accordion-block.html" with accordion_id='1' accordions=results title=results_title section_id=page.results_title|slugify scholarship=True %}
+                <div class="section__row">
+                    {% include "patterns/organisms/accordion-block/accordion-block.html" with accordion_id='1' accordions=results title=results_title section_id=page.results_title|slugify modifier="accordion-block--small-margin" scholarship=True %}
                 </div>
             </form>
 
@@ -118,7 +118,7 @@ <h2 class="results-total results-total__heading heading heading--four layout__st
                     </div>
                 {% endif %}
 
-                <div class="section__row section__row--last {% if result_count == 0 %}section__row--first-small{% else %}section__row--first{% endif %} grid">
+                <div class="section__row section__row--last grid">
                     <div class="streamfield rich-text layout__start-one layout__span-two layout__@large-start-two layout__@large-span-three">
                         {% include "patterns/molecules/streamfield/stream_block.html" with value=page.body guide_page=True %}
                     </div>

rca/scholarships/filters.py

@@ -11,11 +11,19 @@ def __init__(self):
             False  # no tab/takeover panel — toggle switch handles this filter
         )
 
+    # The query parameter values are `uk` and `international`
+    # and the DB slugs are `home-fee-status` and `overseas-fee-status`.
+    SLUG_MAP = {
+        "uk": "home-fee-status",
+        "international": "overseas-fee-status",
+    }
+
     def apply(self, queryset, querydict):
         self.querydict = querydict
         fee_status = querydict.get(self.name)
-        if fee_status:
-            return queryset.filter(fee_statuses__slug=fee_status)
+        db_slug = self.SLUG_MAP.get(fee_status)
+        if db_slug:
+            return queryset.filter(fee_statuses__slug=db_slug)
         return queryset
 
     @property

rca/static_src/javascript/components/project-filters.js

@@ -300,7 +300,9 @@ class ProjectFilters {
 
         // Reset
         this.resetButton.addEventListener('click', () => {
-            this.closeProjectFilters();
+            if (this.body.classList.contains('project-filters')) {
+                this.closeProjectFilters();
+            }
         });
 
         // Submit

rca/static_src/javascript/components/scholarship-fee-status-toggle.js

@@ -0,0 +1,62 @@
+class ScholarshipFeeStatusToggle {
+    static selector() {
+        return '[data-scholarship-toggle]';
+    }
+
+    constructor(button) {
+        this.toggleSwitch = button;
+        this.checkbox = this.toggleSwitch.firstElementChild;
+        this.labelHome = this.toggleSwitch.querySelector(
+            '.toggle-switch__label--first',
+        );
+        this.labelOverseas = this.toggleSwitch.querySelector(
+            '.toggle-switch__label--last',
+        );
+        this.resetButton = document.querySelector('[data-filters-reset]');
+
+        let locationRoot = window.location.href;
+        locationRoot = locationRoot.replace('#results', '');
+
+        this.path = window.location.pathname;
+
+        const paramString = locationRoot.split('?')[1];
+        this.queryString = new URLSearchParams(paramString);
+        this.feeStatus = this.queryString.get('fee-status');
+
+        this.setCheckboxState();
+        this.bindEvents();
+    }
+
+    setCheckboxState() {
+        const isOverseas = this.feeStatus === 'international';
+        this.checkbox.checked = isOverseas;
+        this.updateLabels(isOverseas);
+        if (this.feeStatus && this.resetButton) {
+            this.resetButton.classList.remove('reset--hidden');
+        }
+    }
+
+    updateLabels(isOverseas) {
+        // Make sure that the selected label is highlighted.
+        this.labelHome.classList.toggle(
+            'toggle-switch__label--selected',
+            !isOverseas,
+        );
+        this.labelOverseas.classList.toggle(
+            'toggle-switch__label--selected',
+            isOverseas,
+        );
+    }
+
+    applyToggle() {
+        const feeStatus = this.checkbox.checked ? 'international' : 'uk';
+        this.queryString.set('fee-status', feeStatus);
+        window.location = `${this.path}?${this.queryString.toString()}#results`;
+    }
+
+    bindEvents() {
+        this.toggleSwitch.addEventListener('click', () => this.applyToggle());
+    }
+}
+
+export default ScholarshipFeeStatusToggle;

rca/static_src/javascript/main.entry.js

@@ -25,6 +25,7 @@ import Sticky from './components/position-sticky-event';
 import ProgrammeToggleSwitch from './components/programme-toggle-switch';
 import ProjectFilters from './components/project-filters';
 import RelatedContent from './components/related-content';
+import ScholarshipFeeStatusToggle from './components/scholarship-fee-status-toggle';
 import ScholarshipList from './components/scholarship-list';
 import SitewideAlert from './components/sitewide-alert';
 import Slideshow from './components/slideshow';
@@ -156,6 +157,12 @@ document.addEventListener('DOMContentLoaded', () => {
         new EventToggleSwitch(eventtoggleswitch);
     }
 
+    for (const scholarshipFeeStatusToggle of document.querySelectorAll(
+        ScholarshipFeeStatusToggle.selector(),
+    )) {
+        new ScholarshipFeeStatusToggle(scholarshipFeeStatusToggle);
+    }
+
     for (const studymodetoggleswitch of document.querySelectorAll(
         ProgrammeToggleSwitch.selector(),
     )) {

rca/static_src/sass/components/_accordion-block.scss

@@ -11,6 +11,11 @@
         margin-top: ($gutter * 4);
     }
 
+    &--small-margin {
+        margin: $gutter * 2 0;
+        padding: 0;
+    }
+
     &--no-margin {
         margin-top: 0;
     }

rca/static_src/sass/components/_section.scss

@@ -79,6 +79,18 @@
         }
     }
 
+    &--end-mobile-tablet-only {
+        padding-bottom: ($gutter * 2.5);
+
+        @include media-query(medium) {
+            padding-bottom: ($gutter * 3);
+        }
+
+        @include media-query(tablet) {
+            padding-bottom: 0;
+        }
+    }
+
     &--above-grid {
         @include z-index(above-gridlines);
         position: relative;