scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 17:45:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Style changes

Browse source 
Changes to style for lint tests
This commit is contained in:
Rachel Thornton 2016-04-30 16:38:48 -04:00
parent eb499c929c
commit fdd78a5433
6 changed files with 116 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/box/box.scss
View file

@ -76,9 +76,9 @@ $base-bg: $ui-white;
h2 { h2 {
display: inline-block; display: inline-block;
float: left; float: left;
padding-left: 5px;
font-size: 1rem; font-size: 1rem;
font-weight: normal; font-weight: normal;
padding-left:5px;
} }
p { p {

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

@ -1,29 +1,29 @@
@import "../../colors"; @import "../../colors";
.tabs { .tabs {
justify-content: flex-start;
padding: 0px 0px 0px 20px;
width: calc(100% - 20px);
background-color: $ui-gray; background-color: $ui-gray;
} padding: 0 0 0 20px;
width: calc(100% - 20px);
justify-content: flex-start;
}
.tabs li { .tabs li {
background-color: $ui-white;
color: $header-gray;
opacity: .75; opacity: .75;
margin-bottom: -4px; margin-bottom: -4px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-right-radius: 10px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: $ui-white;
color: $header-gray;
&:hover { &:hover {
opacity: 1; opacity: 1;
color: $header-gray;
border-color: $active-gray; border-color: $active-gray;
background-color: $ui-white; background-color: $ui-white;
color: $header-gray;
} }
} }
.tabs li.active { .tabs li.active {
@ -32,8 +32,8 @@
&:hover { &:hover {
opacity: 1; opacity: 1;
color: $header-gray;
border-bottom: 4px solid $ui-white; border-bottom: 4px solid $ui-white;
background-color: $ui-white; background-color: $ui-white;
color: $header-gray;
} }
} }

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

@ -1,6 +1,4 @@
var injectIntl = require('react-intl').injectIntl; var injectIntl = require('react-intl').injectIntl;
var classNames = require('classnames');
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var FormattedMessage = require('react-intl').FormattedMessage; var FormattedMessage = require('react-intl').FormattedMessage;
var React = require('react'); var React = require('react');
var render = require('../../lib/render.jsx'); var render = require('../../lib/render.jsx');
@ -8,16 +6,14 @@ var render = require('../../lib/render.jsx');
var Api = require('../../mixins/api.jsx'); var Api = require('../../mixins/api.jsx');
var Page = require('../../components/page/www/page.jsx'); var Page = require('../../components/page/www/page.jsx');
var Button = require('../../components/forms/button.jsx');
var Box = require('../../components/box/box.jsx'); var Box = require('../../components/box/box.jsx');
var Tabs = require('../../components/tabs/tabs.jsx'); var Tabs = require('../../components/tabs/tabs.jsx');
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx'); var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
var Carousel = require('../../components/carousel/carousel.jsx'); var Carousel = require('../../components/carousel/carousel.jsx');
var Select = require('../../components/forms/select.jsx');
var offset = 0; var offset = 0;
var more = []; var more = [];
var tab = "all"; var tab = 'all';
var acceptableTabs = ["all","animations","art","games","music","stories"]; var acceptableTabs = ['all','animations','art','games','music','stories'];
require('./explore.scss'); require('./explore.scss');
@ -31,21 +27,21 @@ var Explore = injectIntl(React.createClass({
}, },
componentDidMount: function () { componentDidMount: function () {
var pathname = window.location.pathname; var pathname = window.location.pathname;
if (pathname.substring(pathname.length-1,pathname.length)=="/") { if (pathname.substring(pathname.length-1,pathname.length)=='/') {
pathname = pathname.substring(0,pathname.length-1); pathname = pathname.substring(0,pathname.length-1);
}; }
var slash = pathname.lastIndexOf("/"); var slash = pathname.lastIndexOf('/');
tab = pathname.substring(slash+1,pathname.length).toLowerCase(); tab = pathname.substring(slash+1,pathname.length).toLowerCase();
if (acceptableTabs.indexOf(tab)==-1) { if (acceptableTabs.indexOf(tab)==-1) {
window.location=window.location.origin+"/explore/projects/all/"; window.location=window.location.origin+'/explore/projects/all/';
} }
this.getExploreAll(0); this.getExploreAll(0);
}, },
getExploreAll: function () { getExploreAll: function () {
var tabText = ''; var tabText = '';
if (tab!="all") { if (tab!='all') {
tabText = "&q="+tab; tabText = '&q='+tab;
}; }
this.api({ this.api({
uri: '/search/projects?limit=16'+tabText uri: '/search/projects?limit=16'+tabText
}, function (err, body) { }, function (err, body) {
@ -54,9 +50,9 @@ var Explore = injectIntl(React.createClass({
}, },
getExploreMore: function () { getExploreMore: function () {
var tabText = ''; var tabText = '';
if (tab!="all") { if (tab!='all') {
tabText = "&q="+tab; tabText = '&q='+tab;
}; }
offset+=16; offset+=16;
this.api({ this.api({
uri: '/search/projects?limit=16&offset='+offset+tabText uri: '/search/projects?limit=16&offset='+offset+tabText
@ -81,19 +77,20 @@ var Explore = injectIntl(React.createClass({
<Carousel items={row3} showLoves={true} <Carousel items={row3} showLoves={true}
settings={{slidesToShow: 4, slidesToScroll: 0}} />, settings={{slidesToShow: 4, slidesToScroll: 0}} />,
<Carousel items={row4} showLoves={true} <Carousel items={row4} showLoves={true}
settings={{slidesToShow: 4, slidesToScroll: 0}} />, settings={{slidesToShow: 4, slidesToScroll: 0}} />
] ];
if (this.state.exploreMore!=undefined && more.length<offset) more = more.concat(this.state.exploreMore); if (this.state.exploreMore!=undefined && more.length<offset) more = more.concat(this.state.exploreMore);
if (more.length>0) { if (more.length>0) {
for (var i = 0; i<more.length; i+=4) { for (var i = 0; i<more.length; i+=4) {
var rowNext = more.slice(i,i+4); var rowNext = more.slice(i,i+4);
rows.push(<Carousel items={rowNext} showLoves={true} settings={{slidesToShow: 4, slidesToScroll: 0}} />); rows.push(<Carousel items={rowNext} showLoves={true}
settings={{slidesToShow: 4, slidesToScroll: 0}}/>);
} }
} }
return rows; return rows;
}, },
getTab: function(type) { getTab: function (type) {
var allTab = <a href={"/explore/projects/"+type+"/"}> var allTab = <a href={'/explore/projects/'+type+'/'}>
<li> <li>
<FormattedMessage <FormattedMessage
id={'explore.'+type} id={'explore.'+type}
@ -101,56 +98,36 @@ var Explore = injectIntl(React.createClass({
</li> </li>
</a>; </a>;
if (tab==type) { if (tab==type) {
allTab = <a href={"/explore/projects/"+type+"/"}> allTab = <a href={'/explore/projects/'+type+'/'}>
<li className="active"> <li className='active'>
<FormattedMessage <FormattedMessage
id={'explore.'+type} id={'explore.'+type}
defaultMessage={type.charAt(0).toUpperCase()+type.slice(1)} /> defaultMessage={type.charAt(0).toUpperCase()+type.slice(1)} />
</li> </li>
</a>; </a>;
} }
return allTab return allTab;
}, },
render: function () { render: function () {
var projects = this.renderRows(); var projects = this.renderRows();
var classes = classNames(
'top-banner',
this.state.bgClass
);
return ( return (
<div> <div>
<div className="outer"> <div className='outer'>
<Box title={'Explore'} <Box title={'Explore'}
moreProps={{ moreProps={{
className: 'subnavigation' className: 'subnavigation'
}}> }}>
<Tabs> <Tabs>
{this.getTab("all")} {this.getTab('all')}
{this.getTab("animations")} {this.getTab('animations')}
{this.getTab("art")} {this.getTab('art')}
{this.getTab("games")} {this.getTab('games')}
{this.getTab("music")} {this.getTab('music')}
{this.getTab("stories")} {this.getTab('stories')}
{/*<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> \\can be reused in the future if different sorts are added*/}
</Tabs> </Tabs>
<div id="projectBox" key="projectBox"> <div id='projectBox' key='projectBox'>
{projects} {projects}
<SubNavigation className="load"> <SubNavigation className='load'>
<button onClick={this.getExploreMore}> <button onClick={this.getExploreMore}>
<li> <li>
<FormattedMessage <FormattedMessage

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

@ -6,13 +6,13 @@ $base-bg: $ui-white;
#view { #view {
.box { .box {
display: block; display: block;
margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: auto;
} }
.box .box-content { .box .box-content {
padding: 0px; padding: 0;
} }
.carousel { .carousel {
@ -29,37 +29,19 @@ $base-bg: $ui-white;
height: 150px; 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;
}
#projectBox { #projectBox {
background-color: $ui-white;
width: 100%;
border-top: 2px solid; border-top: 2px solid;
border-color: $active-gray; border-color: $active-gray;
background-color: $ui-white;
padding-bottom: 30px; padding-bottom: 30px;
width: 100%;
} }
.load button { .load button {
border: None;
padding: 0px;
background-color: $ui-white;
outline: None; outline: None;
border: None;
background-color: $ui-white;
padding: 0;
li { li {
color: $header-gray; color: $header-gray;

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

@ -1,6 +1,4 @@
var injectIntl = require('react-intl').injectIntl; var injectIntl = require('react-intl').injectIntl;
var classNames = require('classnames');
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var FormattedMessage = require('react-intl').FormattedMessage; var FormattedMessage = require('react-intl').FormattedMessage;
var React = require('react'); var React = require('react');
var render = require('../../lib/render.jsx'); var render = require('../../lib/render.jsx');
@ -8,16 +6,14 @@ var render = require('../../lib/render.jsx');
var Api = require('../../mixins/api.jsx'); var Api = require('../../mixins/api.jsx');
var Page = require('../../components/page/www/page.jsx'); var Page = require('../../components/page/www/page.jsx');
var Button = require('../../components/forms/button.jsx');
var Box = require('../../components/box/box.jsx'); var Box = require('../../components/box/box.jsx');
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx'); var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
var Tabs = require('../../components/tabs/tabs.jsx'); var Tabs = require('../../components/tabs/tabs.jsx');
var Carousel = require('../../components/carousel/carousel.jsx'); var Carousel = require('../../components/carousel/carousel.jsx');
var Select = require('../../components/forms/select.jsx');
var offset = 0; var offset = 0;
var more = []; var more = [];
var tab = "projects"; var tab = 'projects';
var searchTerm = ""; var searchTerm = '';
require('./search.scss'); require('./search.scss');
@ -31,24 +27,24 @@ var Search = injectIntl(React.createClass({
}, },
componentDidMount: function () { componentDidMount: function () {
var pathname = window.location.search; var pathname = window.location.search;
var q = pathname.lastIndexOf("q="); var q = pathname.lastIndexOf('q=');
if (q!=-1) { if (q!=-1) {
searchTerm = pathname.substring(q+2,pathname.length).toLowerCase(); searchTerm = pathname.substring(q+2,pathname.length).toLowerCase();
};
while (searchTerm.indexOf("/")>-1) {
searchTerm = searchTerm.substring(0,searchTerm.indexOf("/"));
} }
while (searchTerm.indexOf("&")>-1) { while (searchTerm.indexOf('/')>-1) {
searchTerm = searchTerm.substring(0,searchTerm.indexOf("&")); searchTerm = searchTerm.substring(0,searchTerm.indexOf('/'));
}
while (searchTerm.indexOf('&')>-1) {
searchTerm = searchTerm.substring(0,searchTerm.indexOf('&'));
} }
searchTerm = searchTerm.split('+').join(' '); searchTerm = searchTerm.split('+').join(' ');
this.getSearchResults(0); this.getSearchResults(0);
}, },
getSearchResults: function () { getSearchResults: function () {
var termText = ''; var termText = '';
if (searchTerm!="") { if (searchTerm!='') {
termText = "&q="+searchTerm; termText = '&q='+searchTerm;
}; }
this.api({ this.api({
uri: '/search/projects?limit=16'+termText uri: '/search/projects?limit=16'+termText
}, function (err, body) { }, function (err, body) {
@ -57,9 +53,9 @@ var Search = injectIntl(React.createClass({
}, },
getSearchMore: function () { getSearchMore: function () {
var termText = ''; var termText = '';
if (searchTerm!="") { if (searchTerm!='') {
termText = "&q="+searchTerm; termText = '&q='+searchTerm;
}; }
offset+=16; offset+=16;
this.api({ this.api({
uri: '/search/projects?limit=16&offset='+offset+termText uri: '/search/projects?limit=16&offset='+offset+termText
@ -84,19 +80,20 @@ var Search = injectIntl(React.createClass({
<Carousel items={row3} showLoves={true} <Carousel items={row3} showLoves={true}
settings={{slidesToShow: 4, slidesToScroll: 0}} />, settings={{slidesToShow: 4, slidesToScroll: 0}} />,
<Carousel items={row4} showLoves={true} <Carousel items={row4} showLoves={true}
settings={{slidesToShow: 4, slidesToScroll: 0}} />, settings={{slidesToShow: 4, slidesToScroll: 0}} />
] ];
if (this.state.searchMore!=undefined && more.length<offset) more = more.concat(this.state.searchMore); if (this.state.searchMore!=undefined && more.length<offset) more = more.concat(this.state.searchMore);
if (more.length>0) { if (more.length>0) {
for (var i = 0; i<more.length; i+=4) { for (var i = 0; i<more.length; i+=4) {
var rowNext = more.slice(i,i+4); var rowNext = more.slice(i,i+4);
rows.push(<Carousel items={rowNext} showLoves={true} settings={{slidesToShow: 4, slidesToScroll: 0}} />); rows.push(<Carousel items={rowNext} showLoves={true}
settings={{slidesToShow: 4, slidesToScroll: 0}} />);
} }
} }
return rows; return rows;
}, },
getTab: function(type) { getTab: function (type) {
var allTab = <a href={"/search/"+type+"?q="+searchTerm+"/"}> var allTab = <a href={'/search/'+type+'?q='+searchTerm+'/'}>
<li> <li>
<FormattedMessage <FormattedMessage
id={'explore.'+type} id={'explore.'+type}
@ -104,8 +101,8 @@ var Search = injectIntl(React.createClass({
</li> </li>
</a>; </a>;
if (tab==type) { if (tab==type) {
allTab = <a href={"/search/"+type+"?q="+searchTerm+"/"}> allTab = <a href={'/search/'+type+'?q='+searchTerm+'/'}>
<li className="active"> <li className='active'>
<FormattedMessage <FormattedMessage
id={'explore.'+type} id={'explore.'+type}
defaultMessage={type.charAt(0).toUpperCase()+type.slice(1)} /> defaultMessage={type.charAt(0).toUpperCase()+type.slice(1)} />
@ -116,41 +113,21 @@ var Search = injectIntl(React.createClass({
}, },
render: function () { render: function () {
var projects = this.renderRows(); var projects = this.renderRows();
var classes = classNames(
'top-banner',
this.state.bgClass
);
return ( return (
<div> <div>
<div className="outer"> <div className='outer'>
<Box title={'Search Results:'} subtitle={searchTerm} <Box title={'Search Results:'} subtitle={searchTerm}
moreProps={{ moreProps={{
className: 'subnavigation' className: 'subnavigation'
}}> }}>
<Tabs> <Tabs>
{this.getTab("all")} {this.getTab('all')}
{this.getTab("projects")} {this.getTab('projects')}
{this.getTab("studios")} {this.getTab('studios')}
{/*<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> \\can be reused in the future if different sorts are added*/}
</Tabs> </Tabs>
<div id="projectBox" key="projectBox"> <div id='projectBox' key='projectBox'>
{projects} {projects}
<SubNavigation className="load"> <SubNavigation className='load'>
<button onClick={this.getSearchMore}> <button onClick={this.getSearchMore}>
<li> <li>
<FormattedMessage <FormattedMessage

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

@ -6,13 +6,13 @@ $base-bg: $ui-white;
#view { #view {
.box { .box {
display: block; display: block;
margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: auto;
} }
.box .box-content { .box .box-content {
padding: 0px; padding: 0;
} }
.carousel { .carousel {
@ -29,37 +29,19 @@ $base-bg: $ui-white;
height: 150px; 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;
}
#projectBox { #projectBox {
background-color: $ui-white;
width: 100%;
border-top: 2px solid; border-top: 2px solid;
border-color: $active-gray; border-color: $active-gray;
background-color: $ui-white;
padding-bottom: 30px; padding-bottom: 30px;
width: 100%;
} }
.load button { .load button {
border: None;
padding: 0px;
background-color: $ui-white;
outline: None; outline: None;
border: None;
background-color: $ui-white;
padding: 0;
li { li {
color: $header-gray; color: $header-gray;