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 GA tracking and a location hash in the URL #13362

Merged
merged 3 commits into from
Nov 30, 2023

Conversation

petesfrench
Copy link
Contributor

@petesfrench petesfrench commented Nov 22, 2023

Done

  • Updates the ids the GA events attach to
  • Add a hash in the url (ubuntu.com/#products) depending on where in the navigation you are. This only applies to top level items.

QA

  • Check out this feature branch
  • 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-7400

Copy link

codecov bot commented Nov 22, 2023

Codecov Report

Merging #13362 (1eb3968) into meganav-rebase (a80daa9) will not change coverage.
Report is 1 commits behind head on meganav-rebase.
The diff coverage is n/a.

Additional details and impacted files
@@               Coverage Diff               @@
##           meganav-rebase   #13362   +/-   ##
===============================================
  Coverage           74.30%   74.30%           
===============================================
  Files                 107      107           
  Lines                2868     2868           
  Branches              976      976           
===============================================
  Hits                 2131     2131           
  Misses                713      713           
  Partials               24       24           

@petesfrench petesfrench changed the title Implement GA tracking and a location hash in the URL Update GA tracking and a location hash in the URL Nov 29, 2023
@carkod
Copy link
Contributor

carkod commented Nov 29, 2023

Demo https://ubuntu-com-13362.demos.haus/. I wonder why your PRs don't generate demos automatically

@@ -115,6 +115,22 @@ function handleDropdownClick(clickedDropdown) {
setTabindex(clickedDropdown.querySelector("ul.p-navigation__dropdown"));
}

function updateUrlHash(id, open) {
if (id !== null && id !== undefined && open) {
Copy link
Contributor

@carkod carkod Nov 29, 2023

Choose a reason for hiding this comment

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

Does it not work with ?

if (id && open) {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I did this as I wanted to allow the url hash to be the other falsey values, but I don't think it is actually needed. So will go with your way.

Copy link
Contributor

@carkod carkod left a comment

Choose a reason for hiding this comment

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

LGTM.

@petesfrench petesfrench merged commit 5e150ae into meganav-rebase Nov 30, 2023
22 of 28 checks passed
@petesfrench petesfrench deleted the meganav-ga-events branch November 30, 2023 07:08
petesfrench added a commit that referenced this pull request Feb 1, 2024
* Implement GA tracking and a location hash in the URL

* Appease the linter gods

* Update with code&qa suggestions
petesfrench added a commit that referenced this pull request Feb 6, 2024
* Implement GA tracking and a location hash in the URL

* Appease the linter gods

* Update with code&qa suggestions
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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants