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

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

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

@ -5,8 +5,8 @@
display: inline-block;
width: 100%;
$project-width: 200px;
$project-height: 150px;
$project-width: 220px;
$project-height: 208px;
$gallery-width: 200px;
$gallery-height: 118px;
@ -14,58 +14,81 @@
.flex-row {
margin: 0 auto;
padding: 12px;
width: (96px + (4 * $project-width)) / $em;
justify-content: flex-start;
}
width: $cols12;
justify-content: space-between; }
.thumbnail {
padding: 12px;
padding: 0;
&:not(.cards) {
&.project {
width: $project-width;
img {
width: $project-width;
height: $project-height;
}
}
&.gallery {
width: $gallery-width;
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;
&.project {
margin-bottom: 16px;
border-radius: 4px;
box-shadow: 0 0 3px $box-shadow-gray;
background-color: $ui-white;
width: $project-width;
height: $project-height;
.thumbnail-image {
margin: 8px auto;
width: 204px;
height: 152px;
img {
margin: 0 auto;
border: 0;
border-radius: 4px;
width: 204px;
height: 152px;
}
}
}
&.gallery {
box-shadow: 0 0 3px $box-shadow-gray;
background-color: $ui-white;
width: 220px;
height: 164px;
&.gallery {
margin-bottom: 16px;
border-radius: 4px;
box-shadow: 0 0 3px $box-shadow-gray;
background-color: $ui-white;
width: $project-width;
height: 164px;
.thumbnail-image {
margin: 8px auto;
width: 204px;
height: 120px;
img {
border: 0;
border-radius: 4px;
width: 204px;
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 {
@ -73,15 +96,24 @@
justify-content: center;
}
@media only screen and (max-width: $tablet - 1) {
flex-direction: column;
//4 columns
@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 {
padding: 12px 0;
width: 100%;
justify-content: space-around;
width: $cols6;
}
}
// 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,
showAvatar: false,
linkTitle: true,
cards: false,
alt: ''
};
},
@ -29,8 +28,7 @@ var Thumbnail = React.createClass({
var classes = classNames(
'thumbnail',
this.props.type,
this.props.className,
{'cards': this.props.cards}
this.props.className
);
var extra = [];
var info = [];

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

@ -40,12 +40,6 @@ $base-bg: $ui-white;
width: 8.75rem;
}
.tab-background {
box-shadow: 0 0 1px $box-shadow-gray;
background-color: $ui-white;
width: 100%;
}
.tabs {
width: 58.75rem;
}
@ -117,84 +111,11 @@ $base-bg: $ui-white;
padding-bottom: 32px;
width: 100%;
.grid .flex-row {
width: $cols12;
justify-content: space-between;
}
.button {
display: block;
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
@ -207,14 +128,6 @@ $base-bg: $ui-white;
.sort-controls {
width: $cols4;
}
#projectBox {
.grid {
.flex-row {
width: $cols4;
}
}
}
}
}
@ -228,14 +141,6 @@ $base-bg: $ui-white;
.sort-controls {
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;
width: 100%;
.grid .flex-row {
width: $cols12;
justify-content: space-between;
}
.button {
display: block;
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
@ -226,14 +153,6 @@ $base-bg: $ui-white;
.sort-controls {
width: $cols4;
}
#projectBox {
.grid {
.flex-row {
width: $cols4;
}
}
}
}
}
@ -248,14 +167,6 @@ $base-bg: $ui-white;
.sort-controls {
width: $cols6;
}
#projectBox {
.grid {
.flex-row {
width: $cols6;
}
}
}
}
}
@ -269,13 +180,5 @@ $base-bg: $ui-white;
.sort-controls {
width: $cols8;
}
#projectBox {
.grid {
.flex-row {
width: $cols9;
}
}
}
}
}