Page MenuHomePhabricator

[Cashtab] Fixate header
ClosedPublic

Authored by emack on Jan 25 2024, 03:26.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Commits
rABC8c05d635fa04: [Cashtab] Fixate header
Summary

As per feedback from D15188, this diff fixates the header in order to better facilitate tx history pagination in D15188.

Test Plan

npm test
npm start
click on a few txs to expand their contains and take up extra vertical space, scroll up and down and ensure the header and footers are fixed
npm run build, or load d15277.netlify.app on ios and android mobile devices and ensure header is fixed while scrolling history
npm run extension and ensure the same fixed header behavior

Diff Detail

Repository
rABC Bitcoin ABC
Branch
fixateHeader
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 26644
Build 52856: Build Diffcashtab-tests
Build 52855: arc lint + arc unit

Event Timeline

Changed header position from fixed to sticky

emack published this revision for review.Jan 25 2024, 07:42
emack added a reviewer: bytesofman.
cashtab/src/components/App.js
185–199

do we really need all of these props?

z-index:2 -> why?
height: 180px -> how does this behave when there is an API error in fiat price? Right now this reduces the height of BalanceHeader
border-top -> cashtab does not have this currently, why the addition?

cashtab/src/components/App.js
185–199

z-index:2 -> so it's on the same layer as the tx history and footer, otherwise the tx history will scroll in front of the header

image.png (251×576 px, 37 KB)

height: 180px -> you're right, having this height does not reduce the overall header on fiat price error

image.png (471×575 px, 57 KB)

Hence I've removed it and it now dynamically reduces the balance height on api error
image.png (215×600 px, 30 KB)

border-top -> yup this can go, removed.

Retested on mobile and extension, all good. (d15277.netlify.app also updated)

Removed redundant css props

no version bump

cashtab/src/assets/styles/theme.js
10 ↗(On Diff #44601)

if this is the same as footerBackground, do not add a new key

change footerBackground to headerAndFooterBg and use that

This revision now requires changes to proceed.Jan 26 2024, 12:11

Version bump and head/footer bg css merge

This revision is now accepted and ready to land.Jan 26 2024, 14:14
This revision was automatically updated to reflect the committed changes.