Details

Reviewers

Group Reviewers

Restricted Project

Commits

rABC7eb1425ecd53: [Cashtab] Minify and pin wallet header on scroll

Summary

T2207

Show a minified version of the wallet header when user scrolls down. Include CSS improvements for alignment of items in header.

Test Plan

npm test, npm start and test scroll behavior and appearance.

npm run extension and ok there too

This diff is live at https://cashtab-local-dev.netlify.app for testing on mobile

Diff Detail

Repository

rABC Bitcoin ABC

Branch

cashtab-fix-header

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 28486
Build 56513: Build Diff	cashtab-tests
Build 56512: arc lint + arc unit

Event Timeline

bytesofman created this revision.Apr 11 2024, 13:29

Herald added a reviewer: Restricted Project. · View Herald TranscriptApr 11 2024, 13:29

Harbormaster completed remote builds in B28484: Diff 47043.Apr 11 2024, 13:32

backing out some changes, optimizing minified menu for mobile

Harbormaster completed remote builds in B28486: Diff 47045.Apr 11 2024, 14:12

get balance to align right if it flex wraps while minified

bytesofman published this revision for review.Apr 11 2024, 14:15

Harbormaster completed remote builds in B28487: Diff 47046.Apr 11 2024, 14:17

bytesofman edited the test plan for this revision. (Show Details)Apr 11 2024, 14:36

Tested fine on desktop and extension, but on mobile it's got some cray cray clipping happening on the onboarding screen

you can test it via d15947.netlify.app

This revision now requires changes to proceed.Apr 12 2024, 00:12

In D15947#360852, @emack wrote:

Tested fine on desktop and extension, but on mobile it's got some cray cray clipping happening on the onboarding screen

you can test it via d15947.netlify.app

dang, was seeing this on desktop as well before implementing overflow-anchor: none; -- mb not supported on mobile, or needs to be extended for more support. will take a look.

I can fix the content jumping without using the anchor rule. Needs some more thought. Might be better to just render a different component entirely instead of trying to css shim existing BalanceHeader (plus WalletLabel and associated wrappers).

Components need to be better organized to do this right.

better organization for styled components in App.js, better flex css for minified header, resolve content jump infinite css loop without use of anchor css rule

Harbormaster completed remote builds in B28522: Diff 47101.Apr 12 2024, 16:44

improve alignment

comment explaining scrolly value

Harbormaster completed remote builds in B28523: Diff 47102.Apr 12 2024, 16:55

Harbormaster completed remote builds in B28524: Diff 47103.

bytesofman edited the test plan for this revision. (Show Details)Apr 12 2024, 16:57

add transition effect, improve width rules, minor version bump

remove debug log

Harbormaster completed remote builds in B28531: Diff 47113.Apr 12 2024, 21:49

Harbormaster completed remote builds in B28532: Diff 47114.

add ellipsis overflow to wallet dropdown menu when whole name cannot be rendered

Harbormaster completed remote builds in B28533: Diff 47115.Apr 12 2024, 21:58