wp-calypso icon indicating copy to clipboard operation
wp-calypso copied to clipboard

A4A: Marketplace|Products - Make product slider sticky on scroll

Open gogdzl opened this issue 9 months ago • 7 comments

Related to https://github.com/Automattic/automattic-for-agencies-dev/issues/451

Proposed Changes

  • This PR moves the bundle size selection slider to the page header, as requested in https://github.com/Automattic/automattic-for-agencies-dev/issues/451. The header's position remains unchanged, as it's already sticky, the slider also respects this behavior.

  • When the screen size is not big enough to accommodate the slider within the header, it is moved down and remains sticky.

Testing Instructions

  • Navigate to the products section of the Marketplace (http://agencies.localhost:3000/marketplace/products)
  • Verify that the slider is positioned according to https://github.com/Automattic/automattic-for-agencies-dev/issues/451
  • Verify that the slider is sticky
  • Shrink down the page
  • Verify that the slider always respects borders and does not overflow
  • Verify that both sliders are in sync and always show the same bundle size

image

image

image

Pre-merge Checklist

  • [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
  • [ ] Have you written new tests for your changes?
  • [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • [ ] Have you checked for TypeScript, React or other console errors?
  • [ ] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

gogdzl avatar May 10 '24 07:05 gogdzl