Skip to content
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

Jump to bottom

#4453 - BUG | FE | Programme page whitespace #1051

Merged
merged 1 commit into from
Sep 30, 2024
Merged

#4453 - BUG | FE | Programme page whitespace #1051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
45 changes: 16 additions & 29 deletions rca/project_styleguide/templates/patterns/pages/shortcourses/short_course.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@

{% block content %}


{% include "patterns/molecules/hero/hero.html" with hero_image=page.hero_image modifier="medium" %}

<div class="page page--overlap">

<div class="page__notch grid">
<div class="page__notch-block bg bg--dark"></div>
</div>
Expand Down Expand Up @@ -51,9 +49,7 @@ <h1 class="title-area__heading heading heading--display-two" id="main-content">{
</header>

<div class="page__content js-sticky-point js-sticky-point--bottom">

<section class="section section--start bg bg--dark">

<div class="section__row programme-overview">
<header class="section__header grid">
<h2 class="section__heading section__heading--primary heading heading--five">
Expand Down Expand Up @@ -84,32 +80,26 @@ <h2 class="section__heading section__heading--primary heading heading--five">
<div class="section__notch">
<div class="section__notch-fill section__notch-fill--third-col"></div>
</div>

</section>

<section class="section bg bg--light">

{% if page.quote_carousel %}
<div class="section__row section__row--first">
{% include "patterns/organisms/carousel/carousel--quotes.html" with carousel=page.quote_carousel modifier='carousel--square carousel--quotes' control_title="Quote carousel" datatag='data-peek-carousel' %}
</div>
{% endif %}

{% if related_staff %}
<div class="section__row section__row--last">
{% include "patterns/organisms/people-module/people-module.html" with title=page.staff_title people=related_staff %}
</div>
{% endif %}

</section>

{% if page.gallery %}
<section class="section bg bg--dark">

<div class="section__notch">
<div class="section__notch-fill section__notch-fill--third-col"></div>
</div>

<div class="section__row section__row--first section__row--last">
<header class="section__header grid">
<h3 class="section__heading section__heading--secondary heading heading--four">
Expand All @@ -120,7 +110,6 @@ <h3 class="section__heading section__heading--secondary heading heading--four">
{% include "patterns/organisms/slideshow/slideshow.html" with slideshow=page.gallery control_title="gallery" modifier='slideshow--author-info' %}
</div>
</div>

</section>
{% endif %}

Expand All @@ -133,7 +122,6 @@ <h3 class="section__heading section__heading--secondary heading heading--four">
</section>
{% endif %}


{% if page.related_programmes %}
<section class="section bg bg--dark {% if not related_links %}section--end{% endif %}">
<div class="section__notch">
Expand All @@ -149,33 +137,33 @@ <h3 class="section__heading section__heading--secondary heading heading--four">
{% endif %}
</section>
{% endif %}

{% if page.external_links %}
<section class="section section--top-space bg bg--light booking-bar-last-item">
{% include "patterns/organisms/related-links/related-links.html" with related_links=page.external_links title="Related pages" %}
</section>
{% endif %}

{% if booking_bar %}
<div class="page__modals">
<div class="modal" id="booking-details" aria-hidden="true">
<div class="modal__overlay bg bg--light" tabindex="-1">
{% include "patterns/atoms/grid-lines/grid-lines.html" %}
<div class="modal__header grid">
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
<span class="modal__close-label">Close</span>
<svg width="14" height="14" class="modal__close-icon" aria-hidden="true"><use xlink:href="#close"></use></svg>
</button>
</div>
<div class="modal__container grid" role="dialog" aria-modal="true" aria-labelledby="booking-details-title">
<div class="modal__content">
{% include "patterns/molecules/short-course-details/short-course-details.html" %}
<div class="page__modals">
<div class="modal" id="booking-details" aria-hidden="true">
<div class="modal__overlay bg bg--light" tabindex="-1">
{% include "patterns/atoms/grid-lines/grid-lines.html" %}
<div class="modal__header grid">
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
<span class="modal__close-label">Close</span>
<svg width="14" height="14" class="modal__close-icon" aria-hidden="true"><use xlink:href="#close"></use></svg>
</button>
</div>
<div class="modal__container grid" role="dialog" aria-modal="true" aria-labelledby="booking-details-title">
<div class="modal__content">
{% include "patterns/molecules/short-course-details/short-course-details.html" %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}

{% endif %}
</div>
</div>

Expand All @@ -192,5 +180,4 @@ <h3 class="section__heading section__heading--secondary heading heading--four">
}
}
</script>

{% endblock %}
19 changes: 19 additions & 0 deletions rca/static_src/sass/components/_booking-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,4 +111,23 @@
}
}
}

.app--short-course & {
patrickcuagan marked this conversation as resolved.
Show resolved Hide resolved
&-last-item {
margin-bottom: -($gutter * 3.8);

// One off custom breakpoint between small and medium
@media only screen and (max-width: 598px) and (min-width: 418px) {
margin-bottom: -($gutter * 2.6);
}

@include media-query(medium) {
margin-bottom: -($gutter * 9.6);
}

@include media-query(large) {
margin-bottom: -($gutter * 10.85);
}
}
}
}
Loading