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

Merge pull request #880 from LLK/release/2.2.12

Browse source 
[Develop] Release 2.2.12
This commit is contained in:
Matthew Taylor 2016-08-26 08:05:00 -04:00 committed by GitHub
commit 85630ffeb4
21 changed files with 599 additions and 203 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
custom-locales.json
View file

@ -1,4 +1,8 @@
{
"ab": {
"locale": "ab",
"parentLocale": "az"
},
"an": {
"locale": "an",
"parentLocale": "ca"

6
languages.json
View file

@ -21,7 +21,7 @@
"eu": "Euskara",
"fa": "فارسی",
"fr": "Français",
"fur": "furlan",
"fur": "Furlan",
"ga": "Gaeilge",
"gd": "Gàidhlig",
"gl": "Galego",
@ -61,11 +61,11 @@
"ro": "Română",
"ru": "Русский",
"sc": "Sardu",
"sq": "shqiptar",
"sq": "Shqiptar",
"sk": "Slovenčina",
"sl": "Slovenščina",
"sr": "Српски",
"fi": "suomi",
"fi": "Suomi",
"sv": "Svenska",
"te": "తెలుగు",
"nai": "Tepehuan",

1
src/_colors.scss
View file

@ -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

6
src/components/grid/grid.jsx
View file

@ -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}

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

@ -1,40 +1,89 @@
@import "../../frameless";
@import "../../colors";
.grid {
display: inline-block;
width: 100%;
$project-width: 200px;
$project-height: 150px;
$thumbnail-width: 220px;
$thumbnail-inner-width: 204px;
$gallery-width: 200px;
$gallery-height: 118px;
$project-height: 208px;
$gallery-height: 164px;
.flex-row {
margin: 0 auto;
padding: 12px;
width: (96px + (4 * $project-width)) / $em;
padding: 12px 0;
width: $cols12;
justify-content: flex-start;
}
.thumbnail {
padding: 12px;
margin: 7px;
border-radius: 4px;
box-shadow: 0 0 3px $box-shadow-gray;
background-color: $ui-white;
padding-bottom: 4px;
width: $thumbnail-width;
.thumbnail-image {
margin: 8px auto;
width: $thumbnail-inner-width;
}
.thumbnail-info {
margin: 0 auto;
width: $thumbnail-inner-width;
.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;
}
}
}
&.project {
width: $project-width;
height: $project-height;
img {
width: $project-width;
height: $project-height;
.thumbnail-image {
height: 152px;
img {
margin: 0 auto;
border: 0;
border-radius: 4px;
width: $thumbnail-inner-width;
height: 152px;
}
}
}
&.gallery {
width: $gallery-width;
height: $gallery-height;
img {
width: $gallery-width;
height: $gallery-height;
.thumbnail-image {
height: 120px;
img {
border: 0;
border-radius: 4px;
width: $thumbnail-inner-width;
height: 120px;
}
}
}
}
@ -44,15 +93,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
src/components/registration/steps.scss
View file

@ -20,6 +20,10 @@
.row {
margin-left: .5rem;
.validation-message {
transform: translate(14rem, 0);
}
}
}
@ -102,14 +106,12 @@
}
&.usescratch-step {
.form {
.form-group {
margin-bottom: 0;
.form-group {
margin-bottom: 0;
&.has-error {
.textarea {
border: 1px solid $ui-orange;
}
&.has-error {
.textarea {
border: 1px solid $ui-orange;
}
}
}

8
src/components/tabs/tabs.jsx
View file

@ -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>
);
}
});

67
src/components/tabs/tabs.scss
View file

@ -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;
}

40
src/components/thumbnail/thumbnail.jsx
View file

@ -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>

8
src/components/thumbnail/thumbnail.scss
View file

@ -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;
}
}
}

18
src/routes.json
View file

@ -4,8 +4,7 @@
"pattern": "^/?$",
"routeAlias": "/?$",
"view": "splash/splash",
"title": "Imagine, Program, Share",
"viewportWidth": "device-width"
"title": "Imagine, Program, Share"
},
{
"name": "about",
@ -48,32 +47,28 @@
"pattern": "^/conference/plan/?$",
"routeAlias": "/conference(?!/201[4-5])",
"view": "conference/plan/plan",
"title": "Plan Your Visit",
"viewportWidth": "device-width"
"title": "Plan Your Visit"
},
{
"name": "conference-expectations",
"pattern": "^/conference/expect/?$",
"routeAlias": "/conference(?!/201[4-5])",
"view": "conference/expect/expect",
"title": "What to Expect",
"viewportWidth": "device-width"
"title": "What to Expect"
},
{
"name": "conference-schedule",
"pattern": "^/conference/schedule/?$",
"routeAlias": "/conference(?!/201[4-5])",
"view": "conference/schedule/schedule",
"title": "Conference Schedule",
"viewportWidth": "device-width"
"title": "Conference Schedule"
},
{
"name": "conference-details",
"pattern": "^/conference/:id/details/?$",
"routeAlias": "/conference(?!/201[4-5])",
"view": "conference/details/details",
"title": "Event Details",
"viewportWidth": "device-width"
"title": "Event Details"
},
{
"name": "developers",
@ -108,8 +103,7 @@
"pattern": "^/educators/register/?$",
"routeAlias": "/educators(?:/(faq|register|waiting))?/?$",
"view": "teacherregistration/teacherregistration",
"title": "Teacher Registration",
"viewportWidth": "device-width"
"title": "Teacher Registration"
},
{
"name": "teacherwaitingroom",

2
src/template-config.js
View file

@ -7,7 +7,7 @@ module.exports = {
'and animations.',
// override if mobile-friendly
viewportWidth: 942,
viewportWidth: 'device-width',
// Open graph
og_image: 'https://scratch.mit.edu/images/scratch-og.png',

92
src/views/explore/explore.jsx
View file

@ -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
};
},
@ -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>
@ -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>

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

