reCAPTCHA: Eligibility index page - Align page and refactor #2570
Conversation
github-actions
bot
added
back-end
Coverage report
Click to see where and how coverage changed
This report was generated by python-coverage-comment-action |
||||||||||||||||||||||||
| --radio-input-gap: calc(24rem / 16); | ||
| } | ||
|
|
||
| @media (min-width: 992px) { | ||
| :root { | ||
| --radio-input-gap: calc(15rem / 16); | ||
| } | ||
| } | ||
|
|
||
| .radio-label { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .radio-input-group { | ||
| gap: var(--radio-input-gap); | ||
| } |
There was a problem hiding this comment.
This is a refactor that I made by:
- Bumping up the 15px gap on desktop to 16px,
- Allows us to get to place where we are only using 8pt values for both desktop (16px) and mobile (24px)
- Which then allows us to use
gap-4(4 is 24px) andgap-md-3(3 is 16px) in the template code.
Now all the radio button CSS styles are around who the element looks, and all the positioning (margin, padding) are done with classes on the page the elements are on.
There was a problem hiding this comment.
Bullet points make sense 👍
Not sure I'm following this part:
Now all the radio button CSS styles are around who the element looks
There was a problem hiding this comment.
how the element looks, rather than how the elements as a whole are positioned onto the page. sorry typo!
|
|
||
| <div {% if id %}id="{{ id }}"{% endif %} class="ps-3 ps-md-0 ps-lg-0 offset-md-1 offset-lg-1 radio-container"> |
There was a problem hiding this comment.
I didn't see the radio-container class name used in any CSS or JS, so I deleted it. I can't remember why I made this class name, perhaps purely for naming/reading purposes(!?!)
machikoyasuda
changed the title
machikoyasuda
force-pushed
the
feat/2539-recaptcha-eligibility
branch
from
8d215cd to
22950f6
Compare
machikoyasuda
force-pushed
the
feat/2539-recaptcha-eligibility
branch
from
22950f6 to
72b312d
Compare
machikoyasuda
force-pushed
the
feat/2539-recaptcha-eligibility
branch
from
72b312d to
1342b24
Compare
closes #2539
What this PR does
This PR primarily makes changes on the Eligibility page, but, in doing this, because of the way we are re-using code or CSS styles in various places, it touches on changes made on other parts of the flow, detailed below.
Eligibility page
All forms in the flow
All pages in the flow
<h1>are now left-aligned on desktop and mobile by default, as declared in the CSS, so this will affect all pages:Error page, Help page are unaffected by this h1 change:
