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

Added placeholder headshot to Person component #1119

Merged
merged 2 commits into from Feb 28, 2018
Merged

Added placeholder headshot to Person component #1119

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d4e8394
Related #1114 - added placeholder headshot
mmmavis Feb 28, 2018
31b30a4
fixed a typo
mmmavis Feb 28, 2018
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
Binary file added source/images/fellowships/headshot/placeholder.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions source/js/components/loading-indicator/loading-indicator.jsx
View file
Open in desktop
@@ -1,9 +1,9 @@
import React from 'react';

export default () => {
return <div class="loading-indicator d-inline-block">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
return <div className="loading-indicator d-inline-block">
<div className="dot"></div>
<div className="dot"></div>
<div className="dot"></div>
</div>;
};
29 changes: 28 additions & 1 deletion source/js/components/people/person.jsx
View file
Open in desktop
@@ -1,8 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';

export default class Person extends React.Component {
class Person extends React.Component {
constructor(props) {
super(props);

// setting default value for props.metata.image here
// because PropTypes.defaultProps does not support setting default value
// for object properties
if (!props.metadata.image) {
this.props.metadata.image = `/_images/fellowships/headshot/placeholder.jpg`;
}
}

render() {
Expand Down Expand Up @@ -137,3 +145,22 @@ export default class Person extends React.Component {
}
}
}

Person.propTypes = {
metadata: PropTypes.shape({
name: PropTypes.string,
location: PropTypes.string,
role: PropTypes.string,
bio: PropTypes.string,
quote: PropTypes.string,
featured: PropTypes.bool,
affiliations: PropTypes.array,
'internet_health_issues': PropTypes.array,
image: PropTypes.string,
'partnership_logo': PropTypes.string,
link: PropTypes.object,
'custom_link': PropTypes.object,
}).isRequired,
};

export default Person;
4 changes: 2 additions & 2 deletions source/js/fellowships.js
View file
Open in desktop
Expand Up @@ -94,7 +94,7 @@ function renderFellowsOnDirectoryPage() {
};

// show loading indicator
ReactDOM.render(<div class="mx-auto my-5 text-center"><LoadingIndicator /></div>, CONTAINER);
ReactDOM.render(<div className="mx-auto my-5 text-center"><LoadingIndicator /></div>, CONTAINER);

// get fellow info from Pulse
getFellows(DIRECOTRY_PAGE_FILTER_OPTIONS, fellows => {
Expand Down Expand Up @@ -138,7 +138,7 @@ function renderFellowsOnDirectoryByTypePage() {
const CONTAINER = document.getElementById(`fellows-directory-fellows-by-type`);

// show loading indicator
ReactDOM.render(<div class="mx-auto my-5 text-center"><LoadingIndicator /></div>, CONTAINER);
ReactDOM.render(<div className="mx-auto my-5 text-center"><LoadingIndicator /></div>, CONTAINER);

// get fellow info from Pulse
getFellows({'program_type': `${CONTAINER.dataset.type} fellow`}, fellows => {
Expand Down