#3074 - Change (margin/padding) responsive layouts - [AB]

[CocoByte]

Ticket 3074

Resolves #3074

Changes

• Navbar, banners, and footers now have widescreen set globally
• left & right margins set to 48px for --widescreen navbar, banners, and footers (see Context Note)
• Domain Request pages (non-org) have their top padding normalized
• Pages for new domain requests are left-aligned to header content (48px left margin)

Context for reviewers

Setup

Code Review Verification Steps

code is deployed to -ab

As the original developer, I have

Satisfied acceptance criteria and met development standards

• Met the acceptance criteria, or will meet them in a subsequent PR
• Created/modified automated tests
• Update documentation in READMEs and/or onboarding guide

Ensured code standards are met (Original Developer)

• If any updated dependencies on Pipfile, also update dependencies in requirements.txt.
• Interactions with external systems are wrapped in try/except
• Error handling exists for unusual or missing values

Validated user-facing changes (if applicable)

• Tag @dotgov-designers in this PR's Reviewers for design review. If code is not user-facing, delete design reviewer checklist
• Verify new pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
• Checked keyboard navigability
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

• Pulled this branch locally and tested it
• Verified code meets all checks above. Address any checks that are not satisfied
• Reviewed this code and left comments. Indicate if comments must be addressed before code is merged
• Checked that all code is adequately covered by tests
• Verify migrations are valid and do not conflict with existing migrations

Validated user-facing changes as a developer

Note: Multiple code reviewers can share the checklists above, a second reviewer should not make a duplicate checklist. All checks should be checked before approving, even those labeled N/A.

• New pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
• Checked keyboard navigability
• Meets all designs and user flows provided by design/product
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
• (Rarely needed) Tested as both an analyst and applicant user

As a designer reviewer, I have

Verified that the changes match the design intention

• Checked that the design translated visually
• Checked behavior. Comment any found issues or broken flows.
• Checked different states (empty, one, some, error)
• Checked for landmarks, page heading structure, and links

Validated user-facing changes as a designer

• Checked keyboard navigability
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
• Tested with multiple browsers (check off which ones were used)
  • Chrome
  • Microsoft Edge
  • FireFox
  • Safari
• (Rarely needed) Tested as both an analyst and applicant user

References

• Code review best practices

Screenshots

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[gabydisarli]

Can we match the placement of the main content and the sticky behavior of the interior pages for the request form and apply it to:

• domain pages
• your profile & other profile views

I like the way that the sidebar nav in the request form is anchored onto the Logo in the header. Then when you expand your window the content stays put until a certain point and then becomes sticky and moves with the content.

[gabydisarli]

^the above comment applies to both org and non-org model. When looking at the alignment on the side bar + Logo there does seem to be a misalignment on the domain request form that doesn't quite match what the non-org request form has. In the screenshot I'm showing what I mean. I think the logo should line up to the green line.