Don't vertically clip creator header images in tip UI #484

cg505 · 2019-05-29T22:39:47Z

Changes

See brave/brave-browser#2015. The banner image for the tip interface now scales height dynamically.

Also resolves #483 and #488.

Test plan

With header image

Launch with --rewards=staging=false.
Visit brave.com and make sure browser width is at least 1500px or so.
Open rewards box. If it says "Not yet verified" click "Check again...".
Click "SEND A TIP..." button.
The header image should say "Brave the new internet. Fast, safe, secure, corageous." Make sure this image is not vertically clipped.
Try again at a small browser width (~1000px). It should work as before.

Without header image

Visit any site without a verified publisher and make sure browser width is at least 1500px or so.
Open rewards box and click "SEND A TIP..." button.
The header should look normal and should be 176px tall.

Link / storybook path to visual changes

https://brave-ui-6cuwjq0t3.now.sh?path=/story/feature-components-rewards-concepts-desktop--site-banner (toggle "Show bg image" knob)

Integration

Does this contain changes to src/components or src/
- Will you publish to npm immediately after this PR, or wait until sometime in the future?
- Incompatible API change to something existing (major version increase)
- Adding new backwards-compatible functionality? (minor version increase)
- Fixing a bug backwards-compatibly? (patch version increase)
Does this contain changes to src/features for brave-core?
- Are there non backwards-compatible changes required for brave-core? Do not merge until brave-core PR is approvable. Link to brave-core PR:
- Will you create brave-core PR to update to this commit after it is merged?
- Wants uplift to brave-core feature branch?
  - When uplift-approved, merge to brave-core-0.VV.x feature branch
  - Create additional brave-core PRs for each feature branch to update commit

stories/features/rewards/concepts.tsx

src/features/rewards/siteBanner/index.tsx

ryanml

Overall things are looking good, but can you add either a knob or a demonstration in to the storybook concept for siteBanner so we can see how it looks between images of varying heights? You can just make a toggle knob like shortBgImage/tallBgImage even :)

cg505 · 2019-05-30T16:04:04Z

@ryanml Actually all the banner images are the same aspect ratio, so the existing knobs are sufficient. The only thing to check is the different widths.

dlipeles · 2019-05-30T16:31:57Z

all the banner images are the same aspect ratio, so the existing knobs are sufficient. The only thing to check is the different widths.

I can attest to this, we store all of our images server side at 2700 x 528 👍

That said, things could change in the future, might not hurt to create more knobs just for testing purposes.

NejcZdovc · 2019-05-30T16:40:30Z

One thing that we need to keep is height of the image to be fixed, otherwise height will be too big and small screens will have problems. So what we need to achieve is, with height that we have defined, how to best fit it in there.

cg505 · 2019-05-30T16:54:45Z

@NejcZdovc Since the aspect ratio is so wide (900 by 176) you will have to have a really wide and really short screen for it to be a problem (like 2 or 3x as wide as tall). If we're worried about it, we could either cap the width of the image or vertically center it past a certain point. Not sure what the best approach would be in that case.

cg505 · 2019-05-30T17:45:40Z

The dialog box height is capped at 700px. We can add a max-height to the banner image so that everything should fit even if your screen is super wide.

cg505 · 2019-05-30T18:38:22Z

Pushed a change to cap the height of the banner image at 350px. This will avoid creating a scrollbar even on really wide screens. Looks like this:

This change doesn't affect the screenshots in the OP.

Do we want to handle this case some other way as well (like max-width or vertical centering)?

See brave/brave-ui#484.

dlipeles · 2019-06-03T16:13:49Z

Is there anyway we can handle these images in a way that doesn't clip, especially important if the image contains text @NejcZdovc @cg505

cg505 · 2019-06-03T16:18:00Z

@dlipeles When the screen is really wide, we could somehow restrict the width of the banner image, but I'm not sure exactly how that will work. (What should be the background color? Should we restrict the width of the entire dialog?)

dlipeles · 2019-06-03T16:23:09Z

I think setting a max-width on the entire banner might be a good idea, I will defer to @NejcZdovc

src/features/rewards/siteBanner/style.ts

cg505 · 2019-06-03T18:42:04Z

Enforced a maximum width in the brave/brave-core#2566 so that the maximum height is no longer needed.

petemill · 2019-06-03T19:00:55Z

src/features/rewards/walletSummary/spec.tsx

