scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

center align grid while left aligning projects

Browse source 
Fixes #573
This commit is contained in:
Matthew Taylor 2016-06-15 09:34:15 -04:00
parent 55765551ae
commit 2193914650
2 changed files with 55 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/components/grid/grid.jsx
View file

@ -25,40 +25,40 @@ var Grid = React.createClass({
);
return (
<div className={classes}>
<FlexRow>
{this.props.items.map(function (item) {
var href = '/' + this.props.itemType + '/' + item.id + '/';
<FlexRow>
{this.props.items.map(function (item) {
var href = '/' + this.props.itemType + '/' + item.id + '/';
if (this.props.itemType == 'projects') {
return (
<Thumbnail key={item.id}
showLoves={this.props.showLoves}
showFavorites={this.props.showFavorites}
showRemixes={this.props.showRemixes}
showViews={this.props.showViews}
type={'project'}
href={href}
title={item.title}
src={item.image}
creator={item.creator}
loves={item.stats.loves}
favorites={item.stats.favorites}
remixes={item.stats.remixes}
views={item.stats.views} />
);
}
else {
return (
<Thumbnail key={item.id}
type={'gallery'}
href={href}
title={item.title}
src={item.image}
owner={item.owner} />
);
}
}.bind(this))}
</FlexRow>
if (this.props.itemType == 'projects') {
return (
<Thumbnail key={item.id}
showLoves={this.props.showLoves}
showFavorites={this.props.showFavorites}
showRemixes={this.props.showRemixes}
showViews={this.props.showViews}
type={'project'}
href={href}
title={item.title}
src={item.image}
creator={item.creator}
loves={item.stats.loves}
favorites={item.stats.favorites}
remixes={item.stats.remixes}
views={item.stats.views} />
);
}
else {
return (
<Thumbnail key={item.id}
type={'gallery'}
href={href}
title={item.title}
src={item.image}
owner={item.owner} />
);
}
}.bind(this))}
</FlexRow>
</div>
);
}

29
src/components/grid/grid.scss
View file

@ -2,16 +2,25 @@
.grid {
display: inline-block;
padding: 12px;
justify-content: space-around;
align-items: center;
width: 100%;
$project-width: 200px;
$project-height: 150px;
$gallery-width: 200px;
$gallery-height: 118px;
.flex-row {
margin: 0 auto;
padding: 12px;
width: (96px + (4 * $project-width)) / $em;
justify-content: flex-start;
}
.thumbnail {
padding: 12px;
&.project {
$project-width: 200px;
$project-height: 150px;
width: $project-width;
img {
@ -21,8 +30,6 @@
}
&.gallery {
$gallery-width: 200px;
$gallery-height: 118px;
width: $gallery-width;
img {
@ -40,4 +47,12 @@
@media only screen and (max-width: $tablet - 1) {
flex-direction: column;
}
@media only screen and (max-width: $desktop - 1) {
.flex-row {
padding: 12px 0;
width: 100%;
justify-content: space-around;
}
}
}