show link to view all remixes on project page

This commit is contained in:
Ben Wheeler 2019-01-03 18:50:19 -05:00
parent b9bfb007e0
commit 0ad5c977aa
4 changed files with 26 additions and 3 deletions

View file

@ -22,6 +22,7 @@
"project.remixButton.altText": "Save a copy of this project and add your own ideas.", "project.remixButton.altText": "Save a copy of this project and add your own ideas.",
"project.remixButton.remixing": "Remixing...", "project.remixButton.remixing": "Remixing...",
"project.remixes": "Remixes", "project.remixes": "Remixes",
"project.viewAllRemixes": "View all",
"project.inviteToRemix": "Invite user to remix", "project.inviteToRemix": "Invite user to remix",
"project.instructionsLabel": "Instructions", "project.instructionsLabel": "Instructions",
"project.notesAndCreditsLabel": "Notes and Credits", "project.notesAndCreditsLabel": "Notes and Credits",

View file

@ -573,7 +573,10 @@ const PreviewPresentation = ({
</FlexRow> </FlexRow>
</div> </div>
<FlexRow className="column"> <FlexRow className="column">
<RemixList remixes={remixes} /> <RemixList
projectId={projectId}
remixes={remixes}
/>
<StudioList studios={projectStudios} /> <StudioList studios={projectStudios} />
</FlexRow> </FlexRow>
</FlexRow> </FlexRow>

View file

@ -555,6 +555,12 @@ $stage-width: 480px;
.studio-list { .studio-list {
flex-direction: column; flex-direction: column;
.list-header {
display: flex;
width: 100%;
justify-content: space-between;
}
.list-title { .list-title {
margin-left: 1rem; margin-left: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
@ -562,6 +568,11 @@ $stage-width: 480px;
align-self: flex-start; align-self: flex-start;
} }
.list-header-link {
margin-right: 1rem;
align-self: center;
}
.creator-image img { .creator-image img {
max-width: 2rem; max-width: 2rem;
max-height: 2rem; max-height: 2rem;

View file

@ -10,9 +10,16 @@ const RemixList = props => {
if (remixes.length === 0) return null; if (remixes.length === 0) return null;
return ( return (
<FlexRow className="remix-list"> <FlexRow className="remix-list">
<div className="list-header">
<div className="list-title"> <div className="list-title">
<FormattedMessage id="project.remixes" /> <FormattedMessage id="project.remixes" />
</div> </div>
<div className="list-header-link">
<a href={`/projects/${props.projectId}/remixes`}>
<FormattedMessage id="project.viewAllRemixes" />
</a>
</div>
</div>
{remixes.length === 0 ? ( {remixes.length === 0 ? (
// TODO: style remix invitation // TODO: style remix invitation
<FormattedMessage id="project.inviteToRemix" /> <FormattedMessage id="project.inviteToRemix" />
@ -32,6 +39,7 @@ const RemixList = props => {
}; };
RemixList.propTypes = { RemixList.propTypes = {
projectId: PropTypes.string,
remixes: PropTypes.arrayOf(projectShape) remixes: PropTypes.arrayOf(projectShape)
}; };