@@ -25,9 +25,16 @@ describe('WalletSummary tests', () => {

  describe('basic tests', () => {
    it('matches the snapshot', () => {
+      const RealDate = Date
+      global.Date = class extends RealDate {
+        constructor () {


See brave/brave-ui#484.

This component is no longer used in mobile. Resolves #483.

This fixes vertical clipping of the header image when the browser is very wide. See brave/brave-browser#2015.

See brave/brave-ui#484.

petemill

Graceful solve. Nice cleanup too!

See brave/brave-ui#484.

cg505 added the rewards label May 29, 2019

cg505 changed the title ~~Site banner height~~ Don't vertically clip creator header images in tip UI May 29, 2019

cg505 marked this pull request as ready for review May 30, 2019 00:32

cg505 requested review from NejcZdovc and ryanml and removed request for NejcZdovc May 30, 2019 00:32

NejcZdovc reviewed May 30, 2019

View reviewed changes

stories/features/rewards/concepts.tsx Show resolved Hide resolved

ryanml reviewed May 30, 2019

View reviewed changes

src/features/rewards/siteBanner/index.tsx Outdated Show resolved Hide resolved

ryanml reviewed May 30, 2019

View reviewed changes

cg505 force-pushed the site-banner-height branch from 5011793 to e3ea148 Compare May 30, 2019 18:36

cg505 added a commit to cg505/brave-core that referenced this pull request May 30, 2019

update brave-ui for site banner image fix

8043a41

See brave/brave-ui#484.

cg505 mentioned this pull request May 31, 2019

update brave-ui for tip site banner image fix brave/brave-core#2566

Merged

29 tasks

petemill reviewed Jun 3, 2019

View reviewed changes

src/features/rewards/siteBanner/style.ts Outdated Show resolved Hide resolved

petemill assigned cg505 Jun 3, 2019

cg505 force-pushed the site-banner-height branch from e3ea148 to 455524d Compare June 3, 2019 18:36

petemill reviewed Jun 3, 2019

View reviewed changes

cg505 added a commit to brave/brave-core that referenced this pull request Jun 3, 2019

update brave-ui for site banner image fix

f0ea60f

See brave/brave-ui#484.

ryanml self-requested a review June 4, 2019 16:26

ryanml requested a review from petemill June 4, 2019 16:50

cg505 requested a review from NejcZdovc June 4, 2019 18:31

cg505 force-pushed the site-banner-height branch from 455524d to 47148ed Compare June 18, 2019 20:10

cg505 force-pushed the site-banner-height branch from 47148ed to f5304fe Compare June 19, 2019 00:11

cg505 added a commit to brave/brave-core that referenced this pull request Jun 19, 2019

update brave-ui for site banner image fix

f9adb1f

See brave/brave-ui#484.

cg505 added 3 commits June 28, 2019 17:30

remove isMobile for rewards siteBanner

2baf1c1

This component is no longer used in mobile. Resolves #483.

fix walletSummary spec to use a constant date

f3ccc52

scale height of creator custom header image in siteBanner

8052f76

This fixes vertical clipping of the header image when the browser is very wide. See brave/brave-browser#2015.

cg505 added a commit to brave/brave-core that referenced this pull request Jun 29, 2019

update brave-ui for site banner image fix

dcb2cb2

See brave/brave-ui#484.

cg505 force-pushed the site-banner-height branch from f5304fe to 8052f76 Compare June 29, 2019 00:32

petemill approved these changes Jul 1, 2019

View reviewed changes

cg505 merged commit 0220a24 into master Jul 1, 2019

cg505 added a commit to brave/brave-core that referenced this pull request Jul 1, 2019

update brave-ui for site banner image fix

5e1813e

See brave/brave-ui#484.

petemill deleted the site-banner-height branch July 1, 2019 17:31

cg505 mentioned this pull request Jul 10, 2019

Snapshot for walletSummary needs updated every month #488

Closed

LaurenWags mentioned this pull request Sep 6, 2019

Scale cover image height on tipping banner brave/brave-browser#2015

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Don't vertically clip creator header images in tip UI #484

Don't vertically clip creator header images in tip UI #484

cg505 commented May 29, 2019 •

edited

Loading

ryanml left a comment

cg505 commented May 30, 2019

dlipeles commented May 30, 2019

NejcZdovc commented May 30, 2019

cg505 commented May 30, 2019 •

edited

Loading

cg505 commented May 30, 2019

cg505 commented May 30, 2019 •

edited

Loading

dlipeles commented Jun 3, 2019 •

edited

Loading

cg505 commented Jun 3, 2019

dlipeles commented Jun 3, 2019

cg505 commented Jun 3, 2019

petemill Jun 3, 2019

petemill left a comment

Don't vertically clip creator header images in tip UI #484

Don't vertically clip creator header images in tip UI #484

Conversation

cg505 commented May 29, 2019 • edited Loading

Changes

Test plan

With header image

Without header image

Link / storybook path to visual changes

Integration

ryanml left a comment

Choose a reason for hiding this comment

cg505 commented May 30, 2019

dlipeles commented May 30, 2019

NejcZdovc commented May 30, 2019

cg505 commented May 30, 2019 • edited Loading

cg505 commented May 30, 2019

cg505 commented May 30, 2019 • edited Loading

dlipeles commented Jun 3, 2019 • edited Loading

cg505 commented Jun 3, 2019

dlipeles commented Jun 3, 2019

cg505 commented Jun 3, 2019

petemill Jun 3, 2019

Choose a reason for hiding this comment

petemill left a comment

Choose a reason for hiding this comment

cg505 commented May 29, 2019 •

edited

Loading

cg505 commented May 30, 2019 •

edited

Loading

cg505 commented May 30, 2019 •

edited

Loading

dlipeles commented Jun 3, 2019 •

edited

Loading