mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
commit changes
This commit is contained in:
Technoboy10
parent
f714f8711e
commit
f883ecfbae
6 changed files with 105 additions and 48 deletions
|
|
@ -11,6 +11,7 @@ $background-color: hsla(0, 0, 99, 1); //#FDFDFD
|
|||
/* UI Secondary Colors */
|
||||
$ui-aqua: hsla(170, 70, 50, 1); //#26D9BB
|
||||
$ui-purple: hsla(265, 55, 55, 1); //#824DCB
|
||||
$ui-yellow: hsla(45, 100, 50, 1); //#FFBF00
|
||||
$ui-white: #fff;
|
||||
|
||||
$ui-border: hsla(0, 0, 85, 1); //#D9D9D9
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ var Grid = React.createClass({
|
|||
return {
|
||||
items: require('./grid.json'),
|
||||
itemType: 'projects',
|
||||
explore: false,
|
||||
showLoves: false,
|
||||
showFavorites: false,
|
||||
showRemixes: false,
|
||||
|
|
@ -32,6 +33,7 @@ var Grid = React.createClass({
|
|||
if (this.props.itemType == 'projects') {
|
||||
return (
|
||||
<Thumbnail key={item.id}
|
||||
explore={this.props.explore}
|
||||
showLoves={this.props.showLoves}
|
||||
showFavorites={this.props.showFavorites}
|
||||
showRemixes={this.props.showRemixes}
|
||||
|
|
@ -50,6 +52,7 @@ var Grid = React.createClass({
|
|||
else {
|
||||
return (
|
||||
<Thumbnail key={item.id}
|
||||
explore={this.props.explore}
|
||||
type={'gallery'}
|
||||
href={href}
|
||||
title={item.title}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "../../frameless";
|
||||
@import "../../colors";
|
||||
|
||||
.grid {
|
||||
display: inline-block;
|
||||
|
|
@ -20,21 +21,37 @@
|
|||
.thumbnail {
|
||||
padding: 12px;
|
||||
|
||||
&.project {
|
||||
width: $project-width;
|
||||
|
||||
img {
|
||||
&:not(.explore) {
|
||||
&.project {
|
||||
width: $project-width;
|
||||
height: $project-height;
|
||||
|
||||
img {
|
||||
width: $project-width;
|
||||
height: $project-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.gallery {
|
||||
width: $gallery-width;
|
||||
|
||||
img {
|
||||
width: $gallery-width;
|
||||
height: $gallery-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.gallery {
|
||||
width: $gallery-width;
|
||||
&.explore {
|
||||
&.project {
|
||||
box-shadow: 0 0 3px $box-shadow-gray;
|
||||
background-color: $ui-white;
|
||||
width: 220px;
|
||||
height: 208px;
|
||||
|
||||
img {
|
||||
width: $gallery-width;
|
||||
height: $gallery-height;
|
||||
img {
|
||||
width: 204px;
|
||||
height: 152px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ var Thumbnail = React.createClass({
|
|||
showRemixes: false,
|
||||
showViews: false,
|
||||
linkTitle: true,
|
||||
explore: false,
|
||||
alt: ''
|
||||
};
|
||||
},
|
||||
|
|
@ -27,7 +28,8 @@ var Thumbnail = React.createClass({
|
|||
var classes = classNames(
|
||||
'thumbnail',
|
||||
this.props.type,
|
||||
this.props.className
|
||||
this.props.className,
|
||||
{'explore': this.props.explore}
|
||||
);
|
||||
var extra = [];
|
||||
if (this.props.creator) {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ var render = require('../../lib/render.jsx');
|
|||
var api = require('../../lib/api');
|
||||
|
||||
var Page = require('../../components/page/www/page.jsx');
|
||||
var Box = require('../../components/box/box.jsx');
|
||||
var Tabs = require('../../components/tabs/tabs.jsx');
|
||||
var TitleBanner = require('../../components/title-banner/title-banner.jsx');
|
||||
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
||||
var Grid = require('../../components/grid/grid.jsx');
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ var Explore = injectIntl(React.createClass({
|
|||
},
|
||||
getExploreMore: function () {
|
||||
var qText = '&q=' + this.props.acceptableTabs[this.props.category] || '*';
|
||||
|
||||
|
||||
api({
|
||||
uri: '/search/' + this.props.itemType +
|
||||
'?limit=' + this.props.loadNumber +
|
||||
|
|
@ -116,34 +116,38 @@ var Explore = injectIntl(React.createClass({
|
|||
return (
|
||||
<div>
|
||||
<div className='outer'>
|
||||
<Box title={formatMessage({id: 'general.explore'})}>
|
||||
<SubNavigation className='categories'>
|
||||
{this.getBubble('all')}
|
||||
{this.getBubble('animations')}
|
||||
{this.getBubble('art')}
|
||||
{this.getBubble('games')}
|
||||
{this.getBubble('music')}
|
||||
{this.getBubble('stories')}
|
||||
</SubNavigation>
|
||||
<Tabs>
|
||||
{this.getTab('projects')}
|
||||
{this.getTab('studios')}
|
||||
</Tabs>
|
||||
<div id='projectBox' key='projectBox'>
|
||||
<Grid items={this.state.loaded}
|
||||
itemType={this.props.itemType}
|
||||
showLoves={false}
|
||||
showFavorites={false}
|
||||
showViews={false} />
|
||||
<SubNavigation className='load'>
|
||||
<button onClick={this.getExploreMore}>
|
||||
<li>
|
||||
<FormattedMessage id='general.loadMore' />
|
||||
</li>
|
||||
</button>
|
||||
</SubNavigation>
|
||||
<TitleBanner className="masthead">
|
||||
<div className="inner">
|
||||
<h1>Explore</h1>
|
||||
</div>
|
||||
</Box>
|
||||
</TitleBanner>
|
||||
<Tabs>
|
||||
{this.getTab('projects')}
|
||||
{this.getTab('studios')}
|
||||
</Tabs>
|
||||
<SubNavigation className='categories'>
|
||||
{this.getBubble('all')}
|
||||
{this.getBubble('animations')}
|
||||
{this.getBubble('art')}
|
||||
{this.getBubble('games')}
|
||||
{this.getBubble('music')}
|
||||
{this.getBubble('stories')}
|
||||
</SubNavigation>
|
||||
<div id='projectBox' key='projectBox'>
|
||||
<Grid items={this.state.loaded}
|
||||
itemType={this.props.itemType}
|
||||
explore={true}
|
||||
showLoves={false}
|
||||
showFavorites={false}
|
||||
showViews={false} />
|
||||
<SubNavigation className='load'>
|
||||
<button onClick={this.getExploreMore}>
|
||||
<li>
|
||||
<FormattedMessage id='general.loadMore' />
|
||||
</li>
|
||||
</button>
|
||||
</SubNavigation>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,36 @@
|
|||
$base-bg: $ui-white;
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.outer {
|
||||
.title-banner {
|
||||
&.masthead {
|
||||
margin-bottom: 0;
|
||||
background-color: $ui-yellow;
|
||||
padding: 0;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: $ui-white;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
width: $cols6;
|
||||
text-align: left;
|
||||
color: $ui-white;
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid $ui-white;
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
|
|
@ -13,7 +43,7 @@ $base-bg: $ui-white;
|
|||
.box-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.categories {
|
||||
display: inline-block;
|
||||
|
|
@ -26,20 +56,20 @@ $base-bg: $ui-white;
|
|||
opacity: .75;
|
||||
background-color: $ui-white;
|
||||
color: $header-gray;
|
||||
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-color: $active-dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
opacity: 1;
|
||||
border-color: $active-dark-gray;
|
||||
|
||||
&:hover {
|
||||
&.active {
|
||||
opacity: 1;
|
||||
border-color: $active-dark-gray;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-color: $active-dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue