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

move card styling to grid.scss, use card as default grid style

Browse source
This commit is contained in:
Technoboy10 2016-08-22 11:21:08 -06:00
parent 6394d3e8cf
commit f27e99f1a4
5 changed files with 76 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,7 +12,6 @@ var Grid = React.createClass({
return { return {
items: require('./grid.json'), items: require('./grid.json'),
itemType: 'projects', itemType: 'projects',
cards: false,
showLoves: false, showLoves: false,
showFavorites: false, showFavorites: false,
showRemixes: false, showRemixes: false,
@ -34,7 +33,6 @@ var Grid = React.createClass({
if (this.props.itemType == 'projects') { if (this.props.itemType == 'projects') {
return ( return (
<Thumbnail key={item.id} <Thumbnail key={item.id}
cards={this.props.cards}
showLoves={this.props.showLoves} showLoves={this.props.showLoves}
showFavorites={this.props.showFavorites} showFavorites={this.props.showFavorites}
showRemixes={this.props.showRemixes} showRemixes={this.props.showRemixes}
@ -56,7 +54,6 @@ var Grid = React.createClass({
else { else {
return ( return (
<Thumbnail key={item.id} <Thumbnail key={item.id}
cards={this.props.cards}
type={'gallery'} type={'gallery'}
href={href} href={href}
title={item.title} title={item.title}

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

@ -5,8 +5,8 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
$project-width: 200px; $project-width: 220px;
$project-height: 150px; $project-height: 208px;
$gallery-width: 200px; $gallery-width: 200px;
$gallery-height: 118px; $gallery-height: 118px;
@ -14,58 +14,81 @@
.flex-row { .flex-row {
margin: 0 auto; margin: 0 auto;
padding: 12px; padding: 12px;
width: (96px + (4 * $project-width)) / $em; width: $cols12;
justify-content: flex-start; justify-content: space-between; }
}
.thumbnail { .thumbnail {
padding: 12px; padding: 0;
&:not(.cards) { &.project {
&.project { margin-bottom: 16px;
width: $project-width; border-radius: 4px;
box-shadow: 0 0 3px $box-shadow-gray;
img { background-color: $ui-white;
width: $project-width; width: $project-width;
height: $project-height; height: $project-height;
}
} .thumbnail-image {
margin: 8px auto;
&.gallery { width: 204px;
width: $gallery-width; height: 152px;
img {
width: $gallery-width;
height: $gallery-height;
}
}
}
&.cards {
&.project {
box-shadow: 0 0 3px $box-shadow-gray;
background-color: $ui-white;
width: 220px;
height: 208px;
img { img {
margin: 0 auto;
border: 0;
border-radius: 4px;
width: 204px; width: 204px;
height: 152px; height: 152px;
} }
} }
}
&.gallery { &.gallery {
box-shadow: 0 0 3px $box-shadow-gray; margin-bottom: 16px;
background-color: $ui-white; border-radius: 4px;
width: 220px; box-shadow: 0 0 3px $box-shadow-gray;
height: 164px; background-color: $ui-white;
width: $project-width;
height: 164px;
.thumbnail-image {
margin: 8px auto;
width: 204px;
height: 120px;
img { img {
border: 0;
border-radius: 4px;
width: 204px; width: 204px;
height: 120px; height: 120px;
} }
} }
} }
.thumbnail-info {
margin: 0 auto;
width: 204px;
.creator-image {
float: left;
img {
margin-right: 8px;
border-radius: 4px;
width: 32px;
height: 32px;
}
}
.thumbnail-title {
float: left;
max-width: 164px;
.thumbnail-creator a {
color: $type-gray;
}
}
}
} }
&.column { &.column {
@ -73,15 +96,24 @@
justify-content: center; justify-content: center;
} }
@media only screen and (max-width: $tablet - 1) { //4 columns
flex-direction: column; @media only screen and (max-width: $mobile - 1) {
.flex-row {
width: $cols4;
}
} }
@media only screen and (max-width: $desktop - 1) { //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.flex-row { .flex-row {
padding: 12px 0; width: $cols6;
width: 100%; }
justify-content: space-around; }
// 8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
.flex-row {
width: $cols9;
} }
} }
} }

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

@ -21,7 +21,6 @@ var Thumbnail = React.createClass({
showViews: false, showViews: false,
showAvatar: false, showAvatar: false,
linkTitle: true, linkTitle: true,
cards: false,
alt: '' alt: ''
}; };
}, },
@ -29,8 +28,7 @@ var Thumbnail = React.createClass({
var classes = classNames( var classes = classNames(
'thumbnail', 'thumbnail',
this.props.type, this.props.type,
this.props.className, this.props.className
{'cards': this.props.cards}
); );
var extra = []; var extra = [];
var info = []; var info = [];

95
src/views/explore/explore.scss
View file

@ -40,12 +40,6 @@ $base-bg: $ui-white;
width: 8.75rem; width: 8.75rem;
} }
.tab-background {
box-shadow: 0 0 1px $box-shadow-gray;
background-color: $ui-white;
width: 100%;
}
.tabs { .tabs {
width: 58.75rem; width: 58.75rem;
} }
@ -117,84 +111,11 @@ $base-bg: $ui-white;
padding-bottom: 32px; padding-bottom: 32px;
width: 100%; width: 100%;
.grid .flex-row {
width: $cols12;
justify-content: space-between;
}
.button { .button {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
} }
.thumbnail {
$project-width: 220px;
$project-height: 208px;
padding: 0;
&.project {
margin-bottom: 16px;
border-radius: 4px;
width: $project-width;
height: $project-height;
.thumbnail-image {
margin: 8px auto;
width: 204px;
height: 152px;
img {
border: 0;
border-radius: 4px;
}
}
}
&.gallery {
margin-bottom: 16px;
border-radius: 4px;
width: $project-width;
height: $project-height;
.thumbnail-image {
margin: 8px auto;
width: 204px;
height: 120px;
img {
border: 0;
border-radius: 4px;
}
}
}
.thumbnail-info {
margin: 0 auto;
width: 204px;
.creator-image {
float: left;
img {
margin-right: 8px;
border-radius: 4px;
width: 32px;
height: 32px;
}
}
.thumbnail-title {
float: left;
max-width: 164px;
.thumbnail-creator a {
color: $type-gray;
}
}
}
}
} }
//4 columns //4 columns
@ -207,14 +128,6 @@ $base-bg: $ui-white;
.sort-controls { .sort-controls {
width: $cols4; width: $cols4;
} }
#projectBox {
.grid {
.flex-row {
width: $cols4;
}
}
}
} }
} }
@ -228,14 +141,6 @@ $base-bg: $ui-white;
.sort-controls { .sort-controls {
width: $cols6; width: $cols6;
} }
#projectBox {
.grid {
.flex-row {
width: $cols6;
}
}
}
} }
} }

