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

Move continue button to below the pricing summary #2101

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Move continue button to below the pricing summary #2101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
089dc5e
Move continue button to below the pricing summary
lailien3 Dec 23, 2024
b813434
new attempt
lailien3 Jan 2, 2025
8f33f64
changing button and grid positions instead
lailien3 Jan 9, 2025
86537dd
added top margin, made styling more specific
lailien3 Jan 10, 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: 1 addition & 1 deletion packages/gafl-webapp-service/assets/sass/rod-licensing/_calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ div#cal-image-div {
color: #1d70b8;
}
&.selected {
colour: #fff;
color: #fff;
background: #2d89c9;
border-color: #2d89c9;
}
Expand Down
16 changes: 16 additions & 0 deletions packages/gafl-webapp-service/assets/sass/rod-licensing/_general.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,19 @@ div.initially-hidden {
.phone-number {
white-space: nowrap;
}

@media (max-width: 640px) {
#continue {
position: absolute;
top: auto;
bottom: 0px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

no need for px here

left: 15px;
right: 15px;
width: auto;
}

.govuk-grid-row {
position: relative;
padding-bottom: 75px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

These styles are fine, but they'll require far more testing effort than if you confined them to only the pages they're needed on - i.e. the licence type and licence length pages. To do this we can use the :has pseudo-class:

.govuk-grid-row:has(.payment-summary-wrap)

This will only target the #continue and .govuk-grid-row elements on pages where the payment summary exists, which is exactly what we want. The :has pseudo class is supported by mobile browsers released in 2022 and 2023, so well within Grade B support. Realistically, there will be those with old smartphones stuck on old versions of Android or iOS that don't offer support to this selector, but they'll regress gracefully to the version where the prices display beneath the continue button. We should check this with the PO after QA to see whether it's acceptable to do this.

}
Loading