scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-22 19:05:56 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions2

Cleanup

Browse source 
Fixing lint problems and removing (most) unused code. I left user and session as they will get used soon even though they aren’t currently.
This commit is contained in:
chrisgarrity 2018-03-15 17:40:16 -04:00
parent f836c6e3a8
commit 1c6b0dd64c
8 changed files with 325 additions and 340 deletions

4
src/components/cappednumber/cappednumber.jsx
View file

@ -10,8 +10,8 @@ const CappedNumber = props => (
);
CappedNumber.propTypes = {
value: PropTypes.number.isRequired,
className: PropTypes.string
className: PropTypes.string,
value: PropTypes.number.isRequired
};
CappedNumber.defaultProps = {

7
src/components/remixlist/remixlist.jsx
View file

@ -10,7 +10,7 @@ require('./remixlist.scss');
/*
* Container for a list of project remixes
*/
const RemixList = props => (
const RemixList = props => (
<FlexRow className={classNames('remix-list', props.className)}>
<h1>Remixes</h1>
{props.items.length === 0 ? (
@ -18,10 +18,9 @@ const RemixList = props => (
) : (
<Column
cards
className="column"
showAvatar
itemType="preview"
items={props.items.slice(0,5)}
items={props.items.slice(0, 5)}
showFavorites={false}
showLoves={false}
showViews={false}
@ -32,7 +31,7 @@ const RemixList = props => (
RemixList.propTypes = {
className: PropTypes.string,
items: PropTypes.array.isRequired
items: PropTypes.arrayOf(PropTypes.object).isRequired
};
module.exports = RemixList;

4
src/components/remixlist/remixlist.scss
View file

@ -6,7 +6,7 @@
}
.creator-image img {
max-height: 2rem;
max-width: 2rem;
max-height: 2rem;
}
}
}

2
src/components/share-banner/share-banner.scss
View file

@ -4,7 +4,7 @@ $navigation-height: 50px;
.shareBanner {
background-color: $ui-orange-25percent;
color: $ui-orange;
width: 100%;
overflow: hidden;
color: $ui-orange;
}

18
src/redux/preview.js
View file

@ -64,17 +64,17 @@ module.exports.setError = error => ({
error: error
});
module.exports.setProjectInfo = (info) => ({
module.exports.setProjectInfo = info => ({
type: 'SET_PROJECT_INFO',
info: info
});
module.exports.setCreditInfo = (info) => ({
module.exports.setCreditInfo = info => ({
type: 'SET_CREDIT',
info: info
});
module.exports.setRemixes = (items) => ({
module.exports.setRemixes = items => ({
type: 'SET_REMIXES',
items: items
});
@ -85,7 +85,7 @@ module.exports.setFetchStatus = (type, status) => ({
status: status
});
module.exports.getProjectInfo = (id) => (dispatch => {
module.exports.getProjectInfo = id => (dispatch => {
dispatch(module.exports.setFetchStatus('project', module.exports.Status.FETCHING));
api({
uri: `/projects/${id}`
@ -103,9 +103,9 @@ module.exports.getProjectInfo = (id) => (dispatch => {
dispatch(module.exports.setFetchStatus('project', module.exports.Status.FETCHED));
dispatch(module.exports.setProjectInfo(body));
});
})
});
module.exports.getCreditInfo = (id) => (dispatch => {
module.exports.getCreditInfo = id => (dispatch => {
dispatch(module.exports.setFetchStatus('credit', module.exports.Status.FETCHING));
api({
uri: `/projects/${id}`
@ -123,9 +123,9 @@ module.exports.getCreditInfo = (id) => (dispatch => {
dispatch(module.exports.setFetchStatus('credit', module.exports.Status.FETCHED));
dispatch(module.exports.setCreditInfo(body));
});
})
});
module.exports.getRemixes = (id) => (dispatch => {
module.exports.getRemixes = id => (dispatch => {
dispatch(module.exports.setFetchStatus('remixes', module.exports.Status.FETCHING));
api({
uri: `/projects/${id}/remixes?limit=5`
@ -147,4 +147,4 @@ module.exports.getRemixes = (id) => (dispatch => {
dispatch(module.exports.setFetchStatus('remixes', module.exports.Status.FETCHED));
dispatch(module.exports.setRemixes(body));
});
})
});

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

@ -1,6 +1,3 @@
const bindAll = require('lodash.bindall');
const FormattedMessage = require('react-intl').FormattedMessage;
const FormattedNumber = require('react-intl').FormattedNumber;
const FormattedDate = require('react-intl').FormattedDate;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
@ -21,75 +18,73 @@ const PreviewPresentation = props => {
intl,
projectInfo,
creditInfo,
remixes,
...otherProps
remixes
// ...otherProps TBD
} = props;
const formatMessage = intl.formatMessage;
const messages = {
'general.viewAll': formatMessage({id: 'general.viewAll'}),
};
const shareDate = (projectInfo.history && projectInfo.history.shared) ? projectInfo.history.shared : '';
return (
<div className="preview">
<ShareBanner>
<FlexRow className="previewRow">
<span className="shareText">
This project is not shared — so only you can see it.Click share to let everyone see it!
<FlexRow className="preview-row">
<span className="share-text">
This project is not shared — so only you can see it. Click share to let everyone see it!
</span>
<button className="button shareButton">
<button className="button share-button">
Share
</button>
</FlexRow>
</ShareBanner>
{ projectInfo && projectInfo.author && projectInfo.author.id && (
<div className="inner">
<FlexRow className="previewRow">
<FlexRow className="projectTitle">
<FlexRow className="preview-row">
<FlexRow className="project-title">
<Avatar
src={`https://cdn2.scratch.mit.edu/get_image/user/${projectInfo.author.id}_48x48.png`}
/>
<div className="title">
<h1>{projectInfo.title}</h1>
by{' '}
{`${intl.formatMessage({id: 'thumbnail.by'})} `}
<a href={`/users/${projectInfo.author.username}`}>
{projectInfo.author.username}
</a>
</div>
</FlexRow>
<div className="projectButtons">
<button className="button remixButton">
<div className="project-buttons">
<button className="button remix-button">
Remix
</button>
<button className="button seeInsideButton">
<button className="button see-inside-button">
See Inside
</button>
</div>
</FlexRow>
<FlexRow className="previewRow">
<FlexRow className="preview-row">
<div className="placeholder">
<img src={placeholder} alt="" />
<img src={placeholder} />
</div>
<FlexRow className="projectNotes">
<FlexRow className="project-notes">
{shareDate !== '' && (
<div className="shareDate">
<div className="share-date">
<div className="copyleft">&copy;</div>
{' '}
<FormattedDate
{/* eslint-disable react/jsx-sort-props */}
<FormattedDate
value={Date.parse(shareDate)}
year="numeric"
month="short"
day="2-digit"
month="short"
year="numeric"
/>
{/* eslint-enable react/jsx-sort-props */}
</div>
)}
{creditInfo && creditInfo.author && creditInfo.id && (
<FlexRow className="remixCredit">
<FlexRow className="remix-credit">
<Avatar
className="remix"
src={`https://cdn2.scratch.mit.edu/get_image/user/${creditInfo.author.id}_48x48.png`}
/>
<div className="creditText">
<div className="credit-text">
Thanks to <a
href={`/users/${creditInfo.author.username}`}
>
@ -102,23 +97,35 @@ const PreviewPresentation = props => {
</div>
</FlexRow>
)}
<div className="projectDescription">
<div className="project-description">
{projectInfo.description}
</div>
</FlexRow>
</FlexRow>
<FlexRow className="previewRow">
<FlexRow className="preview-row">
<FlexRow className="stats">
<div key="loves" className="project-loves">
<CappedNumber value={projectInfo.stats.loves} />
<div
className="project-loves"
key="loves"
>
{projectInfo.stats.loves}
</div>
<div key="favorites" className="project-favorites favorited">
<CappedNumber value={projectInfo.stats.favorites} />
<div
className="project-favorites favorited"
key="favorites"
>
{projectInfo.stats.favorites}
</div>
<div key="remixes" className="project-remixes">
<CappedNumber value={projectInfo.remix.count} />
<div
className="project-remixes"
key="remixes"
>
{projectInfo.remix.count}
</div>
<div key="views" className="project-views">
<div
className="project-views"
key="views"
>
<CappedNumber value={projectInfo.stats.views} />
</div>
</FlexRow>
@ -140,7 +147,7 @@ const PreviewPresentation = props => {
</a>
</FlexRow>
</FlexRow>
<FlexRow className="previewRow">
<FlexRow className="preview-row">
<div className="comments-container">
<h1>Comments go here</h1>
</div>
@ -152,9 +159,9 @@ const PreviewPresentation = props => {
</div>
);
}
};
PreviewPresentation.propTyps = {
PreviewPresentation.propTypes = {
creditInfo: PropTypes.shape({
id: PropTypes.number,
title: PropTypes.string,
@ -196,8 +203,8 @@ PreviewPresentation.propTyps = {
root: PropTypes.number
})
}),
remixes: PropTypes.array,
sessionStatus: PropTypes.string
}
remixes: PropTypes.arrayOf(PropTypes.object)
// sessionStatus: PropTypes.string //will probably need this later
};
module.exports = injectIntl(PreviewPresentation);
module.exports = injectIntl(PreviewPresentation);

66
src/views/preview/preview.jsx
View file

@ -1,22 +1,15 @@
const React = require('react');
const PropTypes = require('prop-types');
const bindAll = require('lodash.bindall');
const connect = require('react-redux').connect;
const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');
const api = require('../../lib/api');
const log = require('../../lib/log.js');
const PreviewPresentation = require('./presentation.jsx');
const sessionActions = require('../../redux/session.js');
const previewActions = require('../../redux/preview.js');
class Preview extends React.Component {
constructor (props) {
super(props);
}
componentDidMount () {
let pathname = window.location.pathname.toLowerCase();
if (pathname[pathname.length - 1] === '/') {
@ -45,13 +38,60 @@ class Preview extends React.Component {
remixes={this.props.remixes}
sessionStatus={this.props.sessionStatus}
studios={this.props.studios}
user={this.props.user}
/>
);
}
}
Preview.propTypes = {
comments: PropTypes.arrayOf(PropTypes.object),
credit: PropTypes.shape({
id: PropTypes.number,
title: PropTypes.string,
description: PropTypes.string,
author: PropTypes.shape({id: PropTypes.number}),
history: PropTypes.shape({
created: PropTypes.string,
modified: PropTypes.string,
shared: PropTypes.string
}),
stats: PropTypes.shape({
views: PropTypes.number,
loves: PropTypes.number,
favorites: PropTypes.number
}),
remix: PropTypes.shape({
parent: PropTypes.number,
root: PropTypes.number
})
}),
getCreditInfo: PropTypes.func.isRequired,
getProjectInfo: PropTypes.func.isRequired,
getRemixes: PropTypes.func.isRequired,
projectInfo: PropTypes.shape({
id: PropTypes.number,
title: PropTypes.string,
description: PropTypes.string,
author: PropTypes.shape({id: PropTypes.number}),
history: PropTypes.shape({
created: PropTypes.string,
modified: PropTypes.string,
shared: PropTypes.string
}),
stats: PropTypes.shape({
views: PropTypes.number,
loves: PropTypes.number,
favorites: PropTypes.number
}),
remix: PropTypes.shape({
parent: PropTypes.number,
root: PropTypes.number
})
}),
remixes: PropTypes.arrayOf(PropTypes.object),
sessionStatus: PropTypes.string,
studios: PropTypes.arrayOf(PropTypes.object),
user: PropTypes.shape({
id: PropTypes.number,
banned: PropTypes.bool,
@ -81,22 +121,22 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({
getCreditInfo: (id) => {
getCreditInfo: id => {
dispatch(previewActions.getCreditInfo(id));
},
getProjectInfo: (id) => {
getProjectInfo: id => {
dispatch(previewActions.getProjectInfo(id));
},
getRemixes: (id) => {
getRemixes: id => {
dispatch(previewActions.getRemixes(id));
},
refreshSession: () => {
dispatch(sessionActions.refreshSession());
},
setCreditInfo: (info) => {
setCreditInfo: info => {
dispatch(previewActions.setCreditInfo(info));
},
setProjectInfo: (info) => {
setProjectInfo: info => {
dispatch(previewActions.setProjectInfo(info));
}
});
@ -107,7 +147,7 @@ const ConnectedPreview = connect(
)(Preview);
render(
<Page><ConnectedPreview /></Page>,
<Page><ConnectedPreview /></Page>,
document.getElementById('app'),
{preview: previewActions.previewReducer}
);

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

@ -1,10 +1,13 @@
@import "../../colors";
@import "../../frameless";
html, body, #app, .gui {
html,
body,
#app,
.gui {
margin: 0;
width: 100%;
height: 100%;
margin: 0;
}
/* override view padding for share banner */
@ -21,21 +24,24 @@ html, body, #app, .gui {
font-weight: 500;
}
img.avatar {
border: 0;
border-radius: 5px;
width: 3rem;
}
img.avatar.remix {
width: 1.5rem;
margin-right: .5em
img {
&.avatar {
border: 0;
border-radius: 5px;
width: 3rem;
&.remix {
margin-right: .5em;
width: 1.5rem;
}
}
}
.title {
margin-left: 1rem;
font-size: .8rem;
text-align: left;
font-size: .8rem;
}
.button {
@ -49,215 +55,204 @@ html, body, #app, .gui {
.remix-list {
width: 35%;
}
}
.shareButton,
.remixButton,
.seeInsideButton {
font-size: .875rem;
font-weight: normal;
&:before {
.share-button,
.remix-button,
.see-inside-button {
font-size: .875rem;
font-weight: normal;
&:before {
display: inline-block;
margin-right: .5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 1.5rem;
height: 1.5rem;
vertical-align: middle;
content: "";
}
}
.shareText {
align-self: center;
}
.share-button {
background-color: $ui-orange;
&:before {
background-image: url("/svgs/favorite/favorite_type-gray.svg");
}
}
.remix-button {
background-color: $ui-green;
&:before {
background-image: url("/svgs/remix/remix_type-gray.svg");
}
}
.see-inside-button {
&:before {
background-image: url("/images/emoji/cool-cat.png");
}
}
.preview-row {
margin-top: 1rem;
justify-content: space-between;
align-items: flex-start;
}
.placeholder {
display: inline-block;
margin-right: .5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 1.5rem;
height: 1.5rem;
width: 480px;
}
.placeholder img {
width: 100%;
}
.project-notes {
width: 45%;
height: 404px;
flex-flow: column;
align-items: left;
}
.share-date {
height: 2.5rem;
vertical-align: middle;
content: "";
}
}
.shareText {
align-self: center;
}
.shareButton {
background-color: $ui-orange;
&:before {
background-image: url("/svgs/favorite/favorite_type-gray.svg");
.remix-credit {
margin-bottom: 1rem;
border: 1px solid $ui-blue-10percent;
border-radius: 8px;
background-color: $ui-blue-10percent;
padding: .5rem;
width: 100%;
flex-wrap: nowrap;
align-items: flex-start;
}
}
.remixButton {
background-color: $ui-green;
&:before {
background-image: url("/svgs/remix/remix_type-gray.svg");
.credit-text {
font-size: .875rem;
flex-shrink: 1;
}
}
.seeInsideButton {
&:before {
background-image: url("/images/emoji/cool-cat.png");
.project-description {
border: 1px solid $ui-blue-10percent;
border-radius: 8px;
background-color: $ui-blue-10percent;
padding: .5rem;
width: 100%;
white-space: pre-line;
overflow-y: scroll;
flex: 1;
}
}
.previewRow {
justify-content: space-between;
align-items: flex-start;
margin-top: 1rem;
}
.placeholder {
width: 480px;
display: inline-block;
}
.placeholder img {
width: 100%;
}
.projectNotes {
width: 45%;
height: 404px;
flex-flow: column;
align-items: left;
}
.shareDate {
height: 2.5rem;
vertical-align: middle;
}
.remixCredit {
width: 100%;
margin-bottom: 1rem;
border: 1px solid $ui-blue-10percent;
border-radius: 8px;
background-color: $ui-blue-10percent;
padding: .5rem;
align-items: flex-start;
flex-wrap: nowrap;
}
.creditText {
flex-shrink: 1;
font-size: .875rem;
}
.projectDescription {
white-space: pre-line;
flex: 1;
width: 100%;
overflow-y:scroll;
border: 1px solid $ui-blue-10percent;
border-radius: 8px;
background-color: $ui-blue-10percent;
padding: .5rem;
}
.copyleft {
display: inline-block;
text-align: right;
margin: 0px;
transform: scale(-1,1);
}
.stats {
width: 480px;
justify-content: flex-start;
}
.project-loves,
.project-favorites,
.project-remixes,
.project-views {
display: inline;
font-size: 1.25rem;
padding-right: 2rem;
&:before {
.copyleft {
display: inline-block;
margin-right: .1rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 1.5rem;
height: 1.5rem;
vertical-align: text-bottom;
content: "";
transform: scale(-1, 1);
margin: 0;
text-align: right;
}
}
.project-loves {
&:before {
background-image: url("/svgs/love/love_type-gray.svg");
.stats {
width: 480px;
justify-content: flex-start;
}
}
.project-loves.loved {
&:before {
background-image: url("/svgs/messages/love.svg");
.project-loves,
.project-favorites,
.project-remixes,
.project-views {
display: inline;
padding-right: 2rem;
font-size: 1.25rem;
&:before {
display: inline-block;
margin-right: .1rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 1.5rem;
height: 1.5rem;
vertical-align: text-bottom;
content: "";
}
}
}
.project-favorites {
&:before {
background-image: url("/svgs/favorite/favorite_type-gray.svg");
.project-loves {
&:before {
background-image: url("/svgs/love/love_type-gray.svg");
}
}
}
.project-favorites.favorited {
&:before {
background-image: url("/svgs/messages/favorite.svg");
.project-loves.loved {
&:before {
background-image: url("/svgs/messages/love.svg");
}
}
}
.project-remixes {
&:before {
background-image: url("/svgs/remix/remix_type-gray.svg");
.project-favorites {
&:before {
background-image: url("/svgs/favorite/favorite_type-gray.svg");
}
}
}
.project-views {
&:before {
background-image: url("/svgs/view/view_type-gray.svg");
.project-favorites.favorited {
&:before {
background-image: url("/svgs/messages/favorite.svg");
}
}
}
.action-buttons {
display: flex;
width: 40%;
color: $type-white;
font-size: .8rem;
font-weight: 500;
justify-content: flex-end;
flex-wrap: wrap;
.project-remixes {
&:before {
background-image: url("/svgs/remix/remix_type-gray.svg");
}
}
li {
display: inline-block;
margin: 0 5px;
border: 1px solid $ui-blue;
border-radius: 50px;
background-color: $ui-blue;
padding: .5em .75em .5em 1.5em;
text-decoration: none;
.project-views {
&:before {
background-image: url("/svgs/view/view_type-gray.svg");
}
}
.action-buttons {
display: flex;
width: 40%;
color: $type-white;
list-style-type: none;
font-size: .8rem;
font-weight: 500;
justify-content: flex-end;
flex-wrap: wrap;
&:hover {
transition: background-color .25s ease;
border-color: transparent;
background-color: $active-gray;
}
li {
display: inline-block;
margin: 0 5px;
border: 1px solid $ui-blue;
border-radius: 50px;
background-color: $ui-blue;
padding: .5em .75em .5em 1.5em;
text-decoration: none;
color: $type-white;
list-style-type: none;
&:active {
border: 0 solid transparent;
box-shadow: inset 0 0 5px $box-shadow-gray;
background-color: $active-dark-gray;
padding: calc(.75em + 1px) calc(1.5em + 1px);
}
&.report {
border: 1px solid $ui-coral;
background-color: $ui-coral;
&:hover {
transition: background-color .25s ease;
border-color: transparent;
@ -270,80 +265,24 @@ html, body, #app, .gui {
background-color: $active-dark-gray;
padding: calc(.75em + 1px) calc(1.5em + 1px);
}
&.report {
border: 1px solid $ui-coral;
background-color: $ui-coral;
&:hover {
transition: background-color .25s ease;
border-color: transparent;
background-color: $active-gray;
}
&:active {
border: 0 solid transparent;
box-shadow: inset 0 0 5px $box-shadow-gray;
background-color: $active-dark-gray;
padding: calc(.75em + 1px) calc(1.5em + 1px);
}
}
}
}
}
.preview {
.title-banner {
&.masthead {
background-color: $ui-orange-25percent;
color: $ui-orange;
font-weight: bold;
padding-bottom: 0;
h1 {
margin: 0;
color: $ui-white;
}
.masthead-info {
display: flex;
align-items: center;
justify-content: space-between;
p {
margin: 0;
max-width: $cols6;
text-align: left;
color: $ui-white;
a {
border-bottom: 1px solid $ui-white;
color: $ui-white;
}
}
}
.ted-talk {
position: relative;
margin-bottom: $gutter;
border: 2px solid $ui-border;
border-radius: 10px;
width: $cols4;
height: $cols4 * .5625;
overflow: hidden;
iframe {
border: 0;
width: inherit;
height: inherit;
}
}
.band {
$band-color: hsla(360, 100, 100, .15);
margin-top: 2rem;
background-color: $band-color;
padding: 1rem 0;
}
.sub-nav {
text-align: left;
li {
margin: 0 .5rem 0 0;
}
}
}
&.faq-banner {
margin-bottom: 0;
background-color: $ui-gray;
}
}
}