Skip to content

R1-268: Scholarships - Ordering and labels #1105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 6, 2025
Merged

R1-268: Scholarships - Ordering and labels #1105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
845a6b3
Reposition scholarships filters and allow editors to choose its backg…
Oct 28, 2025
8962561
Rename location to fee status in programme filters
Oct 28, 2025
fa15132
Remove lower body now that the filters are on top
Oct 28, 2025
1221c34
Use textchoices for background color
Nov 3, 2025
5774037
Merge branch 'master' of github.com:torchbox/rca-wagtail-2019 into fe…
Nov 3, 2025
308d4eb
Remove extra use of lower body
Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions ..._styleguide/templates/patterns/pages/scholarships/scholarships_listing_page--results.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ context:
- step:
value:
heading: 'Use the ‘Express interest’ button if you hold an offer'
lower_body:
- dummy
contact: true
contact_model_image: true
published_at: !!timestamp '2020-05-13 2:00:00'
Expand Down
148 changes: 57 additions & 91 deletions rca/project_styleguide/templates/patterns/pages/scholarships/scholarships_listing_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
{% endblock %}

{% block content %}

<div class="page page--no-hero">

<header class="page__header bg bg--dark">
<div class="title-area title-area--guide grid">
<div class="title-area__content">
Expand Down Expand Up @@ -41,122 +39,91 @@ <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--light">

{% if not results %}
<div class="section__notch">
<div class="section__notch-fill section__notch-fill--second-col"></div>
</div>
{% endif %}

<div class="section__row section__row--last {% if not results %}section__row--first-small{% else %}section__row--first{% endif %} 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>
</div>

</section>

{% if stats_block %}
{% include "patterns/organisms/stat-block/stat-block.html" with modifier="light-to-dark" %}
{% endif %}

<section class="section bg bg--dark section--end" id="scholarships">

{% if not stats_block %}
<div class="section__notch">
<div class="section__notch-fill section__notch-fill--fourth-col"></div>
</div>
{% endif %}

<section class="section bg bg--{{ page.scholarships_listing_background_color }} section--end" 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>

{% if page.scholarship_application_steps %}
{% include "patterns/molecules/steps/steps.html" with title=page.scholarship_listing_sub_title steps=page.scholarship_application_steps modifier="condensed" scholarships=True %}
{% endif %}

</section>


<form class="section bg bg--dark js-tabs" method="get" action="#results" id="results">

<div class="section__row">

<nav class="section filter-bar filter-bar--large {% if not results %}filter-bar--no-results-large{% endif %} " data-filter-bar>

<div class="grid">
<div class="layout__start-one layout__span-two layout__@large-start-two layout__@large-span-three">
<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 not results %}filter-bar--no-results-large{% endif %} " data-filter-bar>
<div class="grid">
<div class="layout__start-one layout__span-two layout__@large-start-two layout__@large-span-three">
{% if page.scholarships_has_dark_background %}
{% include "patterns/molecules/categories-tablist/categories-tablist.html" with value=filters modifier="large" reset=True dark=True reset_button_text="Reset" %}
{% else %}
{% include "patterns/molecules/categories-tablist/categories-tablist.html" with value=filters modifier="large" reset=True dark=False reset_button_text="Reset" %}
{% endif %}

<div class="filter-tab-options filter-tab-options--mobile">
<div class="filter-tab-options__footer layout__start-one layout__span-two layout__@large-start-two layout__@large-span-four grid">
<div class="filter-tab-options__clear layout__start-one layout__span-one layout__@large-start-two">
<a class="filter-tab-options__clear-link hidden" href="#" data-filters-clear-category>Clear</a>
</div>
<button class="filter-tab-options__button link link--primary layout__start-two layout__span-one layout__@large-start-four" data-filter-submit>
<span class="link__label">Show results</span>
<svg width="12" height="8" class="link__icon link__icon--rotated" aria-hidden="true"><use xlink:href="#arrow"></use></svg>
</button>
<div class="filter-tab-options filter-tab-options--mobile">
<div class="filter-tab-options__footer layout__start-one layout__span-two layout__@large-start-two layout__@large-span-four grid">
<div class="filter-tab-options__clear layout__start-one layout__span-one layout__@large-start-two">
<a class="filter-tab-options__clear-link hidden" href="#" data-filters-clear-category>Clear</a>
</div>
<button class="filter-tab-options__button link link--primary layout__start-two layout__span-one layout__@large-start-four" data-filter-submit>
<span class="link__label">Show results</span>
<svg width="12" height="8" class="link__icon link__icon--rotated" aria-hidden="true"><use xlink:href="#arrow"></use></svg>
</button>
</div>
</div>
</div>

