Display sponsors in categories #1466

sokra · 2017-07-31T11:08:36Z

Categories: Platin, Gold, Silber, Bronze
Logos have different sizes

skipjack

Haven't tested this out locally yet, but just mentioned some semantics and component api things I noticed. Once you have a chance to review (and make any changes) ping me and I'll test locally. I get the general idea though, seems reasonable.

skipjack · 2017-07-31T21:49:02Z

components/splash/splash.jsx

-          <h2>Sponsors</h2>
-          <Support number={ 100 } type="sponsors" />
+          <h2>Platin Sponsors</h2>
+          <Support size="platin" minimum={ 50000 } type="sponsors" />


Should this be "Platinum Sponsors"?

skipjack · 2017-07-31T21:49:21Z

components/splash/splash.jsx

+          <Support size="gold" minimum={ 10000 } maximum={ 50000 } type="sponsors" />
+
+          <h2>Silber Sponsors</h2>
+          <Support size="silber" minimum={ 2000 } maximum={ 10000 } type="sponsors" />


Should this be "Silver Sponsors"?

If the answer is yes to both of these then we should update the semantics throughout the whole PR (e.g. props, css classes, etc.).

skipjack · 2017-07-31T21:56:04Z

components/support/support-style.scss

    border-radius: 50%;
-    border: 2px solid rgb(112, 202, 10);
+    border: 1px solid rgb(112, 202, 10);


Just gauging from the screenshot, it seems some of these style changes might have caused the normal backers display to be thrown off. I'll check locally as well but is there a reason you changed the "normal" backers style? They look pretty good to me as is in Chrome.

By the way -- this is what I mean re the backer design:

There's some noticeable extra whitespace at the bottom of each backer that makes things look a bit off.

The screenshot is on 50% browser zoom. On 100% it's looks normal.

I reduced the size of the backers by 50% to match the size of the bronze sponsors.

👍 I'll just double check this locally then when testing to make sure everything looks ok.

skipjack · 2017-07-31T21:59:20Z

components/support/support.jsx

@@ -4,25 +4,34 @@ import './support-style';

 export default class Support extends React.Component {
  render() {
-    let { number, type } = this.props;
+    let { minimum, maximum, size, type } = this.props;


I might rename the size prop to level or rank or something similar. "Size" sounds more like count to display or image size to me than their rank based on donation amount. Also, maybe instead of minimum and maximum being props along with level, we could have that data within the component file so only level needs to be passed.

skipjack · 2017-07-31T22:00:07Z

components/support/support.jsx

    return (
      <div className="support">
        {
-          supporters.slice(0, number).map((supporter, index) => (


Just want to make sure this is intentional -- we don't want to limit the backers or supporters displayed at all?

Yep it was intentional.

skipjack · 2017-07-31T22:06:35Z

It seems the build error was a 404'd backer image... not sure if that was just a temporary outage or caused by these changes. I restarted the build to see if it's reproducible.

Platinum, Gold, Silver, Bronze Logos have different sizes Size of Backer logos reduced

sokra · 2017-08-01T09:00:24Z

Updated version: (now in 100% browser zoom)

sokra · 2017-08-01T09:10:46Z

CI seem to be correct with some URLs being broken:

Adam Howard
https://d1ts43dypk8bqh.cloudfront.net/v1/avatars/5e2529e2-ca5e-495c-8e2f-facb62961cdc 404

Dana Woodman
https://opencollective-production.s3-us-west-1.amazonaws.com/danawoodmancom_7bada460-bd8b-11e6-9ca1-bb6c7a9a84e0.png 200 but length = 0

That's the data we receive from opencollective API. cc @xdamman

skipjack · 2017-08-01T22:31:52Z

That's the data we receive from opencollective API.

Yeah just weird it's only being thrown on this PR -- ah I guess because more backers are now being shown.

skipjack · 2017-08-02T02:44:11Z

Test locally, looks good. Working on the build failures, it looks like the change in class name might have thrown off our scripts/check-links.js ignore pattern.

xdamman · 2017-08-02T11:06:14Z

Love this!

Yeah some backers don't always provide a valid avatar :-/
Not sure what we can do about it. Ideas welcome.

The only thing that I'd add to this is an explanation of what makes a platinum/gold/silver sponsor. One of the thing you can do is to redirect the button become a sponsor to a custom URL e.g. https://opencollective.com/webpack/donate/500/month/silver%20sponsor

See also our new buttons on https://opencollective.com/widgets

skipjack · 2017-08-03T10:48:16Z

Yeah some backers don't always provide a valid avatar :-/ Not sure what we can do about it. Ideas welcome.

Yeah not sure there's much you can do. I updated our link testing to ignore them which should be fine for now.

The only thing that I'd add to this is an explanation of what makes a platinum/gold/silver sponsor.

Yes I agree, I think a small description under each section is probably warranted. @sokra we can probably just add a description field to each object in the rank data in support.jsx and display those dynamically.

One of the thing you can do is to redirect the button become a sponsor to a custom URL

Awesome, thanks!

@xdamman

This is a follow up to #1466 based on @xdamman's suggestion. It adds a short description above the avatars to describe the rank and contributions.

@xdamman

This is a follow up to #1466 based on @xdamman's suggestion. It adds a short description above the avatars to describe the rank and contributions.

sokra requested review from skipjack and TheLarkInn July 31, 2017 11:08

skipjack added Enhancement UI/UX labels Jul 31, 2017

skipjack requested changes Jul 31, 2017

View reviewed changes

Display sponsors in categories

070c315

Platinum, Gold, Silver, Bronze Logos have different sizes Size of Backer logos reduced

sokra force-pushed the feature/sponsor-categories branch from 0ef4689 to 070c315 Compare August 1, 2017 07:40

skipjack approved these changes Aug 2, 2017

View reviewed changes

skipjack added 2 commits August 1, 2017 23:04

refactor(tests): ignore all support.jsx element urls

7005fdf

refactor(tests): add missing semicolon

e5774b2

skipjack merged commit 6cdeed0 into master Aug 2, 2017

skipjack deleted the feature/sponsor-categories branch August 2, 2017 03:55

skipjack added a commit that referenced this pull request Aug 6, 2017

feat(support): add descriptions to sponsor and backer sections

a58b7da

This is a follow up to #1466 based on @xdamman's suggestion. It adds a short description above the avatars to describe the rank and contributions.

skipjack mentioned this pull request Aug 6, 2017

Update Index Page #1492

Merged

skipjack added a commit that referenced this pull request Aug 7, 2017

feat(support): add descriptions to sponsor and backer sections

043cb4f

This is a follow up to #1466 based on @xdamman's suggestion. It adds a short description above the avatars to describe the rank and contributions.

Uh oh!

Display sponsors in categories #1466

Display sponsors in categories #1466

Uh oh!

Conversation

sokra commented Jul 31, 2017

Uh oh!

skipjack left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skipjack Aug 1, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skipjack commented Jul 31, 2017

Uh oh!

sokra commented Aug 1, 2017

Uh oh!

sokra commented Aug 1, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skipjack commented Aug 1, 2017

Uh oh!

skipjack commented Aug 2, 2017

Uh oh!

xdamman commented Aug 2, 2017

Uh oh!

skipjack commented Aug 3, 2017

Uh oh!

Uh oh!

skipjack Aug 1, 2017 •

edited

Loading

sokra commented Aug 1, 2017 •

edited

Loading