Issue #2669: Pages with tables have the max width set to 1920 [-NL]

[CocoByte]

Ticket 2669

Resolves #2669

Changes

• Added a context processor to conditionally apply widescreen CSS to the DOM if the request is in a list of urls designated for widescreen detection
• Updated SCSS files to include custom widescreen CSS
• Updated HTML files (footer.html, header.html, portfolio_base.html) to include widescreen classes
• Added a basic test to check that --widescreen CSS modifiers are loaded into the DOM

Context for reviewers

There was a little debate over whether to use different class names in the CSS for a --widescreen modification (since the same max-width adjustment is applied for each use case). However, after examining BEM principles, it was decided to stick to BEM best practice and create separate CSS classes for each use case. Separate SCSS files were also made to try to adhere to our current housekeeping in the SCSS folder.

NOTE: the ACs do say to cover the Members page, but since we do not have a way to navigate to this yet, the url for Members was not included in the context processor's list of urls to flag for widescreen mode. If this needs to be updated let me know.

Setup

If you see a 403 error when trying to navigate to /domains, go to /admin > "user portfolio permissions" and add a new entry that grants you admin permissions.

Code Review Verification Steps

Code is deployed on sandbox-nl

Navigate to the domains table. Verify that...

• The header, footer, and main body are adjusted to a max-width = 1920px for wider screens. (This should be visually detectable, but you can also inspect the HTML and search for "--widescreen" in the DOM. There should be several different CSS classes ending in --widescreen)

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
• Added at least 2 developers as PR reviewers (only 1 will need to approve)
• Messaged on Slack or in standup to notify the team that a PR is ready for review
• Changes to “how we do things” are documented in READMEs and or onboarding guide
• If any model was updated to modify/add/delete columns, makemigrations was ran and the associated migrations file has been commited.

Ensured code standards are met (Original Developer)

• All new functions and methods are commented using plain language
• Did dependency updates in Pipfile also get changed 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)

• 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)
• Add at least 1 designer as PR reviewer

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

• Pulled this branch locally and tested it
• Reviewed this code and left comments
• Checked that all code is adequately covered by tests
• Made it clear which comments need to be addressed before this work is merged
• If any model was updated to modify/add/delete columns, makemigrations was ran and the associated migrations file has been commited.

Ensured code standards are met (Code reviewer)

• All new functions and methods are commented using plain language
• Interactions with external systems are wrapped in try/except
• Error handling exists for unusual or missing values
• (Rarely needed) Did dependency updates in Pipfile also get changed in requirements.txt?

Validated user-facing changes as a developer

• 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)

• Tested with multiple browsers, the suggestion is to use ones that the developer didn't (check off which ones were used)

  • Chrome
  • Microsoft Edge
  • FireFox
  • Safari

• (Rarely needed) Tested as both an analyst and applicant user

Note: Multiple code reviewers can share the checklists above, a second reviewers should not make a duplicate checklist

As a designer reviewer, I have

Verified that the changes match the design intention

• Checked that the design translated visually
• Checked behavior
• Checked different states (empty, one, some, error)
• Checked for landmarks, page heading structure, and links
• Tried to break the intended flow

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

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.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[zandercymatics]

Looks great!

[AnnaGingle]

@CocoByte the organization (portfolio) pages are a lot wider than the regular pages. Can you add the same padding to the org table pages (home, requests, members) that the non-org table has?

Screenshot of the padding on the non-org domains table

[AnnaGingle]

See comment

[CocoByte]

@CocoByte the organization (portfolio) pages are a lot wider than the regular pages. Can you add the same padding to the org table pages (home, requests, members) that the non-org table has?

Screenshot of the padding on the non-org domains table

Hi Anna....I'm a little confused. I thought we wanted these pages to be wider. Perhaps a huddle in slack will clarify. (I'll DM you)

[rachidatecs]

Portfolio view tables look good, except for the footer nav

[rachidatecs]

I think this is what @AnnaGingle is referring to. It's a non-col-12 column on the tables, which makes the header and footer 1920 but the table max width an effective col-10 width

[CocoByte]

I think this is what @AnnaGingle is referring to. It's a non-col-12 column on the tables, which makes the header and footer 1920 but the table max width an effective col-10 width

Just barely saw your comment. Thanks Rachid! I huddled with Anna and we fixed it

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[github-actions]

🥳 Successfully deployed to developer sandbox nl.

[AnnaGingle]

Great work! I will check in with the design team if another ticket is needed. For now, this is great. Thanks!

[github-actions]

🥳 Successfully deployed to developer sandbox nl.