mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 15:47:53 -05:00
Style changes
Changes to style for lint tests
This commit is contained in:
Rachel Thornton
parent
eb499c929c
commit
fdd78a5433
6 changed files with 116 additions and 198 deletions
|
|
@ -76,9 +76,9 @@ $base-bg: $ui-white;
|
|||
h2 {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding-left: 5px;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
padding-left:5px;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -1,39 +1,39 @@
|
|||
@import "../../colors";
|
||||
|
||||
.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 {
|
||||
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;
|
||||
color: $header-gray;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-color: $active-gray;
|
||||
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;
|
||||
background-color: $ui-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tabs li.active {
|
||||
opacity: 1;
|
||||
border-bottom: 4px solid $ui-white;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: $header-gray;
|
||||
border-bottom: 4px solid $ui-white;
|
||||
background-color: $ui-white;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-bottom: 4px solid $ui-white;
|
||||
background-color: $ui-white;
|
||||
color: $header-gray;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
var injectIntl = require('react-intl').injectIntl;
|
||||
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');
|
||||
|
|
@ -8,16 +6,14 @@ var render = require('../../lib/render.jsx');
|
|||
var Api = require('../../mixins/api.jsx');
|
||||
|
||||
var Page = require('../../components/page/www/page.jsx');
|
||||
var Button = require('../../components/forms/button.jsx');
|
||||
var Box = require('../../components/box/box.jsx');
|
||||
var Tabs = require('../../components/tabs/tabs.jsx');
|
||||
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
||||
var Carousel = require('../../components/carousel/carousel.jsx');
|
||||
var Select = require('../../components/forms/select.jsx');
|
||||
var offset = 0;
|
||||
var more = [];
|
||||
var tab = "all";
|
||||
var acceptableTabs = ["all","animations","art","games","music","stories"];
|
||||
var tab = 'all';
|
||||
var acceptableTabs = ['all','animations','art','games','music','stories'];
|
||||
|
||||
require('./explore.scss');
|
||||
|
||||
|
|
@ -31,21 +27,21 @@ var Explore = injectIntl(React.createClass({
|
|||
},
|
||||
componentDidMount: function () {
|
||||
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);
|
||||
};
|
||||
var slash = pathname.lastIndexOf("/");
|
||||
}
|
||||
var slash = pathname.lastIndexOf('/');
|
||||
tab = pathname.substring(slash+1,pathname.length).toLowerCase();
|
||||
if (acceptableTabs.indexOf(tab)==-1) {
|
||||
window.location=window.location.origin+"/explore/projects/all/";
|
||||
window.location=window.location.origin+'/explore/projects/all/';
|
||||
}
|
||||
this.getExploreAll(0);
|
||||
},
|
||||
getExploreAll: function () {
|
||||
var tabText = '';
|
||||
if (tab!="all") {
|
||||
tabText = "&q="+tab;
|
||||
};
|
||||
if (tab!='all') {
|
||||
tabText = '&q='+tab;
|
||||
}
|
||||
this.api({
|
||||
uri: '/search/projects?limit=16'+tabText
|
||||
}, function (err, body) {
|
||||
|
|
@ -54,9 +50,9 @@ var Explore = injectIntl(React.createClass({
|
|||
},
|
||||
getExploreMore: function () {
|
||||
var tabText = '';
|
||||
if (tab!="all") {
|
||||
tabText = "&q="+tab;
|
||||
};
|
||||
if (tab!='all') {
|
||||
tabText = '&q='+tab;
|
||||
}
|
||||
offset+=16;
|
||||
this.api({
|
||||
uri: '/search/projects?limit=16&offset='+offset+tabText
|
||||
|
|
@ -74,26 +70,27 @@ var Explore = injectIntl(React.createClass({
|
|||
row4 = row4.slice(12,16);
|
||||
}
|
||||
var rows = [
|
||||
<Carousel items={this.state.exploreAll} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row2} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row3} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row4} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
]
|
||||
<Carousel items={this.state.exploreAll} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row2} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row3} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row4} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />
|
||||
];
|
||||
if (this.state.exploreMore!=undefined && more.length<offset) more = more.concat(this.state.exploreMore);
|
||||
if (more.length>0) {
|
||||
for (var i = 0; i<more.length; 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;
|
||||
},
|
||||
getTab: function(type) {
|
||||
var allTab = <a href={"/explore/projects/"+type+"/"}>
|
||||
getTab: function (type) {
|
||||
var allTab = <a href={'/explore/projects/'+type+'/'}>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id={'explore.'+type}
|
||||
|
|
@ -101,56 +98,36 @@ var Explore = injectIntl(React.createClass({
|
|||
</li>
|
||||
</a>;
|
||||
if (tab==type) {
|
||||
allTab = <a href={"/explore/projects/"+type+"/"}>
|
||||
<li className="active">
|
||||
allTab = <a href={'/explore/projects/'+type+'/'}>
|
||||
<li className='active'>
|
||||
<FormattedMessage
|
||||
id={'explore.'+type}
|
||||
defaultMessage={type.charAt(0).toUpperCase()+type.slice(1)} />
|
||||
</li>
|
||||
</a>;
|
||||
}
|
||||
return allTab
|
||||
return allTab;
|
||||
},
|
||||
render: function () {
|
||||
var projects = this.renderRows();
|
||||
var classes = classNames(
|
||||
'top-banner',
|
||||
this.state.bgClass
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<div className="outer">
|
||||
<div className='outer'>
|
||||
<Box title={'Explore'}
|
||||
moreProps={{
|
||||
moreProps={{
|
||||
className: 'subnavigation'
|
||||
}}>
|
||||
}}>
|
||||
<Tabs>
|
||||
{this.getTab("all")}
|
||||
{this.getTab("animations")}
|
||||
{this.getTab("art")}
|
||||
{this.getTab("games")}
|
||||
{this.getTab("music")}
|
||||
{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*/}
|
||||
{this.getTab('all')}
|
||||
{this.getTab('animations')}
|
||||
{this.getTab('art')}
|
||||
{this.getTab('games')}
|
||||
{this.getTab('music')}
|
||||
{this.getTab('stories')}
|
||||
</Tabs>
|
||||
<div id="projectBox" key="projectBox">
|
||||
<div id='projectBox' key='projectBox'>
|
||||
{projects}
|
||||
<SubNavigation className="load">
|
||||
<SubNavigation className='load'>
|
||||
<button onClick={this.getExploreMore}>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@ $base-bg: $ui-white;
|
|||
#view {
|
||||
.box {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 20px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.box .box-content {
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
|
|
@ -29,37 +29,19 @@ $base-bg: $ui-white;
|
|||
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 {
|
||||
background-color: $ui-white;
|
||||
width: 100%;
|
||||
border-top: 2px solid;
|
||||
border-color: $active-gray;
|
||||
background-color: $ui-white;
|
||||
padding-bottom: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.load button {
|
||||
border: None;
|
||||
padding: 0px;
|
||||
background-color: $ui-white;
|
||||
outline: None;
|
||||
border: None;
|
||||
background-color: $ui-white;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
color: $header-gray;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
var injectIntl = require('react-intl').injectIntl;
|
||||
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');
|
||||
|
|
@ -8,16 +6,14 @@ var render = require('../../lib/render.jsx');
|
|||
var Api = require('../../mixins/api.jsx');
|
||||
|
||||
var Page = require('../../components/page/www/page.jsx');
|
||||
var Button = require('../../components/forms/button.jsx');
|
||||
var Box = require('../../components/box/box.jsx');
|
||||
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
||||
var Tabs = require('../../components/tabs/tabs.jsx');
|
||||
var Carousel = require('../../components/carousel/carousel.jsx');
|
||||
var Select = require('../../components/forms/select.jsx');
|
||||
var offset = 0;
|
||||
var more = [];
|
||||
var tab = "projects";
|
||||
var searchTerm = "";
|
||||
var tab = 'projects';
|
||||
var searchTerm = '';
|
||||
|
||||
require('./search.scss');
|
||||
|
||||
|
|
@ -31,24 +27,24 @@ var Search = injectIntl(React.createClass({
|
|||
},
|
||||
componentDidMount: function () {
|
||||
var pathname = window.location.search;
|
||||
var q = pathname.lastIndexOf("q=");
|
||||
var q = pathname.lastIndexOf('q=');
|
||||
if (q!=-1) {
|
||||
searchTerm = pathname.substring(q+2,pathname.length).toLowerCase();
|
||||
};
|
||||
while (searchTerm.indexOf("/")>-1) {
|
||||
searchTerm = searchTerm.substring(0,searchTerm.indexOf("/"));
|
||||
}
|
||||
while (searchTerm.indexOf("&")>-1) {
|
||||
searchTerm = searchTerm.substring(0,searchTerm.indexOf("&"));
|
||||
while (searchTerm.indexOf('/')>-1) {
|
||||
searchTerm = searchTerm.substring(0,searchTerm.indexOf('/'));
|
||||
}
|
||||
while (searchTerm.indexOf('&')>-1) {
|
||||
searchTerm = searchTerm.substring(0,searchTerm.indexOf('&'));
|
||||
}
|
||||
searchTerm = searchTerm.split('+').join(' ');
|
||||
this.getSearchResults(0);
|
||||
},
|
||||
getSearchResults: function () {
|
||||
var termText = '';
|
||||
if (searchTerm!="") {
|
||||
termText = "&q="+searchTerm;
|
||||
};
|
||||
if (searchTerm!='') {
|
||||
termText = '&q='+searchTerm;
|
||||
}
|
||||
this.api({
|
||||
uri: '/search/projects?limit=16'+termText
|
||||
}, function (err, body) {
|
||||
|
|
@ -57,9 +53,9 @@ var Search = injectIntl(React.createClass({
|
|||
},
|
||||
getSearchMore: function () {
|
||||
var termText = '';
|
||||
if (searchTerm!="") {
|
||||
termText = "&q="+searchTerm;
|
||||
};
|
||||
if (searchTerm!='') {
|
||||
termText = '&q='+searchTerm;
|
||||
}
|
||||
offset+=16;
|
||||
this.api({
|
||||
uri: '/search/projects?limit=16&offset='+offset+termText
|
||||
|
|
@ -77,26 +73,27 @@ var Search = injectIntl(React.createClass({
|
|||
row4 = row4.slice(12,16);
|
||||
}
|
||||
var rows = [
|
||||
<Carousel items={this.state.searchResults} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row2} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row3} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row4} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
]
|
||||
<Carousel items={this.state.searchResults} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row2} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row3} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={row4} showLoves={true}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />
|
||||
];
|
||||
if (this.state.searchMore!=undefined && more.length<offset) more = more.concat(this.state.searchMore);
|
||||
if (more.length>0) {
|
||||
for (var i = 0; i<more.length; 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;
|
||||
},
|
||||
getTab: function(type) {
|
||||
var allTab = <a href={"/search/"+type+"?q="+searchTerm+"/"}>
|
||||
getTab: function (type) {
|
||||
var allTab = <a href={'/search/'+type+'?q='+searchTerm+'/'}>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id={'explore.'+type}
|
||||
|
|
@ -104,8 +101,8 @@ var Search = injectIntl(React.createClass({
|
|||
</li>
|
||||
</a>;
|
||||
if (tab==type) {
|
||||
allTab = <a href={"/search/"+type+"?q="+searchTerm+"/"}>
|
||||
<li className="active">
|
||||
allTab = <a href={'/search/'+type+'?q='+searchTerm+'/'}>
|
||||
<li className='active'>
|
||||
<FormattedMessage
|
||||
id={'explore.'+type}
|
||||
defaultMessage={type.charAt(0).toUpperCase()+type.slice(1)} />
|
||||
|
|
@ -116,41 +113,21 @@ var Search = injectIntl(React.createClass({
|
|||
},
|
||||
render: function () {
|
||||
var projects = this.renderRows();
|
||||
var classes = classNames(
|
||||
'top-banner',
|
||||
this.state.bgClass
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<div className="outer">
|
||||
<div className='outer'>
|
||||
<Box title={'Search Results:'} subtitle={searchTerm}
|
||||
moreProps={{
|
||||
moreProps={{
|
||||
className: 'subnavigation'
|
||||
}}>
|
||||
}}>
|
||||
<Tabs>
|
||||
{this.getTab("all")}
|
||||
{this.getTab("projects")}
|
||||
{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*/}
|
||||
{this.getTab('all')}
|
||||
{this.getTab('projects')}
|
||||
{this.getTab('studios')}
|
||||
</Tabs>
|
||||
<div id="projectBox" key="projectBox">
|
||||
<div id='projectBox' key='projectBox'>
|
||||
{projects}
|
||||
<SubNavigation className="load">
|
||||
<SubNavigation className='load'>
|
||||
<button onClick={this.getSearchMore}>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@ $base-bg: $ui-white;
|
|||
#view {
|
||||
.box {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 20px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.box .box-content {
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
|
|
@ -29,37 +29,19 @@ $base-bg: $ui-white;
|
|||
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 {
|
||||
background-color: $ui-white;
|
||||
width: 100%;
|
||||
border-top: 2px solid;
|
||||
border-color: $active-gray;
|
||||
background-color: $ui-white;
|
||||
padding-bottom: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.load button {
|
||||
border: None;
|
||||
padding: 0px;
|
||||
background-color: $ui-white;
|
||||
outline: None;
|
||||
border: None;
|
||||
background-color: $ui-white;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
color: $header-gray;
|
||||
|
|
|
|||
Loading…
Reference in a new issue