Meganav-rebase #12939

petesfrench · 2023-06-07T17:48:55Z

Done

Final PR for the new meganav release

QA

Check that the appearance, functionality and content are the same in this demo as they are in the original demo
Check the code diffs and see that that no new changes have been introduced (unless they are fixes)

Issue / Card

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

webteam-app · 2023-06-07T17:48:58Z

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

codecov · 2023-06-07T19:35:51Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (2c02325) 74.41% compared to head (78f8dd5) 74.41%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #12939   +/-   ##
=======================================
  Coverage   74.41%   74.41%           
=======================================
  Files         107      107           
  Lines        2838     2838           
  Branches      946      946           
=======================================
  Hits         2112     2112           
  Misses        702      702           
  Partials       24       24

petesfrench · 2023-06-15T14:54:11Z

@ClementChaumel can you take a look at this please?

petesfrench · 2023-07-06T14:13:03Z

#13020 these changes to be applied to this PR

petesfrench · 2023-07-12T07:13:58Z

@carkod Did you say you would take a look at this?

carkod · 2023-07-12T08:33:38Z

I think you have some conflicts, and maybe @juanruitina wants to take a look?

I'll need some time to review it all.

build.js

meganav.yaml

static/js/src/main.js

static/js/src/navigation.js

static/sass/_pattern_navigation-dropdown.scss

static/sass/styles.scss

petesfrench · 2023-07-19T11:14:08Z

@carkod thanks for the review, but at this point most of these changes aren't relevant anymore. As most of this is updated in slide-nav PR. The QA needed here is to ensure nothing was lost during the rebase and that everything is in the same state as it was before the rebase.

* 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 <sowasred2012@gmail.com> Co-authored-by: Juan Ruitiña <juan.ruitina@canonical.com>

Replace "Links" heading with "Quick links" Add new pages Incorporate feedback on CTAs

This reverts commit c262b98.

* Remove comment * Update nojs-nav links * Format-python

* Implement GA tracking and a location hash in the URL * Appease the linter gods * Update with code&qa suggestions

* 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 * Make global-nav link detection more specific * Fix linter errors

* 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 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

* Fix secondary links bug * Run linter

…by the url navigation (#13517) * Add functionality to account for height differences on mobile caused by the url navigation * Lint * Apply review suggestions

This reverts commit 0f45fa1.

petesfrench changed the base branch from meganav to main June 7, 2023 17:49

petesfrench force-pushed the meganav-rebase branch from 01166a2 to 9334bab Compare June 7, 2023 19:02

petesfrench added Review: QA needed Review: Code needed labels Jun 7, 2023

mtruj013 assigned ClementChaumel Jun 8, 2023

petesfrench added the Don't merge label Jun 15, 2023

petesfrench mentioned this pull request Jul 6, 2023

Meganav 2 #12898

Closed

mtruj013 mentioned this pull request Jul 6, 2023

Update lxd link in meganav #13020

Merged

petesfrench assigned carkod Jul 12, 2023

carkod reviewed Jul 12, 2023

View reviewed changes

build.js Show resolved Hide resolved

petesfrench force-pushed the meganav-rebase branch from 2655bc9 to 85abbe7 Compare July 18, 2023 11:15