Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(website): minor CSS improvements to logos #10410

Merged
merged 4 commits into from Oct 19, 2020
Merged

chore(website): minor CSS improvements to logos #10410

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a9ca6e
Removes the sponsor logos and minor CSS improvements to logos
orta Aug 15, 2020
0d3f7cc
Remove the backers reference
orta Aug 15, 2020
3b877be
Remove the sponsors stuff
orta Oct 2, 2020
623c4bb
Add the orthers class
orta Oct 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
101 changes: 15 additions & 86 deletions website/pages/en/index.js
View file
Open in desktop
Expand Up @@ -36,90 +36,6 @@ Button.defaultProps = {
target: '_self',
};

const Sponsor = ({
fromAccount: {name, slug, website, imageUrl},
totalDonations,
}) => (
<a
key={slug}
className="sponsor-item"
title={`$${totalDonations.value} by ${name || slug}`}
target="_blank"
rel="nofollow noopener"
href={website || `https://opencollective.com/${slug}`}
>
{
<img
className="sponsor-avatar"
src={imageUrl}
alt={name || slug ? `${name || slug}'s avatar` : 'avatar'}
/>
}
</a>
);

const Backer = ({
fromAccount: {name, slug, website, imageUrl},
totalDonations,
}) => (
<a
key={slug}
className="backer-item"
title={`$${totalDonations.value} by ${name || slug}`}
target="_blank"
rel="nofollow noopener"
href={website || `https://opencollective.com/${slug}`}
>
{
<img
className="backer-avatar"
src={imageUrl}
alt={name || slug ? `${name || slug}'s avatar` : 'avatar'}
/>
}
</a>
);

class Contributors extends React.Component {
render() {
return (
<div className="opencollective">
<h3>
<translate>Sponsors</translate>
</h3>
<p>
<translate>
Sponsors are those who contribute $100 or more per month to Jest
</translate>
</p>
<div>
{backers
.filter(b => b.tier && b.tier.slug === 'sponsor')
.map(Sponsor)}
</div>
<h3>
<translate>Backers</translate>
</h3>
<p>
<translate>
Backers are those who contribute $2 or more per month to Jest
</translate>
</p>
<div>
{backers
.filter(
b =>
b.tier &&
b.tier.slug === 'backer' &&
!b.fromAccount.slug.includes('adult')
)
.map(Backer)}
</div>
</div>
);
}
}

class Card extends React.Component {
render() {
const {index} = this.props;
Expand Down Expand Up @@ -265,6 +181,13 @@ const HeroInteractive = ({config: {repoUrl}, language}) => (

class Index extends React.Component {
render() {
const sponsorCount = backers.filter(
b => b.tier && b.tier.slug === 'sponsor'
).length;

const backerCount = backers.filter(b => b.tier && b.tier.slug === 'backer')
.length;

const showcase = siteConfig.users.map((user, i) => (
<a href={user.infoLink} key={i}>
<img src={user.image} title={user.caption} />
Expand Down Expand Up @@ -531,7 +454,13 @@ class Index extends React.Component {
non-Facebook contributors.
</translate>
</MarkdownBlock>
<Contributors />
<MarkdownBlock>
<translate>
We have over 50 Sponsors who contribute $100 or more per
month, and over 450 Backers who have contributed $2 or
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this was the intention?

Suggested change
We have over 50 Sponsors who contribute $100 or more per
month, and over 450 Backers who have contributed $2 or
We have over {sponsorCount} Sponsors who contribute $100 or more per
month, and over {backerCount} Backers who have contributed $2 or

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't get this working when I tried, probably should drop those counts - will give it one more shot

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it doesn't handle interpolation, maybe I can wrap it into two

Screen Shot 2020-08-15 at 10 05 42 AM

more to Jest.
</translate>
</MarkdownBlock>
</div>
<div className="blockContent yellow">
<h2>
Expand All @@ -549,7 +478,7 @@ class Index extends React.Component {
</MarkdownBlock>
<div className="gridBlock logos">
{showcase}
<p>And many others</p>
<p className="others">And many others</p>
</div>
</div>
</div>
Expand Down
8 changes: 6 additions & 2 deletions website/static/css/jest.css
View file
Open in desktop
Expand Up @@ -152,8 +152,12 @@
padding-top: 10px;
}

.logos {
align-items: center;
.logos > a {
margin-left: 0;
}

.logos > p.others {
padding-top: 1.5rem !important;
}

@media only screen and (min-width: 736px) {
Expand Down