</nav>


<nav class="filter-bar filter-bar--small {% if not results %}filter-bar--no-results-small{% endif %} 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">
<use xlink:href="#arrow"></use>
</svg>
</a>
</nav>

<div class="filter-takeover bg bg--light">
<div class="filter-takeover__container">
{% for item in filters.items %}
{% if item.queryset %}
<div class="filter-takeover__tab-content tabs__panel tabs__panel--hidden js-tab-panel" id="{{ item.tab_title|slugify }}" role="tabpanel" aria-labelledby="tab-{{ item.tab_title|slugify }}">
{% include "patterns/molecules/filter-tab-options/filter-tab-options.html" with single_filter_only=True %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</nav>

<nav class="filter-bar filter-bar--small {% if not results %}filter-bar--no-results-small{% endif %} 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">
<use xlink:href="#arrow"></use>
</svg>
</a>
</nav>

{% if results %}
<div class="section__row grid">
<div class="layout__start-one layout__span-two layout__@large-start-two layout__@large-span-three">
{% if programme %}
<p class="body body--one"><b>Scholarship results showing for {{ programme }} programme</b></p>
<div class="filter-takeover bg bg--light">
<div class="filter-takeover__container">
{% for item in filters.items %}
{% if item.queryset %}
<div class="filter-takeover__tab-content tabs__panel tabs__panel--hidden js-tab-panel" id="{{ item.tab_title|slugify }}" role="tabpanel" aria-labelledby="tab-{{ item.tab_title|slugify }}">
{% include "patterns/molecules/filter-tab-options/filter-tab-options.html" with single_filter_only=True %}
</div>
{% endif %}
<p class="body body--two">{{ page.characteristics_disclaimer }}</p>
</div>
{% endfor %}
</div>
</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 %}
{% if results %}
<div class="section__row grid">
<div class="layout__start-one layout__span-two layout__@large-start-two layout__@large-span-three">
{% if programme %}
<p class="body body--one"><b>Scholarship results showing for {{ programme }} programme</b></p>
{% endif %}
<p class="body body--two">{{ page.characteristics_disclaimer }}</p>
</div>
{% endif %}

</form>

</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>
{% endif %}
</form>

<section class="section bg bg--light">
{% if page.scholarships_has_dark_background %}
<div class="section__notch">
<div class="section__notch-fill section__notch-fill--second-col"></div>
</div>
{% endif %}

<div class="section__row section__row--last section__row--first grid">
<div class="section__row section__row--last {% if not results %}section__row--first-small{% else %}section__row--first{% endif %} 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.lower_body guide_page=True %}
{% include "patterns/molecules/streamfield/stream_block.html" with value=page.body guide_page=True %}
</div>
</div>

</section>

{% if related_pages.items %}
Expand All @@ -183,7 +150,6 @@ <h2 id="scholarship-listing-title" class="heading heading--two layout__start-one
<div class="section__sticky-placeholder"></div>
</section>
{% endif %}

</div>
</div>

Expand Down
2 changes: 0 additions & 2 deletions rca/project_styleguide/templates/patterns/pages/scholarships/scholarships_listing_page.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ context:
- step:
value:
heading: 'Use the ‘Express interest’ button if you hold an offer'
lower_body:
- dummy
contact: true
contact_model_image: true
published_at: !!timestamp '2020-05-13 2:00:00'
Expand Down
28 changes: 28 additions & 0 deletions rca/scholarships/migrations/0012_scholarships_listing_background_color.py
View file
Open in desktop
Copy link
Collaborator

@neilbulloch neilbulloch Oct 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: Avoid using autogenerated migration names :)

Copy link
Collaborator Author

@patrickcuagan patrickcuagan Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated!

Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# Generated by Django 4.2.20 on 2025-11-03 01:09

