scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 17:45:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #4477 from LLK/people-grid-component

Browse source 
Pull out the credit page's grid of people into a separate component
This commit is contained in:
Sarah Otts 2020-10-13 11:26:24 -04:00 committed by GitHub
commit 7323ef06bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 84 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/components/people-grid/people-grid.jsx Normal file
View file

@ -0,0 +1,46 @@
const PropTypes = require('prop-types');
const React = require('react');
const Avatar = require('../../components/avatar/avatar.jsx');
require('./people-grid.scss');
const PeopleGrid = props => (
<ul className="avatar-grid">
{props.people.map((person, index) => (
<li
className="avatar-item"
key={`person-${index}`}
>
<div>
{person.userName ? (
<a href={`https://scratch.mit.edu/users/${person.userName}/`}>
<Avatar
alt=""
src={`https://cdn.scratch.mit.edu/get_image/user/${person.userId || 'default'}_80x80.png`}
/>
</a>
) : (
/* if userName is not given, there's no chance userId is given */
<Avatar
alt=""
src={`https://cdn.scratch.mit.edu/get_image/user/default_80x80.png`}
/>
)}
</div>
<span className="avatar-text">
{person.name}
</span>
</li>
))}
</ul>
);
PeopleGrid.propTypes = {
people: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string,
userId: PropTypes.number,
userName: PropTypes.string
}))
};
module.exports = PeopleGrid;

36
src/components/people-grid/people-grid.scss Normal file
View file

@ -0,0 +1,36 @@
@import "../../colors";
@import "../../frameless";
.avatar-grid {
display: flex;
margin: 0 auto;
max-width: 864px;
list-style: none;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: center;
}
.avatar-item {
display: inline-block;
margin: 0;
padding-bottom: 32px;
text-align: center;
line-height: 1.25rem;
img {
$img-border: rgba(0, 0, 0, .05);
border: 2px solid $img-border;
border-radius: 8px;
background-color: $ui-white;
width: 80px;
height: 80px;
}
.avatar-text {
display: inline-block;
width: 144px;
font-size: .875rem;
word-wrap: break-word;
}
}

31
src/views/credits/credits.jsx
View file

@ -2,9 +2,9 @@ const React = require('react');
const render = require('../../lib/render.jsx');
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const Avatar = require('../../components/avatar/avatar.jsx');
const Page = require('../../components/page/www/page.jsx');
const People = require('./people.json');
const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
const Supporters = require('./supporters.json');
const TitleBanner = require('../../components/title-banner/title-banner.jsx');
@ -25,34 +25,7 @@ const Credits = () => (
<FormattedMessage id="credits.developers" />
</p>
</div>
<ul className="avatar-grid">
{People.map((person, index) => (
<li
className="avatar-item"
key={`person-${index}`}
>
<div>
{person.userName ? (
<a href={`https://scratch.mit.edu/users/${person.userName}/`}>
<Avatar
alt=""
src={`https://cdn.scratch.mit.edu/get_image/user/${person.userId || 'default'}_80x80.png`}
/>
</a>
) : (
/* if userName is not given, there's no chance userId is given */
<Avatar
alt=""
src={`https://cdn.scratch.mit.edu/get_image/user/default_80x80.png`}
/>
)}
</div>
<span className="avatar-text">
{person.name}
</span>
</li>
))}
</ul>
<PeopleGrid people={People} />
</div>
<div
className="supporters"

36
src/views/credits/credits.scss
View file

@ -6,46 +6,10 @@
}
.credits {
.avatar-grid {
display: flex;
margin: 0 auto;
padding: 64px 0;
max-width: 864px;
list-style: none;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: center;
}
.content {
padding-top: 40px;
}
.avatar-item {
display: inline-block;
margin: 0;
padding-bottom: 32px;
text-align: center;
line-height: 1.25rem;
img {
$img-border: rgba(0, 0, 0, .05);
border: 2px solid $img-border;
border-radius: 8px;
background-color: $ui-white;
width: 80px;
height: 80px;
}
.avatar-text {
display: inline-block;
width: 144px;
font-size: .875rem;
word-wrap: break-word;
}
}
.acknowledge-content {
margin: 0 176px;
padding: 2.5rem 0 5.75rem 0;