search

conversionxl / aybolit

Lightweight web components library built with LitElement.
https://conversionxl.github.io/aybolit/
MIT License
7 stars 8 forks source link

feat(cxl-ui): [cxl-marketing-nav] add scroll indicator for large menus #277

Open anoblet opened 1 year ago

anoblet commented 1 year ago

Clickup: https://app.clickup.com/t/861mkj72q

Previous PR: https://github.com/conversionxl/aybolit/pull/274

github-actions[bot] commented 1 year ago

size-limit report 📦

Path Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js 33.73 KB (+0.44% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js 11.87 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js 24.9 KB (0%)
packages/cxl-ui/pkg/dist-web/vendor.js 125.6 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js 197.26 KB (+0.08% 🔺)
anoblet commented 1 year ago

@pawelkmpt Updated

pawelkmpt commented 1 year ago

@pawelkmpt Updated

Looks better. Can we make it clickable like horizontal menu cues are?

Screenshot 2023-05-11 at 10 10 11

anoblet commented 1 year ago

@pawelkmpt Updated

pawelkmpt commented 1 year ago

I tested and when I get to the end of the list cue disappears in weird way making scrollbar smaller. It makes an impression of all elements jumping.

https://www.loom.com/share/bf9c27ac14e540e7b0d75bfb7aa3d80f

Can we do sth about it?

lkraav commented 1 year ago

Another "Should this even be done" discussion https://app.clickup.com/t/861mkj72q?comment=90040011549686

anoblet commented 1 year ago

@pawelkmpt I wasn't sure if it was more confusing to keep the scroll indicator once the user reached the bottom or not. I've updated this PR to keep the scroll indicator.

pawelkmpt commented 1 year ago

@pawelkmpt I wasn't sure if it was more confusing to keep the scroll indicator once the user reached the bottom or not. I've updated this PR to keep the scroll indicator.

@anoblet I tested and it still has weird feeling because it's permanently visible there and clickable even if there's no more items at the and.

Ideally it should:

I'd try to achieve it with ::before ::after pieces and/or something absolutely positioned to avoid any padding/margin issues.

Is it doable with components setup we have?