from django.db import migrations, models


class Migration(migrations.Migration):

dependencies = [
("scholarships", "0011_wagtail_3_upgrade"),
]

operations = [
migrations.RemoveField(
model_name="scholarshipslistingpage",
name="lower_body",
),
migrations.AddField(
model_name="scholarshipslistingpage",
name="scholarships_listing_background_color",
field=models.CharField(
choices=[("light", "Light"), ("dark", "Dark")],
default="light",
help_text="Select the background color for this section",
max_length=10,
verbose_name="Background Color",
),
),
]
25 changes: 18 additions & 7 deletions rca/scholarships/models.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,18 @@ class ScholarshipsListingPage(ContactFieldsMixin, BasePage):
introduction = models.CharField(max_length=500, blank=True)
body = StreamField(ScholarshipsListingPageBlock())

class BackgroundColor(models.TextChoices):
LIGHT = "light", "Light"
DARK = "dark", "Dark"

# Scholarship listing fields
scholarships_listing_background_color = models.CharField(
max_length=10,
choices=BackgroundColor.choices,
default="light",
help_text="Select the background color for this section",
verbose_name="Background Color",
)
scholarship_listing_title = models.CharField(
max_length=50, verbose_name="Listing Title"
)
Expand All @@ -114,7 +125,6 @@ class ScholarshipsListingPage(ContactFieldsMixin, BasePage):
blank=True,
help_text="A small disclaimer shown just above the scholarships listing.",
)
lower_body = StreamField(ScholarshipsListingPageBlock())

# Scholarship form fields
key_details = RichTextField(features=["h3", "bold", "italic", "link"], blank=True)
Expand All @@ -127,17 +137,17 @@ class ScholarshipsListingPage(ContactFieldsMixin, BasePage):

content_panels = BasePage.content_panels + [
FieldPanel("introduction"),
FieldPanel("body"),
MultiFieldPanel(
[
FieldPanel("scholarships_listing_background_color"),
FieldPanel("scholarship_listing_title"),
FieldPanel("scholarship_listing_sub_title"),
FieldPanel("scholarship_application_steps"),
FieldPanel("characteristics_disclaimer"),
],
heading="Scholarship listing",
),
FieldPanel("lower_body"),
FieldPanel("body"),
MultiFieldPanel([*ContactFieldsMixin.panels], heading="Contact information"),
]

Expand All @@ -164,6 +174,10 @@ def show_interest_bar(self):
def show_interest_link(self):
return True

@property
def scholarships_has_dark_background(self):
return self.scholarships_listing_background_color == self.BackgroundColor.DARK

def anchor_nav(self):
"""Build list of data to be used as in-page navigation"""
items = []
Expand All @@ -183,9 +197,6 @@ def process_block(block):
}
)

for block in self.lower_body:
process_block(block)

return items

def get_context(self, request, *args, **kwargs):
Expand All @@ -211,7 +222,7 @@ def get_context(self, request, *args, **kwargs):
option_value_field="slug",
),
TabStyleFilter(
"Location",
"Fee Status",
queryset=(
ScholarshipLocation.objects.filter(
id__in=queryset.values_list("location_id", flat=True)
Expand Down
40 changes: 30 additions & 10 deletions rca/static_src/sass/components/_categories-tablist.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,19 +252,39 @@
margin-bottom: ($gutter * 2);

// Colours are quite confusing for this component as it has many states, overriding for the scholarship listing
#{$root}__heading {
color: $color--light-grey;
&.bg--dark {
#{$root}__heading {
color: $color--light-grey;
}

#{$root}__tab {
color: $color--light-grey;

&--reset,
&--selected,
&[aria-selected='true'],
&:focus,
&:hover {
color: $color--white;
}
}
}

#{$root}__tab {
color: $color--light-grey;
&.bg--light {
#{$root}__heading {
color: $color--dark-grey;
}

&--reset,
&--selected,
&[aria-selected='true'],
&:focus,
&:hover {
color: $color--white;
#{$root}__tab {
color: $color--dark-grey;

&--reset,
&--selected,
&[aria-selected='true'],
&:focus,
&:hover {
color: $color--black;
}
}
}
}
Expand Down