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

Merge pull request #2596 from benjiwheeler/hotfix/view-all-remixes

Browse source 
[Master] Show link to view all remixes on project page
This commit is contained in:
Benjamin Wheeler 2019-01-04 11:47:47 -05:00 committed by GitHub
commit ad0da48eeb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 53 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/views/preview/l10n.json
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.viewAllInList": "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",

10
src/views/preview/presentation.jsx
View file

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

22
src/views/preview/preview.scss
View file

@ -554,12 +554,33 @@ $stage-width: 480px;
.remix-list, .remix-list,
.studio-list { .studio-list {
flex-direction: column; flex-direction: column;
width: 14.625rem;
.list-header {
display: flex;
width: 100%;
justify-content: space-between;
}
.list-header-spacer {
flex: 1 0 1px;
}
.list-title { .list-title {
margin-left: 1rem; margin-left: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
align-self: flex-start; align-self: flex-start;
line-height: 110%;
text-align: left;
}
.list-header-link {
margin-right: 1rem;
align-self: flex-end;
font-size: .75rem;
line-height: 110%;
text-align: right;
} }
.creator-image img { .creator-image img {
@ -585,6 +606,7 @@ $stage-width: 480px;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
margin-top: 1rem; margin-top: 1rem;
width: 100%;
} }
} }
} }

13
src/views/preview/remix-list.jsx
View file

@ -10,8 +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-title"> <div className="list-header">
<FormattedMessage id="project.remixes" /> <div className="list-title">
<FormattedMessage id="project.remixes" />
</div>
<div className="list-header-spacer" />
<div className="list-header-link">
<a href={`/projects/${props.projectId}/remixes`}>
<FormattedMessage id="project.viewAllInList" />
</a>
</div>
</div> </div>
{remixes.length === 0 ? ( {remixes.length === 0 ? (
// TODO: style remix invitation // TODO: style remix invitation
@ -32,6 +40,7 @@ const RemixList = props => {
}; };
RemixList.propTypes = { RemixList.propTypes = {
projectId: PropTypes.string,
remixes: PropTypes.arrayOf(projectShape) remixes: PropTypes.arrayOf(projectShape)
}; };

13
src/views/preview/studio-list.jsx
View file

@ -10,8 +10,16 @@ const StudioList = props => {
if (studios.length === 0) return null; if (studios.length === 0) return null;
return ( return (
<FlexRow className="studio-list"> <FlexRow className="studio-list">
<div className="list-title"> <div className="list-header">
<FormattedMessage id="general.studios" /> <div className="list-title">
<FormattedMessage id="general.studios" />
</div>
<div className="list-header-spacer" />
<div className="list-header-link">
<a href={`/projects/${props.projectId}/studios`}>
<FormattedMessage id="project.viewAllInList" />
</a>
</div>
</div> </div>
{studios.length === 0 ? ( {studios.length === 0 ? (
// TODO: style remix invitation // TODO: style remix invitation
@ -32,6 +40,7 @@ const StudioList = props => {
}; };
StudioList.propTypes = { StudioList.propTypes = {
projectId: PropTypes.string,
studios: PropTypes.arrayOf(projectShape) studios: PropTypes.arrayOf(projectShape)
}; };