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

feat(/security/disa-stig): Page redesign #14702

Open
wants to merge 4 commits into
base: feature-security-bubble
Choose a base branch
from
Open

feat(/security/disa-stig): Page redesign #14702

wants to merge 4 commits into from

Conversation

petesfrench
Copy link
Contributor

@petesfrench petesfrench commented Feb 3, 2025 •
edited
Loading

Done

  • Redesign /security/dis-stig to match the figma design
  • Some minor content/spelling changes
  • Created no-full-stop modifier class for use on p-stepped-list

QA

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-12037

@webteam-app
Copy link

Demo

Jenkins

demos.haus

@petesfrench
Copy link
Contributor Author

@mattea-turic @eliman11 This one is ready for review

@eliman11
Copy link

eliman11 commented Feb 3, 2025

Looks pretty much perfect, thanks @petesfrench! Just one comment - can you change the background to our paper color (#F3F3F3)? Will +1 anyways

@mattea-turic
Copy link
Collaborator

mattea-turic commented Feb 3, 2025 •
edited
Loading

Thank you @petesfrench !

For the hero:

  • I forgot to add a break after "Security" in the figma, so could you add this in pls?
  • The disa logo is blurry; not sure why, since the asset looks sharp enough

For 'DISA-STIG for Ubuntu":

  • Could you apply the formatting for the table that Elaine added in Figma? We weren't really sure which to go for, but seeing the current table on mobile, it would probably make more sense to use that one so the user won't have to scroll so much. I hid the old one, so it should be clear which one I'm talking about

For 'How to audit and comply with DISA-STIG?"

  • Could the list numbers sit at the start of the HR/7th column? Right now there's some excess space there
Screenshot 2025-02-03 at 12 38 42

For "Resources":
  • There should be deep bottom padding

@petesfrench petesfrench changed the base branch from main to feature-security-bubble February 3, 2025 12:55
@petesfrench
Copy link
Contributor Author

Thanks @mattea-turic, I have addressed all your comments.

One note on this one:

They have the counter text has styling to align the text to the right. Not sure if this has been done for a reason

@mattea-turic
Copy link
Collaborator

Perfect, thanks @petesfrench ! I'll +1

@petesfrench
Copy link
Contributor Author

@anthonydillon This one is ready for code&qa

@lyubomir-popov
Copy link
Contributor

They have the counter text has styling to align the text to the right. Not sure if this has been done for a reason

yes, so they align correctly (as numbers, not strings) when the counter goes over 10. otherwise the dot would move when the number of digits in the counter goes fro m1 to 2:
1.
11.

anthonydillon
anthonydillon approved these changes Feb 3, 2025
View reviewed changes
Copy link
Contributor

@anthonydillon anthonydillon left a comment

Choose a reason for hiding this comment

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

Looks good Pete. There are a few suggestions in the code. There are several large PNGs which will make the total page size rather large by the time the user reaches the end. Could you try and tweak some formatting to get the best result without compromising much on design.

static/sass/styles.scss
@@ -1766,3 +1766,11 @@ legend {
height: 15rem;
}
}

// XXX: Custom styling to remove the full-stop after the counter in 'p-stepped-list'
Copy link
Contributor

Choose a reason for hiding this comment

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

Could you create an issue on vanilla to purpose this change please?

templates/security/disa-stig.html
{%- endif -%}
{%- if slot == 'image' -%}
<div class="p-image-container--cinematic is-cover">
{{ image(url="https://assets.ubuntu.com/v1/f759a607-hero.png",
Copy link
Contributor

Choose a reason for hiding this comment

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

This is a very large PNG. Could we try with fmt=jpg to reduce the size without losing to much data?

templates/security/disa-stig.html
The Defense Information System Agency (DISA) is a US Department of Defense combat support agency. It provides and operates information infrastructure to support military operations and national-level leadership. The Security Technical Implementation Guide (STIG) is a configuration standard consisting of guidelines for hardening systems to improve a system’s security posture. It can be seen as a checklist for securing protocols, services, or servers to improve the overall security by reducing the attack surface.
</p>
<div class="p-image-container--cinematic is-cover">
{{ image(url="https://assets.ubuntu.com/v1/3c7382e4-what-is-disa.png",
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here. A jpeg would save a lot of page weight

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@anthonydillon anthonydillon anthonydillon approved these changes

Assignees
No one assigned
Labels
Review: Code +1 (with changes) Review: Design +1 Review: QA +1 Review: UX +1
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@petesfrench @webteam-app @eliman11 @mattea-turic @lyubomir-popov @anthonydillon