Nojs meganav #13141
Merged
Nojs meganav #13141
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…n would cause it to open
Shorten line on Products > Featured Fix capitalisation Fix consistency issues
Hyphenation for "enterprise-grade" Replace Cloud Native Operations Survey link Sort and tweak quick links under K8s, Juju and snaps
petesfrench
force-pushed
the
nojs-meganav
branch
from
870a8f1
to
df89712
Compare
|
@juanruitina Do you want to take another look or can I go ahead and merge? |
|
This works well UX-wise, I'd like to further test it with the latest version of the meganav so feel free to merge to the feature branch, yes. |
petesfrench
added a commit
that referenced
this pull request
Nov 10, 2023
* 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>
petesfrench
added a commit
that referenced
this pull request
Feb 1, 2024
* 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>
petesfrench
added a commit
that referenced
this pull request
Feb 6, 2024
* 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>
petesfrench
added a commit
that referenced
this pull request
Feb 6, 2024
* 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 <peterfrench94@gmail.com> * More typos Co-authored-by: Peter French <peterfrench94@gmail.com> * 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 <sowasred2012@gmail.com> Co-authored-by: Juan Ruitiña <juan.ruitina@canonical.com> * 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 <sowasred2012@gmail.com> Co-authored-by: Juan Ruitiña <juan.ruitina@canonical.com> * 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 <sowasred2012@gmail.com> Co-authored-by: minkyngkm <min.kim@canonical.com> Co-authored-by: Anthony Dillon <me@anthonydillon.com> Co-authored-by: Beth Collins <bethcollinsliv92@gmail.com> Co-authored-by: Juan Ruitiña <juan.ruitina@canonical.com> Co-authored-by: MariaPaula Trujillo <mtruj013@fiu.edu>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
https://ubuntu-com-13141.demos.haus/navigation
Done
QA
./run serveordotrunIssue / Card
Fixes #
Screenshots
[If relevant, please include a screenshot.]
Help
QA steps - Commit guidelines