[Cashtab] No scrolling of no content below fold
ClosedPublic
Actions

Authored by bytesofman on Sat, Apr 13, 04:36.

Details

Reviewers

emack

Group Reviewers

Restricted Project

Commits

rABC2cec9cac5d82: [Cashtab] No scrolling of no content below fold

Summary

Some screens fit all content above the fold. When this happens, we do not want the user to be able to scroll down and see a lot of empty space. Want to emulate a mobile app experience.

Test Plan

npm test

This diff is live at https://cashtab-local-dev.netlify.app/

Diff Detail

Repository

rABC Bitcoin ABC

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

bytesofman created this revision.Sat, Apr 13, 04:36

Herald added a reviewer: Restricted Project. · View Herald TranscriptSat, Apr 13, 04:36

bytesofman edited the summary of this revision. (Show Details)Sat, Apr 13, 04:36

Harbormaster completed remote builds in B28543: Diff 47127.Sat, Apr 13, 04:39

improved css rules

back out unrelated changes

bytesofman edited the summary of this revision. (Show Details)Sun, Apr 14, 13:30

Harbormaster completed remote builds in B28553: Diff 47142.Sun, Apr 14, 13:30

Harbormaster completed remote builds in B28554: Diff 47143.

bytesofman published this revision for review.Sun, Apr 14, 13:33

bytesofman added inline comments.

cashtab/src/components/App/styles.js
44 ↗	(On Diff #47143)	We only apply `min-height: 100vh` to one component, which wraps all the other components. This is what prevents loading the app with, say, 30px of whitespace at the bottom of the screen, if the screen is smaller than the viewport height.
46 ↗	(On Diff #47143)	a bit annoying to review here since I also organized the components within the page in this diff. main change is I added `AppPositionCss` to this component.
52 ↗	(On Diff #47143)	we standardize the position and background rules for all components in the central "column" of the cashtab.
83 ↗	(On Diff #47143)	another "main change" here -- before, we just slapped min-height: 100vh on everything. the footer, though has a constant height of 80px, and is fixed to the bottom of the screen. We want CustomApp to be 100vh, but the rest of the wallet stuff should end before the footer (otherwise we always have 80px of empty space that is behind the footer and can be scrolled).