mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
explore redesign
This commit is contained in:
Technoboy10
parent
017df9da20
commit
4d0efd1268
2 changed files with 203 additions and 87 deletions
|
|
@ -9,6 +9,9 @@ var api = require('../../lib/api');
|
|||
var Page = require('../../components/page/www/page.jsx');
|
||||
var Tabs = require('../../components/tabs/tabs.jsx');
|
||||
var TitleBanner = require('../../components/title-banner/title-banner.jsx');
|
||||
var Button = require('../../components/forms/button.jsx');
|
||||
var Form = require('../../components/forms/form.jsx');
|
||||
var Select = require('../../components/forms/select.jsx');
|
||||
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
||||
var Grid = require('../../components/grid/grid.jsx');
|
||||
|
||||
|
|
@ -27,16 +30,19 @@ var Explore = injectIntl(React.createClass({
|
|||
stories: 'stories'
|
||||
};
|
||||
var typeOptions = ['projects','studios'];
|
||||
var modeOptions = ['trending', 'popular', 'recent', ''];
|
||||
|
||||
var pathname = window.location.pathname.toLowerCase();
|
||||
if (pathname[pathname.length - 1] === '/') {
|
||||
pathname = pathname.substring(0, pathname.length - 1);
|
||||
}
|
||||
var slash = pathname.lastIndexOf('/');
|
||||
var currentCategory = pathname.substring(slash + 1,pathname.length);
|
||||
var typeStart = pathname.indexOf('explore/');
|
||||
var type = pathname.substring(typeStart + 8,slash);
|
||||
if (Object.keys(categoryOptions).indexOf(currentCategory) === -1 || typeOptions.indexOf(type) === -1) {
|
||||
var options = pathname.split('/');
|
||||
var type = options[2];
|
||||
var currentCategory = options[3];
|
||||
var currentMode = options.length > 4 ? options[4] : '';
|
||||
if (Object.keys(categoryOptions).indexOf(currentCategory) === -1 ||
|
||||
typeOptions.indexOf(type) === -1 ||
|
||||
modeOptions.indexOf(currentMode) === -1){
|
||||
window.location = window.location.origin + '/explore/projects/all/';
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +50,9 @@ var Explore = injectIntl(React.createClass({
|
|||
category: currentCategory,
|
||||
acceptableTabs: categoryOptions,
|
||||
acceptableTypes: typeOptions,
|
||||
acceptableModes: modeOptions,
|
||||
itemType: type,
|
||||
mode: currentMode,
|
||||
loadNumber: 16
|
||||
};
|
||||
},
|
||||
|
|
@ -65,6 +73,7 @@ var Explore = injectIntl(React.createClass({
|
|||
'?limit=' + this.props.loadNumber +
|
||||
'&offset=' + this.state.offset +
|
||||
'&language=' + this.props.intl.locale +
|
||||
'&mode=' + (this.props.mode ? this.props.mode : 'trending') +
|
||||
qText
|
||||
}, function (err, body) {
|
||||
if (!err) {
|
||||
|
|
@ -84,14 +93,20 @@ var Explore = injectIntl(React.createClass({
|
|||
break;
|
||||
}
|
||||
}
|
||||
window.location = window.location.origin + '/explore/' + newType + '/' + this.props.tab;
|
||||
window.location = window.location.origin + '/explore/' + newType + '/' + this.props.tab + '/' + this.props.mode;
|
||||
},
|
||||
changeSortMode: function (name, value) {
|
||||
if (this.props.acceptableModes.indexOf(value) !== -1) {
|
||||
window.location = window.location.origin + '/explore/' +
|
||||
this.props.itemType + '/' + this.props.category + '/' + value;
|
||||
}
|
||||
},
|
||||
getBubble: function (type) {
|
||||
var classes = classNames({
|
||||
active: (this.props.category === type)
|
||||
});
|
||||
return (
|
||||
<a href={'/explore/' + this.props.itemType + '/' + type + '/'}>
|
||||
<a href={'/explore/' + this.props.itemType + '/' + type + '/' + this.props.mode}>
|
||||
<li className={classes}>
|
||||
<FormattedMessage id={'general.' + type} />
|
||||
</li>
|
||||
|
|
@ -100,15 +115,16 @@ var Explore = injectIntl(React.createClass({
|
|||
},
|
||||
getTab: function (type) {
|
||||
var classes = classNames({
|
||||
active: (this.props.itemType === type)
|
||||
active: (this.props.itemType === type),
|
||||
inactive: (this.props.itemType !== type)
|
||||
});
|
||||
return (
|
||||
<a href={'/explore/' + type + '/' + this.props.category + '/'}>
|
||||
<a href={'/explore/' + type + '/' + this.props.category + '/' + this.props.mode}>
|
||||
<li className={classes}>
|
||||
{this.props.itemType === type ? [
|
||||
<img src={'/svgs/explore/' + type + '-active.svg'} className={'tab-icon ' + type} />
|
||||
<img src={'/svgs/tabs/' + type + '-active.svg'} className={'tab-icon ' + type} />
|
||||
] : [
|
||||
<img src={'/svgs/explore/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
|
||||
<img src={'/svgs/tabs/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
|
||||
]}
|
||||
<FormattedMessage id={'general.' + type} />
|
||||
</li>
|
||||
|
|
@ -130,29 +146,37 @@ var Explore = injectIntl(React.createClass({
|
|||
{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 className="sort-controls">
|
||||
<SubNavigation className='categories'>
|
||||
{this.getBubble('all')}
|
||||
{this.getBubble('animations')}
|
||||
{this.getBubble('art')}
|
||||
{this.getBubble('games')}
|
||||
{this.getBubble('music')}
|
||||
{this.getBubble('stories')}
|
||||
</SubNavigation>
|
||||
<Form className='sort-mode'>
|
||||
<Select name="sort"
|
||||
options={[
|
||||
{value: 'trending', label: 'Trending'},
|
||||
{value: 'popular', label: 'Popular'},
|
||||
{value: 'recent', label: 'Recent'}
|
||||
]}
|
||||
value={this.props.mode}
|
||||
onChange={this.changeSortMode}/>
|
||||
</Form>
|
||||
</div>
|
||||
<div id='projectBox' key='projectBox'>
|
||||
<Grid items={this.state.loaded}
|
||||
itemType={this.props.itemType}
|
||||
explore={true}
|
||||
cards={true}
|
||||
showLoves={false}
|
||||
showFavorites={false}
|
||||
showViews={false}
|
||||
showAvatar={true}/>
|
||||
<SubNavigation className='load'>
|
||||
<button onClick={this.getExploreMore}>
|
||||
<li>
|
||||
<FormattedMessage id='general.loadMore' />
|
||||
</li>
|
||||
</button>
|
||||
</SubNavigation>
|
||||
<Button onClick={this.getExploreMore} className="white">
|
||||
<FormattedMessage id='general.loadMore' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,111 +35,103 @@ $base-bg: $ui-white;
|
|||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
display: block;
|
||||
.left-pusher {
|
||||
margin-right: auto;
|
||||
margin-bottom: 20px;
|
||||
margin-left: auto;
|
||||
|
||||
.box-content {
|
||||
padding: 0;
|
||||
}
|
||||
width: 8.75rem;
|
||||
}
|
||||
|
||||
.tab-background {
|
||||
box-shadow: 1px 0 1px $box-shadow-gray;
|
||||
box-shadow: 0 0 1px $box-shadow-gray;
|
||||
background-color: $ui-white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
background-color: $ui-white;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
width: 58.75rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
width: $cols2;
|
||||
text-align: center;
|
||||
/* HACK: sort controls are terrible. There's some sort of magic formula for height of formsy components that I can't control. */
|
||||
|
||||
&.active {
|
||||
border-bottom: 3px solid $ui-aqua;
|
||||
.sort-controls {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid $ui-border;
|
||||
padding: 8px 0;
|
||||
width: 58.75rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sort-mode {
|
||||
margin-top: -4px;
|
||||
width: 13.75rem;
|
||||
|
||||
.select {
|
||||
|
||||
select {
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
height: 32px;
|
||||
color: $header-gray;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
padding: .75em 1.5em;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
&.projects {
|
||||
margin-bottom: 4px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&.studios {
|
||||
width: 24px;
|
||||
}
|
||||
.help-block {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.categories {
|
||||
border-bottom: 1px solid $ui-border;
|
||||
padding: 8px 0;
|
||||
width: 58.75rem;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
li {
|
||||
border: 0;
|
||||
background-color: $ui-dark-gray;
|
||||
color: $ui-light-gray;
|
||||
background-color: $active-gray;
|
||||
color: $ui-white;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
background-color: $ui-aqua;
|
||||
color: $ui-white;
|
||||
|
||||
}
|
||||
|
||||
&:active {
|
||||
padding: .75em 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $active-dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
background-color: $ui-gray;
|
||||
padding-top: 8px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 32px;
|
||||
width: 100%;
|
||||
|
||||
.grid .flex-row {
|
||||
width: $cols12;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.load button {
|
||||
outline: None;
|
||||
border: None;
|
||||
background-color: $ui-gray;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
color: $header-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
$project-width: 220px;
|
||||
$project-height: 208px;
|
||||
margin-left: 8px;
|
||||
padding: 0;
|
||||
|
||||
&.project {
|
||||
|
|
@ -158,11 +150,111 @@ $base-bg: $ui-white;
|
|||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-title,
|
||||
.thumbnail-creator {
|
||||
margin: 0 auto;
|
||||
&.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
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.outer {
|
||||
.tabs {
|
||||
width: $cols4;
|
||||
}
|
||||
|
||||
.sort-controls {
|
||||
width: $cols4;
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
.grid {
|
||||
.flex-row {
|
||||
width: $cols4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
.outer {
|
||||
.tabs {
|
||||
width: $cols6;
|
||||
}
|
||||
|
||||
.sort-controls {
|
||||
width: $cols6;
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
.grid {
|
||||
.flex-row {
|
||||
width: $cols6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 8 columns
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
.outer {
|
||||
.tabs {
|
||||
width: $cols8;
|
||||
}
|
||||
|
||||
.sort-controls {
|
||||
width: $cols8;
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
.grid {
|
||||
.flex-row {
|
||||
width: $cols9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue