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

Add functionality to account for height differences on mobile caused by the url navigation #13517

Merged
merged 3 commits into from
Jan 31, 2024
Merged

Add functionality to account for height differences on mobile caused by the url navigation #13517

merged 3 commits into from
Jan 31, 2024

Conversation

petesfrench
Copy link
Contributor

Done

  • adds functionality that calculate the view port size taking into account the size of the url bar
  • fly by fix on links that also contained buttons not working

QA

  • Test that all links are visible on mobile view, these are the places it was reported:

-- on iOS it stops on Industrial, so that Robotics and Telco are left invisible below. You can hold and scroll down to expose both Robotics and Telco, but as soon as you release your finger they will hide again.
-- on Android it stops on Robotics and there is no way to see Telco that is hidden below. Holding and scrolling down doesn't do anything.
This is a bug that doesn't allow to click on items that are overflown.

  • go to get ubuntu > desktop and check the top link works it clicked as does the download button

Issue / Card

Fixes the comment here

@webteam-app
Copy link

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

akbarkz
akbarkz approved these changes Jan 31, 2024
View reviewed changes
static/js/src/navigation.js Outdated
) {
window.location.href = target.href;
if (target.tagName == "A" || target.firstChild.tagName == "A") {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
if (target.tagName == "A" || target.firstChild.tagName == "A") {
if (target.tagName === "A" || target.firstChild.tagName === "A") {

@codecov Codecov
Copy link

codecov bot commented Jan 31, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (7267b72) 74.28% compared to head (fb33b1c) 74.28%.

Additional details and impacted files 
@@               Coverage Diff               @@
##           meganav-rebase   #13517   +/-   ##
===============================================
  Coverage           74.28%   74.28%           
===============================================
  Files                 107      107           
  Lines                2866     2866           
  Branches              974      974           
===============================================
  Hits                 2129     2129           
  Misses                713      713           
  Partials               24       24

@petesfrench petesfrench merged commit dc71673 into meganav-rebase Jan 31, 2024
24 of 27 checks passed
@petesfrench petesfrench deleted the mobile-view-fix branch January 31, 2024 12:53
petesfrench added a commit that referenced this pull request Feb 1, 2024
@petesfrench
Add functionality to account for height differences on mobile caused …
613de27 
…by the url navigation (#13517)

* Add functionality to account for height differences on mobile caused by the url navigation

* Lint

* Apply review suggestions
petesfrench added a commit that referenced this pull request Feb 6, 2024
@petesfrench
Add functionality to account for height differences on mobile caused …
529f0b6 
…by the url navigation (#13517)

* Add functionality to account for height differences on mobile caused by the url navigation

* Lint

* Apply review suggestions
petesfrench added a commit that referenced this pull request Feb 6, 2024
@petesfrench @sowasred2012
@minkyngkm @anthonydillon @bethcollins92 @juanruitina @mtruj013
Meganav-rebase (#12939)
0f45fa1 
* 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
Reviewers

@akbarkz akbarkz akbarkz approved these changes

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

Successfully merging this pull request may close these issues.

None yet
3 participants
@petesfrench @webteam-app @akbarkz