scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 08:31:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Early Explore Page

Browse source 
Added an early prototype of the new Explore page
This commit is contained in:
Rachel Thornton 2016-03-24 10:16:53 -04:00
parent 49611edb0d
commit d4277cabae
6 changed files with 227 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
server/config.js
View file

@ -1,6 +1,6 @@
module.exports = {
// Bind environment
api_host: process.env.API_HOST || 'https://api.scratch.mit.edu',
api_host: process.env.API_HOST || 'https://api-staging.scratch.mit.edu',
// Search and metadata
title: 'Imagine, Program, Share',

5
server/routes.json
View file

@ -19,6 +19,11 @@
"view": "hoc",
"title": "Hour of Code"
},
{
"pattern": "/explore/:projects/:type",
"view": "explore",
"title": "Explore"
},
{
"pattern": "/info/credits",
"view": "credits",

2
src/components/carousel/carousel.jsx
View file

@ -34,7 +34,7 @@ var Carousel = React.createClass({
slidesToScroll: 5,
variableWidth: true
});
var arrows = this.props.items.length > settings.slidesToShow;
var arrows = this.props.items.length > settings.slidesToShow && settings.slidesToScroll>0;
var classes = classNames(
'carousel',
this.props.className

2
src/components/navigation/navigation.jsx
View file

@ -211,7 +211,7 @@ var Navigation = React.createClass({
</a>
</li>
<li className="link explore">
<a href="/explore?date=this_month">
<a href="/explore/projects/all">
<FormattedMessage
id="general.explore"
defaultMessage={'Explore'} />

133
src/views/explore/explore.jsx Normal file
View file

@ -0,0 +1,133 @@
var classNames = require('classnames');
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var FormattedMessage = require('react-intl').FormattedMessage;
var React = require('react');
var render = require('../../lib/render.jsx');
var Api = require('../../mixins/api.jsx');
var Button = require('../../components/forms/button.jsx');
var Box = require('../../components/box/box.jsx');
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
var Carousel = require('../../components/carousel/carousel.jsx');
var Select = require('../../components/forms/select.jsx');
require('./explore.scss');
var Explore = React.createClass({
type: 'Explore',
mixins: [
Api
],
getInitialState: function () {
return {};
},
componentDidMount: function () {
this.getExploreAll();
window.map=this;
},
getExploreAll: function () {
this.api({
uri: '/search/projects'
}, function (err, body) {
if (!err) this.setState({exploreAll: body});
}.bind(this));
},
renderRows: function () {
var rows = [
<Carousel items={this.state.exploreAll}
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
<Carousel items={this.state.exploreAll}
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
<Carousel items={this.state.exploreAll}
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
<Carousel items={this.state.exploreAll}
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
]
return rows;
},
render: function () {
var projects = this.renderRows();
var classes = classNames(
'top-banner',
this.state.bgClass
);
return (
<div>
<div className="outer">
<Box title={'Explore'}
moreProps={{
className: 'subnavigation'
}}>
<SubNavigation>
<a href="/explore/projects/all/">
<li className="active">
<FormattedMessage
id='explore.all'
defaultMessage={'All'} />
</li>
</a>
<a href="/explore/projects/animations/">
<li>
<FormattedMessage
id='explore.animations'
defaultMessage={'Animations'} />
</li>
</a>
<a href="/explore/projects/art/">
<li>
<FormattedMessage
id='explore.art'
defaultMessage={'Art'} />
</li>
</a>
<a href="/explore/projects/games/">
<li>
<FormattedMessage
id='explore.games'
defaultMessage={'Games'} />
</li>
</a>
<a href="/explore/projects/music/">
<li>
<FormattedMessage
id='explore.music'
defaultMessage={'Music'} />
</li>
</a>
<a href="/explore/projects/stories/">
<li>
<FormattedMessage
id='explore.stories'
defaultMessage={'Stories'} />
</li>
</a>
<div id="sorter">
<div id="sortText">
Sort by:
</div>
<Select name="sort" defaultValue="Magic">
<option value="Magic" key="Magic">
Magic
</option>
<option value="Top Loved" key="Top Loved">
Top Loved
</option>
<option value="Top Viewed" key="Top Viewed">
Top Viewed
</option>
</Select>
</div>
</SubNavigation>
<div id="projectBox">
{projects}
</div>
</Box>
</div>
</div>
);
}
});
render(<Explore />, document.getElementById('view'));

86
src/views/explore/explore.scss Normal file
View file

@ -0,0 +1,86 @@
@import "../../colors";
@import "../../frameless";
$base-bg: $ui-white;
#view {
.box {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.box .box-content {
padding: 0px;
}
.carousel {
padding: 15px;
width: calc(100%-5px);
}
.thumbnail.project {
width: 200px;
}
.thumbnail.project img {
width: 200px;
height: 150px;
}
.select {
width: 110px;
margin: auto 0px auto auto;
}
#sorter {
margin: auto 20px auto auto;
color: $header-gray;
display: inline-block;
width:170px;
}
#sortText {
width: 60px;
margin: auto 0px auto auto;
display:inline-block;
}
.sub-nav {
justify-content: flex-start;
padding: 0px 0px 0px 20px;
width: calc(100% - 20px);
background-color: $ui-gray;
}
.sub-nav li {
background-color: $ui-white;
color: $header-gray;
opacity: .75;
margin-bottom: -4px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
&:hover {
opacity: 1;
color: $header-gray;
border-color: $active-gray;
}
}
.sub-nav li.active {
opacity: 1;
border-bottom: 4px solid $ui-white;
}
#projectBox {
background-color: $ui-white;
width: 100%;
border-top: 2px solid;
border-color: $active-gray;
padding-bottom: 30px;
}
}