97
src/views/search/search.scss
View file

@ -128,84 +128,11 @@ $base-bg: $ui-white;
padding-bottom: 32px; padding-bottom: 32px;
width: 100%; width: 100%;
.grid .flex-row {
width: $cols12;
justify-content: space-between;
}
.button { .button {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
} }
.thumbnail {
$project-width: 220px;
$project-height: 208px;
padding: 0;
&.project {
margin-bottom: 16px;
border-radius: 4px;
width: $project-width;
height: $project-height;
.thumbnail-image {
margin: 8px auto;
width: 204px;
height: 152px;
img {
border: 0;
border-radius: 4px;
}
}
}
&.gallery {
margin-bottom: 16px;
border-radius: 4px;
width: $project-width;
height: $project-height;
.thumbnail-image {
margin: 8px auto;
width: 204px;
height: 120px;
img {
border: 0;
border-radius: 4px;
}
}
}
.thumbnail-info {
margin: 0 auto;
width: 204px;
.creator-image {
float: left;
img {
margin-right: 8px;
border-radius: 4px;
width: 32px;
height: 32px;
}
}
.thumbnail-title {
float: left;
max-width: 164px;
.thumbnail-creator a {
color: $type-gray;
}
}
}
}
} }
//4 columns //4 columns
@ -226,14 +153,6 @@ $base-bg: $ui-white;
.sort-controls { .sort-controls {
width: $cols4; width: $cols4;
} }
#projectBox {
.grid {
.flex-row {
width: $cols4;
}
}
}
} }
} }
@ -248,14 +167,6 @@ $base-bg: $ui-white;
.sort-controls { .sort-controls {
width: $cols6; width: $cols6;
} }
#projectBox {
.grid {
.flex-row {
width: $cols6;
}
}
}
} }
} }
@ -269,13 +180,5 @@ $base-bg: $ui-white;
.sort-controls { .sort-controls {
width: $cols8; width: $cols8;
} }
#projectBox {
.grid {
.flex-row {
width: $cols9;
}
}
}
} }
} }