@ -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;
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;
}
}
}
}
.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 {
display: inline-block;
background-color: $ui-gray;
padding-left: 10px;
width: calc(100% - 10px);
justify-content: left;
justify-content: flex-start;
li {
opacity: .75;
background-color: $ui-white;
color: $header-gray;
border: 0;
background-color: $active-gray;
color: $ui-white;
&:hover {
&.active {
opacity: 1;
border-color: $active-dark-gray;
background-color: $ui-aqua;
color: $ui-white;
}
}
li.active {
opacity: 1;
border-color: $active-dark-gray;
&: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;
}
}
}
}
}

2
src/views/faq/l10n.json
View file

@ -13,7 +13,7 @@
"faq.makeGameTitle":"How do I make a game or animation with Scratch?",
"faq.makeGameBody":"Check out the <a href= \"/help \">help page</a> to see lots of ways to get started with Scratch. Or just <a href= \"/projects/editor/?tip_bar=getStarted \">dive in</a> to the project editor.",
"faq.requirementsTitle":"What are the system requirements for Scratch?",
"faq.requirementsBody":"To run Scratch 2, you need to be using (1) a Mac, Linux or Windows computer; (2) a version of <a href= \" \">Adobe Flash Player</a> released on or after June 15, 2016; (3) a relatively recent web browser: one of the latest two versions of <a href=\"http://google.com/chrome/\">Chrome</a>, <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a>, <a href=\"https://support.apple.com/downloads/safari\">Safari</a> (Mac or Windows only), <a href=\"https://www.microsoft.com/EN-US/windows/microsoft-edge\">Edge</a> (Windows only), or <a href=\"https://www.microsoft.com/en-us/download/internet-explorer.aspx\">Internet Explorer 10+</a> (Windows only). If your computer doesn’t meet these requirements, you can try downloading and installing <a href=\"/scratch_1.4\">Scratch 1.4</a>, which you can still use to share projects to the Scratch 2 website.",
"faq.requirementsBody":"To run Scratch 2, you need to be using (1) a Mac, Linux, or Windows computer; (2) a version of <a href= \" \">Adobe Flash Player</a> released on or after June 15, 2016; (3) a relatively recent web browser: one of the latest two versions of <a href=\"http://google.com/chrome/\">Chrome</a>, <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a>, <a href=\"https://support.apple.com/downloads/safari\">Safari</a> (Mac or Windows only), <a href=\"https://www.microsoft.com/EN-US/windows/microsoft-edge\">Edge</a> (Windows only), or <a href=\"https://www.microsoft.com/en-us/download/internet-explorer.aspx\">Internet Explorer 10+</a> (Windows only). If your computer doesn’t meet these requirements, you can try downloading and installing <a href=\"/scratch_1.4\">Scratch 1.4</a>, which you can still use to share projects to the Scratch 2 website.",
"faq.offlineTitle":"Do you have a downloadable version so I can create and view projects offline?",
"faq.offlineBody":"The Scratch 2 offline editor allows you to create Scratch projects without an internet connection. You can download Scratch 2 from the <a href= \"/scratch2download/ \">website</a>. You can also still use <a href = \"/scratch_1.4 \">Scratch 1.4</a>. Note: You can have both Scratch 1.4 and 2 on your computer.",
"faq.uploadOldTitle":"Can I still upload projects created with older versions of Scratch to the website?",

53
src/views/search/search.jsx
View file

@ -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>;
@ -93,28 +101,37 @@ var Search = injectIntl(React.createClass({
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>
);

182
src/views/search/search.scss
View file

@ -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;
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;
}
}
}
}
#projectBox {
border-top: 2px solid;
border-color: $active-gray;
.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
View 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>
Side by side

After

Width:  |  Height:  |  Size: 474 B

1
static/svgs/tabs/projects-inactive.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 471 B

1
static/svgs/tabs/studios-active.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 596 B

1
static/svgs/tabs/studios-inactive.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 593 B