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.

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

Update styling of reduced nav on small screens #5246

Merged
merged 2 commits into from
Jul 31, 2024

Conversation

bartaz
Copy link
Member

@bartaz bartaz commented Jul 25, 2024

Done

Updates the styling of top reduced navigation on mobile screens to match desktop:

  • changes background to alternative
  • changes text colour (and icons) to muted

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

QA

  • Open demo
  • Check the very top navigation bar (the one that says Canonical) on mobile screen
  • Make sure that the background and text colour is the same as on large screen (not the same as navigation below it)

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

  • PR should have one of the following labels to automatically categorise it in release notes:
    • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
  • Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
    • if CSS class names are not changed it can be bugfix release (x.x.X)
    • if CSS class names are changed/added/removed it should be minor version (x.X.0)
    • see the wiki for more details
  • Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

image

@webteam-app
Copy link

@lyubomir-popov
Copy link
Contributor

much better! two final things:

  • the weight of "Canonical Ubuntu" is 300 instead of 400, like the links on the right. It should match so 400
    image
  • the mobile nav threshold var might need an adjustment as things wrap:
    image

@petesfrench
Copy link
Contributor

petesfrench commented Jul 26, 2024

does the X use to close the search need to be the same colour as the other items?
image
Apart from that, LGTM

@bartaz
Copy link
Member Author

bartaz commented Jul 26, 2024

does the X use to close the search need to be the same colour as the other items?

Yes, as far as I understand, the X is when the search is "Selected" so we show it in standard text colour, not muted.

@lyubomir-popov
Copy link
Contributor

colours look good, but I would make the small caps headings muted. they also feel a little too bold - but that could be due to the background color

Copy link
Contributor

@petesfrench petesfrench left a comment

Choose a reason for hiding this comment

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

LGTM

@bartaz bartaz merged commit 78863b6 into canonical:main Jul 31, 2024
10 checks passed
@bartaz bartaz deleted the mobile-reduced-nav branch July 31, 2024 09:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants