Fix alignment on bubble and remove black box on mobile #13428

petesfrench · 2024-01-04T09:24:25Z

Done

These are the issues that have been fixed:

Two other visual bugs:

The padding of the menu button needs to be adjusted in bubbles on mobile, should match that of "Canonical Ubuntu" next to it. (Please check that whatever you do here doesn't affect the button on the home, which has different padding)

There's an alignment issue between navigation and the third column in rebranded pages. This looks OK in the /data bubble and microk8s.io. In the example below, "Products" and "Your subscriptions" should align with "Ubuntu Pro" in the hero; see how it does in the Data bubble below that.

Little visual bug on mobile
I noticed a visual bug persists on mobile: see the darker rectangle.

QA

Check out this feature branch and see that the above issues are fixed
Run the site using the command ./run serve or dotrun
View the site locally in your web browser at: http://0.0.0.0:8001/
- Be sure to test on mobile, tablet and desktop screen sizes
[List additional steps to QA the new features or prove the bug has been resolved]

Issue / Card

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

…on mobile

webteam-app · 2024-01-04T09:24:29Z

Demo starting at https://ubuntu-com-13428.demos.haus

codecov · 2024-01-04T09:26:03Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (861a557) 74.28% compared to head (eb137d4) 74.28%.
Report is 23 commits behind head on meganav-rebase.

Additional details and impacted files

@@               Coverage Diff               @@
##           meganav-rebase   #13428   +/-   ##
===============================================
  Coverage           74.28%   74.28%           
===============================================
  Files                 107      107           
  Lines                2866     2866           
  Branches              974      974           
===============================================
  Hits                 2129     2129           
  Misses                713      713           
  Partials               24       24

mtruj013

On bubbles the top padding for these is slightly different, Canonical Ubuntu has it set to .5rem and the menu link to .75. Not sure which of the two is correct though

mtruj013 · 2024-01-04T14:33:19Z

static/sass/_pattern_navigation.scss

    .p-navigation__item {
      .p-navigation__link {
        color: $color-mid-light;
      }
+
+      .js-menu-button.p-navigation__link {
+        padding-left: 1rem;


At least for bubbles I think you need to remove the left padding on the first item, otherwise it won't be aligned to the hero text:

I wasn't sure about this, as we would need to also align it to the navigation about (so 'your subscriptions' and 'products'). As well, assuming we are just aligning the text inside the button itself, it might look a bit weird on hover, or when it is the active page. something like this (It wont happen on this page as 'your subscriptions' doesn't keep you in the bubble):

What are you thoughts on this @juanruitina?

We had the same problem on c.com fwiw. I don't remember what we ended up doing, thought it was removing the left padding but it doesn't look like that's right. Maybe taking a look at that repo would be helpful. This is what we ended up with for example, same thing for bubbles like /data:

I see in canonical.com that we added some negative margin: p-navigation__items has margin-left: -0.75rem; This way the hover/active states look OK: it is the text that needs to align, not the underlining. (Demo is failing so I couldn't manage to test it :/).

petesfrench · 2024-01-12T09:50:43Z

@mtruj013 Can you give this another code&qa please?

mtruj013

LGTM! Just have to run prettier I think

lyubomir-popov · 2024-01-17T15:59:06Z

Still slightly off, I've typed the same text in the menu item, as in the first paragraph to cancel any kerning differences, and it is not quite there yet:

lyubomir-popov · 2024-01-18T12:53:54Z

looks good thanks @petesfrench

* Fix alignment within grid within bubbles & remove floating black box on mobile * Fix alignment of 'canonical' in the reduced mobile nav * Add missing requirements * Actually add missing requirements * Align navigation to grid text * Appease lint gods * Update color of side nav tabs when active * Align first nav item with text * Appease linter * Align items inside the dropdown ith page text

* add is-reduced class to top nav bar when subnav is present * WIP reduced top nav * Remove global nav * Remove margin botton from the nav * WIP - Update sign in icon * add skip link * WIP update main nav to use vanilla pattern as prescribed * WIP sign in dropdown * WIP mobile dropdown * Display username when logged in * Update background of selected menu * Update mobile view of reduced top nav * Add menu on mobile view * WIP - secondary dropdowns * Fix dropdown * Update vanilla to 3.2.0 * Update sign in * Fix dropdown-window * Update dropdown-windown-overlay * Update dropdown mobile view * Fix menu button * Lint scss * Update search bar * Fix overlay on mobile * Fix user dropdown * Fix overlay when closing menu * Update secondary nav classes * Update nav on tutorials page * Fix tutorial topic dropdown * Apply design review * Update dropdown bg color * Switch to scroll listening over page anchors * Fix dropdown mobile view on home page * Fix z-index * Update dropdown content mobile view * Update dropdown content responsiveness * Keep menu open on small screen * Stop Propagation * Apply suggestions after code review * Fix mobile dropdown cta * fix search form * remove position absolute on reduced mobile top nav * remove active indicator on small screen nav dropdown * adjust reduced nav translateY position on x large screens * linting * prevetn page from scrolling when opening secondary nav item on mobile * maintain reduced nav within bubbles * remove hash triggers for mega nav * update the way the reduced nav is hidden to prevent modals breaking * add focus event listeners on reduced nav * make sure mobile dropdowns are closed when closing the menu * add meganav yaml proof of concept * Remove unused variables * add global nav * set global nav breakpoint to match the project nav threshold * add all get ubuntu links to meganav * add support links to meganav yaml * add community links to mega nav yaml * add products links to meganav.yaml * add use case links to meganav.yaml * fix typos and add missing links * create meganav base partial * Fix typos Co-authored-by: Peter French <[email protected]> * More typos Co-authored-by: Peter French <[email protected]> * add use case link descriptions * add missing meganav data * update tabbed content to support dynamically added tabs * add tabbed content js to main js * WIP styles for get ubuntu dropdown * add missing link to meganav * set meganav secondary link color * fix hover and active states on meganav tabbed content * fix background colors * linting * improve split lists in main panel * remove placeholder content * easeout the dropdown window, rather than easein * add is-muted class * initial pass at adding mobile styles to meganav * add chevrons to mobile meganav * add check for dropdown content elements * add animating sub sections to mobile meganav * fix alignment of muted headings in meganav * fix button margin * fix padding on mobile meganv, and animation speed on overlay * update slide behaviour on mobile meganav * linting * prevent main nav transform on desktop * update bg color on selected meganav sidenav * update hover state on list items * update column layout * add hero item to primary content * remove psuedo element based hover state * organise meganv partials into their own directory * add split_list filter to context * create list item partial for repeated markup * update layout of meganav hero item * revert hero item concept and single column layout * fix kvm link * WIP remaining meganav sections * fix infrastructure typo * add unique ids to all meganav sidenav ctas and targets * update global nav to 3.2.0 * add numpy for easier list splitting * add 3 column views to meganav content panels * add update meganav.yaml * update global nav to 3.2.1 * close open meganav dropdowns when global nav is opened * handle focus events * hide dropdown chevron on subnav if there are no items to show * update user login nav item * remove animation rule from nav row * Rename download-content to get-ubuntu-content * Format python * Update products in meganav.yaml * Update 'use cases', 'support' and 'community' in meganav.yaml * Edit content Replace anchor links Improve bubble titles * Make references to "Certified" consistent Incorporate feedback from Gloria * Rename "Support" product tab as "Security and support" Add Pro and Certifications Make Certified consistent * Tweak Ubuntu Server links Shorten Landscape description Tweak Smart home/city * Review YAML to match spreadsheet Repurpose secondary links under "Use case" for "By industry" Fix capitalisation * Remove temp fixes * Implement sliding nav into meganav (#13009) * add global nav * add tabbed content js to main js * fix global nav chevron position on reduced view * Add second view for mobile * Refactor to work with new sliding nav * Fix css issues from refactoring html structure * lint-scss * Update with design usggestions from initial ux review * Further ux review changes * Make user dropdown work wit sliding nav * Fix bug in account dropdown where clicking outside the made navigation would cause it to open * Format prettier * revert use-cases changes for demo * Increase default grid width * Implemened redesigned use-cases * Lint-scss * Further ux changes for demo purpose - global nav not working on mobile * Implement new global nav for desktop * Implement new global nav for mobile view * Changes based on code and QA * Content QA Shorten line on Products > Featured Fix capitalisation Fix consistency issues * Reposition search icon * Add content fixes Hyphenation for "enterprise-grade" Replace Cloud Native Operations Survey link Sort and tweak quick links under K8s, Juju and snaps * Some final ux improvement and a small bug fix * Fix spacing issue and highlight not appearing on account dropdown * Fix global nav item alignment * Implement global-nav 3.5.0 changes * Changes based on Hans feedback * Tweak bubble labels Fix "Sign in" hyphenation typo * Remove redundant headings ("Products") * Visual design review changes * Fix navigation padding bug * Remove second 'skip to main content' * Update with UX suggestions * Bump grid-max-width to 90rem * Fix logo alignment in primary navigation * Refactor to use event delegation * Update alignment in reduced nav * Add failsafe to prevent dropdowns being fetched multiple times * Bump global-nav version to 3.6.1 * Align logos far left * Make reduced nav not sticky * Allow dropdowns to be scrollable if viewport height is smaller than the dropdown height * Add missing links to mobile dropdowns * Align top level mobile items with logo * Add fallback for hover loading on touchscreen devices * Use variables for repeated values * Handle resize events * Close meganav on any resize event * Use grid-max-width variable * Handle resize event on secondary nav * Fix highlighted page alignment * Delete unused 'navigation-meganav-base.html file * Only closeAll on resize event if mobile-breakpoint threshold is crossed --------- Co-authored-by: Scott Mason Nash <[email protected]> Co-authored-by: Juan Ruitiña <[email protected]> * Nojs meganav (#13141) * add global nav * add tabbed content js to main js * fix global nav chevron position on reduced view * Add second view for mobile * Refactor to work with new sliding nav * Fix css issues from refactoring html structure * lint-scss * Update with design usggestions from initial ux review * Further ux review changes * Make user dropdown work wit sliding nav * Fix bug in account dropdown where clicking outside the made navigation would cause it to open * Format prettier * revert use-cases changes for demo * Increase default grid width * Implemened redesigned use-cases * Lint-scss * Further ux changes for demo purpose - global nav not working on mobile * Implement new global nav for desktop * Implement new global nav for mobile view * Changes based on code and QA * Content QA Shorten line on Products > Featured Fix capitalisation Fix consistency issues * Reposition search icon * Add content fixes Hyphenation for "enterprise-grade" Replace Cloud Native Operations Survey link Sort and tweak quick links under K8s, Juju and snaps * Some final ux improvement and a small bug fix * Fix spacing issue and highlight not appearing on account dropdown * Fix global nav item alignment * Implement global-nav 3.5.0 changes * Changes based on Hans feedback * Tweak bubble labels Fix "Sign in" hyphenation typo * Remove redundant headings ("Products") * Visual design review changes * Fix navigation padding bug * Remove second 'skip to main content' * Update with UX suggestions * Bump grid-max-width to 90rem * Fix logo alignment in primary navigation * Refactor to use event delegation * Update alignment in reduced nav * Add failsafe to prevent dropdowns being fetched multiple times * Bump global-nav version to 3.6.1 * Align logos far left * Make reduced nav not sticky * Allow dropdowns to be scrollable if viewport height is smaller than the dropdown height * Add missing links to mobile dropdowns * Align top level mobile items with logo * Add fallback for hover loading on touchscreen devices * Use variables for repeated values * Handle resize events * Close meganav on any resize event * Use grid-max-width variable * Handle resize event on secondary nav * Fix highlighted page alignment * Delete unused 'navigation-meganav-base.html file * Only closeAll on resize event if mobile-breakpoint threshold is crossed * Create basic static nojs-meganav * Apply style changes from UX mockup * Enable nojs-meganav when JS is not enabled * Apply changes from U review and make a basic mobile view mockup * Format prettier * Hide chevrons and implement fallbacks for 'menu' and 'search' * Fix search not working on nojs mobile view * Ux updates * Fix prettier errors * Lint JS * Format prettier --------- Co-authored-by: Scott Mason Nash <[email protected]> Co-authored-by: Juan Ruitiña <[email protected]> * Rebase branch * Appease linter gods * Update meganav.yaml Replace "Links" heading with "Quick links" Add new pages Incorporate feedback on CTAs * Fix links & menu padding * Revert "Fix links & menu padding" This reverts commit c262b98. * Fix links and fix menu padding (#13355) * Remove comment * Update nojs-nav links * Format-python * Update GA tracking and a location hash in the URL (#13362) * Implement GA tracking and a location hash in the URL * Appease the linter gods * Update with code&qa suggestions * Fix keyboarding trapping * Bump global nav version * Fix input, placeholder color and run prettier * Adds keyboard trapping for mobile (#13447) * Fix 'quick links' not being tabable on mobile * Add keyboard trapping for mobile * Make query for side-panel more generic * Remove console.logs * Minor bug fixes (#13467) * Minor bug fixes * Make global-nav link detection more specific * Fix linter errors * Fix alignment on bubble and remove black box on mobile (#13428) * Fix alignment within grid within bubbles & remove floating black box on mobile * Fix alignment of 'canonical' in the reduced mobile nav * Add missing requirements * Actually add missing requirements * Align navigation to grid text * Appease lint gods * Update color of side nav tabs when active * Align first nav item with text * Appease linter * Align items inside the dropdown ith page text * Fix download desktop link + add why-pro to yaml * Fix p-muted-heading alignment (#13482) * Fix p-muted-heading alignment * Account for both medium and small screens difference in padding * Include highlighted_secondary_links in mobile view * Let highlighted_secondary_links heading have top padding * Add a tad more padding to use cases headings * Lint lint lint * Change Download link to 22.04.3 * Fix secondary links bug (#13507) * Fix secondary links bug * Run linter * Fix "enterprise" typo in meganav.yaml * Add functionality to account for height differences on mobile caused by the url navigation (#13517) * Add functionality to account for height differences on mobile caused by the url navigation * Lint * Apply review suggestions * Update URLs in meganav.yaml * Add breakpoint crossover * Remove amd-xilinx.html * Remove reference to navigation-lock * Revert yarn.lock --------- Co-authored-by: Scott Mason Nash <[email protected]> Co-authored-by: minkyngkm <[email protected]> Co-authored-by: Anthony Dillon <[email protected]> Co-authored-by: Beth Collins <[email protected]> Co-authored-by: Juan Ruitiña <[email protected]> Co-authored-by: MariaPaula Trujillo <[email protected]>

Fix alignment within grid within bubbles & remove floating black box …

d4f20df

…on mobile

petesfrench added Review: QA needed Review: Code needed labels Jan 4, 2024

mtruj013 reviewed Jan 4, 2024

View reviewed changes

mtruj013 added Review: QA -1 and removed Review: QA needed labels Jan 4, 2024

petesfrench added 5 commits January 5, 2024 11:22

Fix alignment of 'canonical' in the reduced mobile nav

5d0300a

Add missing requirements

aca04da

Actually add missing requirements

e910428

Align navigation to grid text

1601854

Appease lint gods

62a124b

petesfrench added Review: QA needed and removed Review: QA -1 labels Jan 11, 2024

Update color of side nav tabs when active

62eec46

petesfrench added the Review: Design needed label Jan 12, 2024

mtruj013 approved these changes Jan 12, 2024

View reviewed changes

mtruj013 added Review: QA +1 Review: Code +1 (with changes) and removed Review: QA needed Review: Code needed labels Jan 12, 2024

petesfrench added 3 commits January 18, 2024 10:40

Align first nav item with text

dfb5535

Appease linter

d7ac612

Align items inside the dropdown ith page text

eb137d4

lyubomir-popov added Review: Design +1 and removed Review: Design needed labels Jan 18, 2024

petesfrench merged commit 53e7076 into meganav-rebase Jan 18, 2024
24 of 27 checks passed

petesfrench deleted the wd-8038 branch January 18, 2024 13:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix alignment on bubble and remove black box on mobile #13428

Fix alignment on bubble and remove black box on mobile #13428

petesfrench commented Jan 4, 2024

webteam-app commented Jan 4, 2024

codecov bot commented Jan 4, 2024 •

edited

Loading

mtruj013 left a comment

mtruj013 Jan 4, 2024

petesfrench Jan 5, 2024

mtruj013 Jan 5, 2024

juanruitina Jan 9, 2024 •

edited

Loading

petesfrench commented Jan 12, 2024

mtruj013 left a comment •

edited

Loading

lyubomir-popov commented Jan 17, 2024 •

edited

Loading

lyubomir-popov commented Jan 18, 2024

Fix alignment on bubble and remove black box on mobile #13428

Fix alignment on bubble and remove black box on mobile #13428

Conversation

petesfrench commented Jan 4, 2024

Done

QA

Issue / Card

webteam-app commented Jan 4, 2024

codecov bot commented Jan 4, 2024 • edited Loading

Codecov Report

mtruj013 left a comment

Choose a reason for hiding this comment

mtruj013 Jan 4, 2024

Choose a reason for hiding this comment

petesfrench Jan 5, 2024

Choose a reason for hiding this comment

mtruj013 Jan 5, 2024

Choose a reason for hiding this comment

juanruitina Jan 9, 2024 • edited Loading

Choose a reason for hiding this comment

petesfrench commented Jan 12, 2024

mtruj013 left a comment • edited Loading

Choose a reason for hiding this comment

lyubomir-popov commented Jan 17, 2024 • edited Loading

lyubomir-popov commented Jan 18, 2024

codecov bot commented Jan 4, 2024 •

edited

Loading

juanruitina Jan 9, 2024 •

edited

Loading

mtruj013 left a comment •

edited

Loading

lyubomir-popov commented Jan 17, 2024 •

edited

Loading