mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Merge pull request #871 from technoboy10/new-explore-release
Redesign Explore and Search pages
This commit is contained in:
Matthew Taylor
GitHub
commit
acb363f93f
15 changed files with 575 additions and 175 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
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ var Grid = React.createClass({
|
|||
showLoves: false,
|
||||
showFavorites: false,
|
||||
showRemixes: false,
|
||||
showViews: false
|
||||
showViews: false,
|
||||
showAvatar: false
|
||||
};
|
||||
},
|
||||
render: function () {
|
||||
|
|
@ -36,10 +37,13 @@ var Grid = React.createClass({
|
|||
showFavorites={this.props.showFavorites}
|
||||
showRemixes={this.props.showRemixes}
|
||||
showViews={this.props.showViews}
|
||||
showAvatar={this.props.showAvatar}
|
||||
type={'project'}
|
||||
href={href}
|
||||
title={item.title}
|
||||
src={item.image}
|
||||
avatar={'https://cdn2.scratch.mit.edu/get_image/user/'
|
||||
+ item.author.id + '_32x32.png'}
|
||||
creator={item.author.username}
|
||||
loves={item.stats.loves}
|
||||
favorites={item.stats.favorites}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
@import "../../frameless";
|
||||
@import "../../colors";
|
||||
|
||||
.grid {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
$project-width: 200px;
|
||||
$project-height: 150px;
|
||||
$project-width: 220px;
|
||||
$project-height: 208px;
|
||||
|
||||
$gallery-width: 200px;
|
||||
$gallery-height: 118px;
|
||||
|
|
@ -13,28 +14,80 @@
|
|||
.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;
|
||||
|
||||
&.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;
|
||||
|
||||
img {
|
||||
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 {
|
||||
width: $gallery-width;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 3px $box-shadow-gray;
|
||||
background-color: $ui-white;
|
||||
width: $project-width;
|
||||
height: 164px;
|
||||
|
||||
img {
|
||||
width: $gallery-width;
|
||||
height: $gallery-height;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -44,15 +97,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,11 @@ var Tabs = React.createClass({
|
|||
this.props.className
|
||||
);
|
||||
return (
|
||||
<SubNavigation className={classes}>
|
||||
{this.props.children}
|
||||
</SubNavigation>
|
||||
<div className='tab-background'>
|
||||
<SubNavigation className={classes}>
|
||||
{this.props.children}
|
||||
</SubNavigation>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,38 +1,53 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
.tab-background {
|
||||
box-shadow: 0 0 1px $box-shadow-gray;
|
||||
background-color: $ui-white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
background-color: $ui-gray;
|
||||
padding: 0 0 0 20px;
|
||||
width: calc(100% - 20px);
|
||||
justify-content: flex-start;
|
||||
background-color: $ui-white;
|
||||
padding: 0;
|
||||
width: $cols12;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tabs li {
|
||||
opacity: .75;
|
||||
margin-bottom: -4px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background-color: $ui-white;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
width: $cols2;
|
||||
text-align: center;
|
||||
color: $header-gray;
|
||||
|
||||
|
||||
&.active {
|
||||
border-bottom: 3px solid $ui-aqua;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 3px solid $ui-aqua;
|
||||
color: $header-gray;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
padding: .75em 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom: 3px solid $active-dark-gray;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 4px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-color: $active-gray;
|
||||
background-color: $ui-white;
|
||||
color: $header-gray;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tabs li.active {
|
||||
opacity: 1;
|
||||
border-bottom: 4px solid $ui-white;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-bottom: 4px solid $ui-white;
|
||||
background-color: $ui-white;
|
||||
color: $header-gray;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
var classNames = require('classnames');
|
||||
var FormattedMessage = require('react-intl').FormattedMessage;
|
||||
var React = require('react');
|
||||
|
||||
require('./thumbnail.scss');
|
||||
|
|
@ -14,11 +13,13 @@ var Thumbnail = React.createClass({
|
|||
href: '#',
|
||||
title: 'Project',
|
||||
src: '',
|
||||
avatar: '',
|
||||
type: 'project',
|
||||
showLoves: false,
|
||||
showFavorites: false,
|
||||
showRemixes: false,
|
||||
showViews: false,
|
||||
showAvatar: false,
|
||||
linkTitle: true,
|
||||
alt: ''
|
||||
};
|
||||
|
|
@ -30,16 +31,8 @@ var Thumbnail = React.createClass({
|
|||
this.props.className
|
||||
);
|
||||
var extra = [];
|
||||
if (this.props.creator) {
|
||||
extra.push(
|
||||
<div key="creator" className="thumbnail-creator">
|
||||
<FormattedMessage id={'thumbnail.by'} />{' '}
|
||||
<a href={'/users/' + this.props.creator + '/'}>
|
||||
{this.props.creator}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
var info = [];
|
||||
|
||||
if (this.props.loves && this.props.showLoves) {
|
||||
extra.push(
|
||||
<div
|
||||
|
|
@ -80,7 +73,7 @@ var Thumbnail = React.createClass({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
var imgElement,titleElement;
|
||||
var imgElement,titleElement,avatarElement;
|
||||
if (this.props.linkTitle) {
|
||||
imgElement = <a className="thumbnail-image" href={this.props.href}>
|
||||
<img src={this.props.src} alt={this.props.alt} />
|
||||
|
|
@ -91,11 +84,30 @@ var Thumbnail = React.createClass({
|
|||
titleElement = this.props.title;
|
||||
}
|
||||
|
||||
info.push(titleElement);
|
||||
|
||||
if (this.props.creator) {
|
||||
info.push(
|
||||
<div key="creator" className="thumbnail-creator">
|
||||
<a href={'/users/' + this.props.creator + '/'}>{this.props.creator}</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.avatar && this.props.showAvatar) {
|
||||
avatarElement =
|
||||
<a className="creator-image" href={'/users/' + this.props.creator + '/'}>
|
||||
<img src={this.props.avatar} alt={this.props.creator} />
|
||||
</a>;
|
||||
}
|
||||
return (
|
||||
<div className={classes} >
|
||||
{imgElement}
|
||||
<div className="thumbnail-title">
|
||||
{titleElement}
|
||||
<div className="thumbnail-info">
|
||||
{avatarElement}
|
||||
<div className="thumbnail-title">
|
||||
{info}
|
||||
</div>
|
||||
</div>
|
||||
{extra}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,9 +90,11 @@
|
|||
$project-height: 108px;
|
||||
width: $project-width;
|
||||
|
||||
img {
|
||||
width: $project-width;
|
||||
height: $project-height;
|
||||
.thumbnail-image {
|
||||
img {
|
||||
width: $project-width;
|
||||
height: $project-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,11 @@ 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 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
|
||||
};
|
||||
},
|
||||
|
|
@ -59,12 +67,13 @@ 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 +
|
||||
'&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>
|
||||
|
|
@ -103,20 +118,33 @@ var Explore = injectIntl(React.createClass({
|
|||
active: (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/tabs/' + type + '-active.svg'} className={'tab-icon ' + type} />
|
||||
] : [
|
||||
<img src={'/svgs/tabs/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
|
||||
]}
|
||||
<FormattedMessage id={'general.' + type} />
|
||||
</li>
|
||||
</a>
|
||||
);
|
||||
},
|
||||
render: function () {
|
||||
var formatMessage = this.props.intl.formatMessage;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='outer'>
|
||||
<Box title={formatMessage({id: 'general.explore'})}>
|
||||
<TitleBanner className="masthead">
|
||||
<div className="inner">
|
||||
<h1>Explore</h1>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
<Tabs>
|
||||
{this.getTab('projects')}
|
||||
{this.getTab('studios')}
|
||||
</Tabs>
|
||||
<div className="sort-controls">
|
||||
<SubNavigation className='categories'>
|
||||
{this.getBubble('all')}
|
||||
{this.getBubble('animations')}
|
||||
|
|
@ -125,25 +153,29 @@ var Explore = injectIntl(React.createClass({
|
|||
{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>
|
||||
</div>
|
||||
</Box>
|
||||
<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}
|
||||
cards={true}
|
||||
showLoves={false}
|
||||
showFavorites={false}
|
||||
showViews={false}
|
||||
showAvatar={true}/>
|
||||
<Button onClick={this.getExploreMore} className="white">
|
||||
<FormattedMessage id='general.loadMore' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,62 +4,163 @@
|
|||
$base-bg: $ui-white;
|
||||
|
||||
#view {
|
||||
.box {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-bottom: 20px;
|
||||
margin-left: auto;
|
||||
background-color: $ui-gray;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
.outer {
|
||||
.title-banner {
|
||||
&.masthead {
|
||||
margin-bottom: 0;
|
||||
background-color: $ui-yellow;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.categories {
|
||||
display: inline-block;
|
||||
background-color: $ui-gray;
|
||||
padding-left: 10px;
|
||||
width: calc(100% - 10px);
|
||||
justify-content: left;
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: $ui-white;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
li {
|
||||
opacity: .75;
|
||||
background-color: $ui-white;
|
||||
color: $header-gray;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-color: $active-dark-gray;
|
||||
p {
|
||||
margin: 0;
|
||||
width: $cols6;
|
||||
text-align: left;
|
||||
color: $ui-white;
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid $ui-white;
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
opacity: 1;
|
||||
border-color: $active-dark-gray;
|
||||
.left-pusher {
|
||||
margin-right: auto;
|
||||
width: 8.75rem;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 58.75rem;
|
||||
}
|
||||
|
||||
/* HACK: sort controls are terrible. There's some sort of magic formula for height of formsy components that I can't control. */
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.categories {
|
||||
justify-content: flex-start;
|
||||
|
||||
li {
|
||||
border: 0;
|
||||
background-color: $active-gray;
|
||||
color: $ui-white;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
background-color: $ui-aqua;
|
||||
color: $ui-white;
|
||||
|
||||
}
|
||||
|
||||
&:active {
|
||||
padding: .75em 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-color: $active-dark-gray;
|
||||
background-color: $active-dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
border-top: 2px solid;
|
||||
border-color: $active-gray;
|
||||
background-color: $ui-white;
|
||||
padding-bottom: 30px;
|
||||
background-color: $ui-gray;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.load button {
|
||||
outline: None;
|
||||
border: None;
|
||||
background-color: $ui-white;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
color: $header-gray;
|
||||
.button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//4 columns
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.outer {
|
||||
.tabs {
|
||||
width: $cols4;
|
||||
}
|
||||
|
||||
.sort-controls {
|
||||
width: $cols4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
.outer {
|
||||
.tabs {
|
||||
width: $cols6;
|
||||
}
|
||||
|
||||
.sort-controls {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@ 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 SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
||||
var TitleBanner = require('../../components/title-banner/title-banner.jsx');
|
||||
var Form = require('../../components/forms/form.jsx');
|
||||
var Input = require('../../components/forms/input.jsx');
|
||||
var Button = require('../../components/forms/button.jsx');
|
||||
var Tabs = require('../../components/tabs/tabs.jsx');
|
||||
var Grid = require('../../components/grid/grid.jsx');
|
||||
|
||||
|
|
@ -62,6 +64,7 @@ var Search = injectIntl(React.createClass({
|
|||
'?limit=' + this.props.loadNumber +
|
||||
'&offset=' + this.state.offset +
|
||||
'&language=' + this.props.intl.locale +
|
||||
'&mode=popular' +
|
||||
termText
|
||||
}, function (err, body) {
|
||||
var loadedSoFar = this.state.loaded;
|
||||
|
|
@ -71,16 +74,21 @@ var Search = injectIntl(React.createClass({
|
|||
this.setState({offset: currentOffset});
|
||||
}.bind(this));
|
||||
},
|
||||
onSearchSubmit: function (formData) {
|
||||
window.location.href = '/search/projects?q=' + formData.q;
|
||||
},
|
||||
getTab: function (type) {
|
||||
var term = this.props.searchTerm.split(' ').join('+');
|
||||
var allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
|
||||
<li>
|
||||
<img src={'/svgs/tabs/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
|
||||
<FormattedMessage id={'general.' + type} />
|
||||
</li>
|
||||
</a>;
|
||||
if (this.props.tab == type) {
|
||||
allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
|
||||
<li className='active'>
|
||||
<img src={'/svgs/tabs/' + type + '-active.svg'} className={'tab-icon ' + type} />
|
||||
<FormattedMessage id={'general.' + type} />
|
||||
</li>
|
||||
</a>;
|
||||
|
|
@ -89,32 +97,41 @@ var Search = injectIntl(React.createClass({
|
|||
},
|
||||
render: function () {
|
||||
var formatMessage = this.props.intl.formatMessage;
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='outer'>
|
||||
<Box title={formatMessage({id: 'general.results'}) + ':'}
|
||||
subtitle={this.props.searchTerm}
|
||||
moreProps={{className: 'subnavigation'}}>
|
||||
<TitleBanner className="masthead">
|
||||
<div className="inner">
|
||||
<h1>Search</h1>
|
||||
<div className="search">
|
||||
<Form onSubmit={this.onSearchSubmit}>
|
||||
<Button type="submit" className="btn-search" />
|
||||
<Input type="text"
|
||||
aria-label={formatMessage({id: 'general.search'})}
|
||||
placeholder={formatMessage({id: 'general.search'})}
|
||||
defaultValue={decodeURI(this.props.searchTerm)}
|
||||
name="q" />
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</TitleBanner>
|
||||
<Tabs>
|
||||
{this.getTab('projects')}
|
||||
{this.getTab('studios')}
|
||||
</Tabs>
|
||||
<div id='projectBox' key='projectBox'>
|
||||
<Grid items={this.state.loaded}
|
||||
itemType={this.props.tab}
|
||||
showLoves={false}
|
||||
showFavorites={false}
|
||||
showViews={false} />
|
||||
<SubNavigation className='load'>
|
||||
<button onClick={this.getSearchMore}>
|
||||
<li>
|
||||
<FormattedMessage id='general.loadMore' />
|
||||
</li>
|
||||
</button>
|
||||
</SubNavigation>
|
||||
<Grid items={this.state.loaded}
|
||||
itemType={this.props.tab}
|
||||
cards={true}
|
||||
showAvatar={true}
|
||||
showLoves={false}
|
||||
showFavorites={false}
|
||||
showViews={false} />
|
||||
<Button onClick={this.getSearchMore} className="white">
|
||||
<FormattedMessage id='general.loadMore' />
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,33 +4,181 @@
|
|||
$base-bg: $ui-white;
|
||||
|
||||
#view {
|
||||
.box {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-bottom: 20px;
|
||||
margin-left: auto;
|
||||
background-color: $ui-gray;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
.outer {
|
||||
.title-banner {
|
||||
&.masthead {
|
||||
margin-bottom: 0;
|
||||
background-color: darken($ui-blue, 10%);
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
border-top: 2px solid;
|
||||
border-color: $active-gray;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0 auto;
|
||||
border-right: 0;
|
||||
width: $cols6;
|
||||
color: $type-white;
|
||||
|
||||
.form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
.help-block {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input,
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
outline: none;
|
||||
border: 0;
|
||||
background-color: $active-gray;
|
||||
height: 14px;
|
||||
|
||||
&[type=text] {
|
||||
transition: .15s ease background-color;
|
||||
padding: 0;
|
||||
padding-right: 10px;
|
||||
padding-left: 40px;
|
||||
width: calc(100% - 50px);
|
||||
height: 40px;
|
||||
color: $type-white;
|
||||
font-size: .85em;
|
||||
|
||||
&::placeholder {
|
||||
$placeholder-transparent: rgba(255, 255, 255, .75);
|
||||
color: $placeholder-transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
transition: .15s ease background-color;
|
||||
background-color: $active-dark-gray;
|
||||
}
|
||||
|
||||
.ie9 & {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
position: absolute;
|
||||
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
background-image: url("/images/nav-search-glass.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 14px 14px;
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
select {
|
||||
margin-bottom: 0;
|
||||
color: $header-gray;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-background {
|
||||
box-shadow: 0 0 1px $box-shadow-gray;
|
||||
background-color: $ui-white;
|
||||
padding-bottom: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.load button {
|
||||
outline: None;
|
||||
border: None;
|
||||
background-color: $ui-white;
|
||||
padding: 0;
|
||||
#projectBox {
|
||||
margin-top: 16px;
|
||||
background-color: $ui-gray;
|
||||
padding-bottom: 32px;
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
color: $header-gray;
|
||||
.button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//4 columns
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.outer {
|
||||
.search {
|
||||
width: $cols4;
|
||||
|
||||
.btn-search {
|
||||
left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: $cols4;
|
||||
}
|
||||
|
||||
.sort-controls {
|
||||
width: $cols4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
.outer {
|
||||
.tabs {
|
||||
width: $cols6;
|
||||
}
|
||||
|
||||
.sort-controls {
|
||||
width: $cols6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 8 columns
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
.outer {
|
||||
.tabs {
|
||||
width: $cols8;
|
||||
}
|
||||
|
||||
.sort-controls {
|
||||
width: $cols8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
static/svgs/tabs/projects-active.svg
Normal file
1
static/svgs/tabs/projects-active.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Icons</title><path d="M13.39,3.29V9.4a0.41,0.41,0,0,1-.14.31,4.18,4.18,0,0,1-5.51,0,3.42,3.42,0,0,0-2.23-.84,3.35,3.35,0,0,0-2.07.72v4.05a0.42,0.42,0,1,1-.84,0V3.29A0.41,0.41,0,0,1,2.87,2.9,4.17,4.17,0,0,1,8.27,3a3.39,3.39,0,0,0,4.45,0,0.39,0.39,0,0,1,.43-0.06A0.4,0.4,0,0,1,13.39,3.29Z" fill="#26d9bb" stroke="#22b296" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 474 B |
1
static/svgs/tabs/projects-inactive.svg
Normal file
1
static/svgs/tabs/projects-inactive.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Icons</title><path d="M13.39,3.29V9.4a0.41,0.41,0,0,1-.14.31,4.18,4.18,0,0,1-5.51,0,3.42,3.42,0,0,0-2.23-.84,3.35,3.35,0,0,0-2.07.72v4.05a0.42,0.42,0,1,1-.84,0V3.29A0.41,0.41,0,0,1,2.87,2.9,4.17,4.17,0,0,1,8.27,3a3.39,3.39,0,0,0,4.45,0,0.39,0.39,0,0,1,.43-0.06A0.4,0.4,0,0,1,13.39,3.29Z" fill="none" stroke="#6b6b6b" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 471 B |
1
static/svgs/tabs/studios-active.svg
Normal file
1
static/svgs/tabs/studios-active.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Icons</title><polyline points="6.88 12.46 6.88 12.46 13.58 12.46 13.58 8 13.58 8" fill="none" stroke="#22b296" stroke-linecap="round" stroke-linejoin="round"/><polyline points="4.65 10.23 4.65 10.23 11.35 10.23 11.35 5.77 11.35 5.77" fill="none" stroke="#22b296" stroke-linecap="round" stroke-linejoin="round"/><rect x="2.42" y="3.54" width="6.69" height="4.46" transform="translate(11.54 11.54) rotate(-180)" fill="#26d9bb" stroke="#22b296" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 596 B |
1
static/svgs/tabs/studios-inactive.svg
Normal file
1
static/svgs/tabs/studios-inactive.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Icons</title><polyline points="4.65 10.23 4.65 10.23 11.35 10.23 11.35 5.77 11.35 5.77" fill="none" stroke="#6b6b6b" stroke-linecap="round" stroke-linejoin="round"/><rect x="2.42" y="3.54" width="6.69" height="4.46" transform="translate(11.54 11.54) rotate(-180)" fill="none" stroke="#6b6b6b" stroke-linecap="round" stroke-linejoin="round"/><polyline points="6.88 12.46 6.88 12.46 13.58 12.46 13.58 8 13.58 8" fill="none" stroke="#6b6b6b" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
After Width: | Height: | Size: 593 B |
Loading…
Reference in a new issue