scratchfoundation/scratchjr-website
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratchjr-website.git synced 2025-08-28 22:30:12 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

[WIP] Added react-router to About page, others are currently broken

Browse source
This commit is contained in:
chrisgarrity 2016-08-17 09:28:25 -04:00
parent 41d6ccac34
commit ecd7f64a68
22 changed files with 480 additions and 564 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/carousel/carousel.jsx
View file

@ -10,7 +10,11 @@ require('./carousel.scss');
*/ */
var Carousel = React.createClass({ var Carousel = React.createClass({
type: 'Carousel', type: 'Carousel',
propTypes: {
items: React.PropTypes.array
},
render: function () { render: function () {
/* TODO: allow override of default settings */
var settings = { var settings = {
dots: true, dots: true,
arrows: false, arrows: false,
@ -21,16 +25,10 @@ var Carousel = React.createClass({
speed: 500, speed: 500,
cssEase: 'linear' cssEase: 'linear'
}; };
var images= [
{id:'s1', url:'images/slide1.png'},
{id:'s2', url:'images/slide2.png'},
{id:'s3', url:'images/slide3.png'},
{id:'s4', url:'images/slide4.png'},
{id:'s5', url:'images/slide5.png'},
];
return ( return (
<Slider {... settings}> <Slider {... settings}>
{images.map((item, i) => { return (<div key={item.id} ><img src={item.url} /></div>) })} {this.props.items.map((item) => { return (<div key={item.id} ><img src={item.url} /></div>) })}
</Slider> </Slider>
); );
} }

12
src/components/navbar/navbar.jsx
View file

@ -14,33 +14,33 @@ var NavBar = React.createClass({
<div id="header"> <div id="header">
<a href="/"> <a href="/">
<div id="header-logo-wrapper"> <div id="header-logo-wrapper">
<img src="images/scratchjrlogo.png" id="header-logo" alt="ScratchJr Logo" /> <img src="/images/scratchjrlogo.png" id="header-logo" alt="ScratchJr Logo" />
</div> </div>
</a> </a>
<div id="header-nav"> <div id="header-nav">
<div className="header-nav-item-wrapper"> <div className="header-nav-item-wrapper">
<a href="about"> <a href="/about">
<div className={this.generateHeaderClasses("about")}> <div className={this.generateHeaderClasses("about")}>
About About
</div> </div>
</a> </a>
</div> </div>
<div className="header-nav-item-wrapper"> <div className="header-nav-item-wrapper">
<a href="learn"> <a href="/learn">
<div className={this.generateHeaderClasses("learn")}> <div className={this.generateHeaderClasses("learn")}>
Learn Learn
</div> </div>
</a> </a>
</div> </div>
<div className="header-nav-item-wrapper"> <div className="header-nav-item-wrapper">
<a href="teach"> <a href="/teach">
<div className={this.generateHeaderClasses("teach")}> <div className={this.generateHeaderClasses("teach")}>
Teach Teach
</div> </div>
</a> </a>
</div> </div>
<div className="header-nav-item-wrapper"> <div className="header-nav-item-wrapper">
<a href="donate"> <a href="/donate">
<div className={this.generateHeaderClasses("donate")}> <div className={this.generateHeaderClasses("donate")}>
Donate Donate
</div> </div>
@ -52,4 +52,4 @@ var NavBar = React.createClass({
} }
}); });
module.exports = NavBar; module.exports = NavBar;

33
src/components/sectionitem/sectionitem.jsx Normal file
View file

@ -0,0 +1,33 @@
import React from 'react';
import {Link} from 'react-router'
require('./sectionitem.scss');
var SectionItem = React.createClass({
type: 'SectionItem',
propTypes: {
title: React.PropTypes.string.isRequired,
format: React.PropTypes.oneOf(['full', 'half']).isRequired,
thumbnail: React.PropTypes.object.isRequired,
description: React.PropTypes.string.isRequired,
linkURL: React.PropTypes.string,
linkText: React.PropTypes.string
},
render: function() {
return (
<div className={"content-section-" + this.props.format + "-item"}>
<div className="content-section-item-title">
{this.props.title}
</div>
<div className="content-section-item-thumbnail">
{this.props.thumbnail}
</div>
<div className="content-section-item-description">
{this.props.description}
</div>
</div>
);
}
});
module.exports = SectionItem;

42
src/components/sectionitem/sectionitem.scss Normal file
View file

@ -0,0 +1,42 @@
.content-section-half-item {
display: inline-block;
padding-bottom: 30px;
clear: both;
width: 45%;
text-align: left;
vertical-align: top;
}
.content-section-items-container:after {
display:inline-block;
width:100%;
content:'';
height: 0;
}
.content-section-item-title {
padding-bottom: 10px;
font-weight: 900;
color: #2898cd;
width: 60%;
display: inline-block;
}
.content-section-item-thumbnail {
width:100%;
}
.content-section-item-thumbnail-image {
width: 100%;
border-radius: 20px;
}
.content-section-item-description {
width: 100%;
color: #808080;
font-size: 14px;
line-height: 22px;
padding-bottom: 10px;
padding-top: 10px;
display: inline-block;
}

68
src/components/tab-sections/about-sections/videos.jsx
View file

@ -1,68 +0,0 @@
import React from 'react';
var classNames = require('classnames');
var VideosSection = React.createClass({
render: function() {
return (
<div
className={classNames(
"content-section",
{"content-section-selected": this.props.sectionIndex == this.props.activeSectionIndex}
)}
id="videos-section">
<div className="content-section-title">
Videos
</div>
<div className="content-section-description">
Webinars for educators and parents
</div>
<div className="content-section-items-container">
<div className="content-section-half-item">
<div className="content-section-item-title">
Pre-Launch Webinar (March 2014)
</div>
<div className="content-section-item-thumbnail">
<iframe width="342" height="192" src="http://www.youtube.com/embed/owAA_IjdVUM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div className="content-section-item-description">
Project leaders Marina Bers and Mitch Resnick
demonstrate how to create a simple project, discuss ScratchJr features,
and share favorite stories from beta-testing the app in classrooms.
</div>
</div>
<div className="content-section-half-item">
<div className="content-section-item-title">
Post-Launch Webinar (August 2014)
</div>
<div className="content-section-item-thumbnail">
<iframe width="342" height="192" src="http://www.youtube.com/embed/mZAawCvDlBM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div className="content-section-item-description">
Project leaders Marina Bers and Mitch Resnick
respond to questions about the initial release of ScratchJr, and discuss
future directions for the programming environment.
</div>
</div>
<div className="content-section-half-item">
<div className="content-section-item-title">
EdWeb Webinar
</div>
<div className="content-section-item-thumbnail">
<iframe src="//player.vimeo.com/video/108504313?title=0&amp;byline=0&amp;portrait=0"
width="342" height="214" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="http://vimeo.com/108504313">EdWeb Webinar</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
<div className="content-section-item-description">
Research Coordinator Amanda Strawhacker explores pedagogy
around young children's programming languages, and presents affordances of digital playgrounds.
She discusses why programming is an important skill for early education.
</div>
</div>
</div>
</div>
);
}
});
module.exports = VideosSection;

68
src/components/tabnav/tabnav.jsx
View file

@ -1,49 +1,31 @@
import React from 'react'; import React from 'react';
import {Link} from 'react-router'
var tabLocations = ['left', 'middle', 'right']; // corresponds to css class: "content-nav-item-" + tabLocation
var TabNav = React.createClass({ var TabNav = React.createClass({
getInitialState: function() { type: 'TabNav',
return { propTypes: {
activeTabIndex: this.props.initialActiveTabIndex items: React.PropTypes.array
}; },
}, render: function() {
componentDidMount: function() {
// called once when component initially mounts return (
}, <div id="content-nav">
getTabLocation: function(index, numChildren) { // determine location of index in order to set css properly {this.props.items.map((tab, index) => {
if (index == 0) { return (
return tabLocations[0]; <Link to={tab.url} activeClassName="content-nav-item-selected" key={tab.section}>
} else if (index == numChildren - 1) { <div className="content-nav-item" id={tab.section + "-section-nav"}>
return tabLocations[2]; <div className={tab.section + "-icon content-nav-item-icon"}></div>
} else { <div className="content-nav-item-description">
return tabLocations[1]; {tab.text}
</div>
</div>
</Link>
);
})}
</div>
);
} }
},
switchTabs: function(newActiveTabIndex) {
this.setState({activeTabIndex: newActiveTabIndex}); // switch tab, will cause newly selected tab to highlight
this.props.switchSection(newActiveTabIndex); // parent will switch the section accordingly
},
render: function() {
var childrenWithProps = React.Children.map(
this.props.children,
(child, i) =>
React.cloneElement(
child,
{
tabIndex: i,
tabLocation: this.getTabLocation(i, React.Children.count(this.props.children)),
activeTabIndex: this.state.activeTabIndex,
switchTabs: this.switchTabs
}
)
);
return (
<div id="content-nav">
{childrenWithProps}
</div>
);
}
}); });
module.exports = TabNav; module.exports = TabNav;

4
src/routes.json
View file

@ -5,7 +5,7 @@
"title": "Home" "title": "Home"
}, },
{ {
"pattern": "/about", "pattern": "/about(/*)?",
"view": "about", "view": "about",
"title": "About" "title": "About"
}, },
@ -39,4 +39,4 @@
"view": "eula", "view": "eula",
"title": "Terms and Conditions" "title": "Terms and Conditions"
} }
] ]

41
src/template.html
View file

@ -1,31 +1,34 @@
<!DOCTYPE html> <!DOCTYPE html>
<!--[if lt IE 9 ]> <html class="ie8"> <![endif]--> <!--[if lt IE 9 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]--> <!--[if (gt IE 9)|!(IE)]><!-->
<head> <html>
<meta charset="UTF-8" /> <!--<![endif]-->
<meta http-equiv="x-ua-compatible" content="ie=edge"> <head>
<meta http-equiv="x-frame-options" content="deny"> <meta charset="UTF-8" />
<meta name="viewport" content="width=942, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/site.css"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style/style.css"> <meta name="viewport" content="width=942, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/content.css">
<script type="text/javascript">window.liveSettings={api_key:"5e440a933b4d46b8a37bc7627a1e76e0"}</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>
<title>ScratchJr - {{title}}</title> <link rel="stylesheet" type="text/css" href="/style/site.css">
</head> <link rel="stylesheet" type="text/css" href="/style/style.css">
<link rel="stylesheet" type="text/css" href="/style/content.css">
<script type="text/javascript">
window.liveSettings = {
api_key: "5e440a933b4d46b8a37bc7627a1e76e0"
}
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>
<body> <title>ScratchJr - {{title}}</title>
<div id="app"></div> </head>
<!-- Scripts --> <body>
<script type="text/javascript" src="js/lib/jquery-1.11.0.min.js"></script> <div id="app"></div>
<script src="/js/{{view}}.bundle.js"></script> <script src="/js/{{view}}.bundle.js"></script>
</body>
</body>
</html> </html>

95
src/views/about/about.jsx
View file

@ -1,47 +1,64 @@
var React = require('react'); import React from 'react'
var ReactDOM = require('react-dom'); import {render} from 'react-dom'
import {Router, Route, browserHistory, IndexRedirect, IndexRoute} from 'react-router'
import NavBar from '../../components/navbar/navbar.jsx'
import Footer from '../../components/footer/footer.jsx'
import TabNav from '../../components/tabnav/tabnav.jsx'
var NavBar = require('../../components/navbar/navbar.jsx'); import InfoSection from './info.jsx'
var Footer = require('../../components/footer/footer.jsx'); import PressSection from './press.jsx'
import FAQSection from './faq.jsx'
var Tabber = require('../../components/tabber/tabber.jsx'); import VideosSection from './videos.jsx'
var Tab = require('../../components/tab/tab.jsx');
var TabNav = require('../../components/tabnav/tabnav.jsx');
var TabSectionNav = require('../../components/tabsectionnav/tabsectionnav.jsx');
var InfoSection = require('../../components/tab-sections/about-sections/info.jsx');
var PressSection = require('../../components/tab-sections/about-sections/press.jsx');
var FAQSection = require('../../components/tab-sections/about-sections/faq.jsx');
var VideosSection = require('../../components/tab-sections/about-sections/videos.jsx');
require('./about.scss'); require('./about.scss');
var About = React.createClass({ var About = React.createClass({
type: 'About', type: 'About',
render: function() { render: function() {
return ( var tabs = [
<div> {
<NavBar selected="about"/> url: "/about/info",
text: "Info",
section: "info",
indexLink: false
}, {
url: "/about/press",
text: "Press",
section: "press",
indexLink: false
}, {
url: "/about/faq",
text: "FAQ",
section: "faq",
indexLink: false
}, {
url: "/about/videos",
text: "Videos",
section: "videos",
indexLink: false
}
<Tabber> ];
<TabNav> return (
<Tab tabId="info" title="Info" iconClass="info-icon" /> <div>
<Tab tabId="press" title="Press" iconClass="press-icon"/> <NavBar selected="about"/>
<Tab tabId="faq" title="FAQ" iconClass="faq-icon" /> <div id="content">
<Tab tabId="videos" title="Videos" iconClass="videos-icon" /> <TabNav items={tabs}/> {this.props.children}
</TabNav> </div>
<TabSectionNav> <Footer/>
<InfoSection /> </div>
<PressSection /> );
<FAQSection /> }
<VideosSection />
</TabSectionNav>
</Tabber>
<Footer />
</div>
);
}
}); });
ReactDOM.render(<About />, document.getElementById('app')); render((
<Router history={browserHistory}>
<Route path="/about" component={About}>
<Route path="info" component={InfoSection}/>
<Route path="press" component={PressSection}/>
<Route path="faq" component={FAQSection}/>
<Route path="videos" component={VideosSection}/>
<IndexRedirect to="info"/>
</Route>
</Router>
), document.getElementById('app'));

51
src/views/about/about.scss
View file

@ -1,46 +1,3 @@
.content-section-half-item {
display: inline-block;
padding-bottom: 30px;
clear: both;
width: 45%;
text-align: left;
vertical-align: top;
}
.content-section-items-container:after {
display:inline-block;
width:100%;
content:'';
height: 0;
}
.content-section-item-title {
padding-bottom: 10px;
font-weight: 900;
color: #2898cd;
width: 60%;
display: inline-block;
}
.content-section-item-thumbnail {
width:100%;
}
.content-section-item-thumbnail-image {
width: 100%;
border-radius: 20px;
}
.content-section-item-description {
width: 100%;
color: #808080;
font-size: 14px;
line-height: 22px;
padding-bottom: 10px;
padding-top: 10px;
display: inline-block;
}
#video-wrapper { #video-wrapper {
padding-top: 40px; padding-top: 40px;
text-align: center; text-align: center;
@ -90,7 +47,7 @@
background-size: 100%; background-size: 100%;
} }
.content-nav-item-selected > .info-icon { .content-nav-item-selected .info-icon {
background-image: url(/images/infos_o.svg); background-image: url(/images/infos_o.svg);
} }
@ -99,7 +56,7 @@
background-size: 100%; background-size: 100%;
} }
.content-nav-item-selected > .press-icon { .content-nav-item-selected .press-icon {
background-image: url(/images/press_o.svg); background-image: url(/images/press_o.svg);
} }
@ -108,7 +65,7 @@
background-size: 100%; background-size: 100%;
} }
.content-nav-item-selected > .videos-icon { .content-nav-item-selected .videos-icon {
background-image: url(/images/videos_o.svg); background-image: url(/images/videos_o.svg);
} }
@ -117,6 +74,6 @@
background-size: 100%; background-size: 100%;
} }
.content-nav-item-selected > .faq-icon { .content-nav-item-selected .faq-icon {
background-image: url(/images/faq_o.svg); background-image: url(/images/faq_o.svg);
} }

13
src/components/tab-sections/about-sections/faq.jsx → src/views/about/faq.jsx
View file

@ -1,16 +1,9 @@
import React from 'react'; import React from 'react';
var classNames = require('classnames');
var FAQSection = React.createClass({ var FAQSection = React.createClass({
render: function() { render: function() {
return ( return (
<div <div className="content-section" id="faq-section">
className={classNames(
"content-section",
{"content-section-selected": this.props.sectionIndex == this.props.activeSectionIndex}
)}
id="faq-section">
<div className="content-section-title"> <div className="content-section-title">
Frequently Asked Questions Frequently Asked Questions
</div> </div>
@ -25,7 +18,7 @@ var FAQSection = React.createClass({
<div className="content-description-section"> <div className="content-description-section">
<div className="content-description-question">Is there a book for ScratchJr?</div> <div className="content-description-question">Is there a book for ScratchJr?</div>
<div className="content-description-answer"><a href="https://www.nostarch.com/scratchjr" target="_blank"><img src="images/scratchjr-book.png" width="100" height="auto" style={{"float":"right"}}/></a>Yes, there is a guide to ScratchJr. Written by app creators Professor Marina Umaschi Bers and Mitchel Resnick of the Lifelong Kindergarten Group at the MIT Media Lab, this new book is an easy-to-use, hands on resource for parents and educators alike to teach children how to code with ScratchJr. Read an <a href="https://medium.com/scratchfoundation-blog/helping-young-children-experiment-explore-and-express-themselves-with-code-69a450d42005#.9fq210a4q" target="_blank">excerpt of the book</a>. You can buy your copy through <a href="https://www.nostarch.com/scratchjr" target="_blank">No Starch Press</a>!</div> <div className="content-description-answer"><a href="https://www.nostarch.com/scratchjr" target="_blank"><img src="/images/scratchjr-book.png" width="100" height="auto" style={{"float":"right"}}/></a>Yes, there is a guide to ScratchJr. Written by app creators Professor Marina Umaschi Bers and Mitchel Resnick of the Lifelong Kindergarten Group at the MIT Media Lab, this new book is an easy-to-use, hands on resource for parents and educators alike to teach children how to code with ScratchJr. Read an <a href="https://medium.com/scratchfoundation-blog/helping-young-children-experiment-explore-and-express-themselves-with-code-69a450d42005#.9fq210a4q" target="_blank">excerpt of the book</a>. You can buy your copy through <a href="https://www.nostarch.com/scratchjr" target="_blank">No Starch Press</a>!</div>
</div> </div>
<div className="content-description-section"> <div className="content-description-section">
@ -77,4 +70,4 @@ var FAQSection = React.createClass({
} }
}); });
module.exports = FAQSection; module.exports = FAQSection;

11
src/components/tab-sections/about-sections/info.jsx → src/views/about/info.jsx
View file

@ -1,16 +1,9 @@
import React from 'react'; import React from 'react';
var classNames = require('classnames');
var InfoSection = React.createClass({ var InfoSection = React.createClass({
render: function() { render: function() {
return ( return (
<div <div className="content-section" id="info-section">
className={classNames(
"content-section",
{"content-section-selected": this.props.sectionIndex == this.props.activeSectionIndex}
)}
id="info-section">
<div className="content-section-title"> <div className="content-section-title">
About ScratchJr About ScratchJr
</div> </div>
@ -66,4 +59,4 @@ var InfoSection = React.createClass({
} }
}); });
module.exports = InfoSection; module.exports = InfoSection;

11
src/components/tab-sections/about-sections/press.jsx → src/views/about/press.jsx
View file

@ -1,16 +1,9 @@
import React from 'react'; import React from 'react';
var classNames = require('classnames');
var PressSection = React.createClass({ var PressSection = React.createClass({
render: function() { render: function() {
return ( return (
<div <div className="content-section" id="press-section">
className={classNames(
"content-section",
{"content-section-selected": this.props.sectionIndex == this.props.activeSectionIndex}
)}
id="press-section">
<div className="content-section-title"> <div className="content-section-title">
Press Press
</div> </div>
@ -34,4 +27,4 @@ var PressSection = React.createClass({
} }
}); });
module.exports = PressSection; module.exports = PressSection;

32
src/views/about/videos.jsx Normal file
View file

@ -0,0 +1,32 @@
import React from 'react';
import SectionItem from '../../components/sectionitem/sectionitem.jsx'
var classNames = require('classnames');
var VideosSection = React.createClass({
render: function() {
return (
<div className="content-section" id="videos-section">
<div className="content-section-title">
Videos
</div>
<div className="content-section-description">
Webinars for educators and parents
</div>
<div className="content-section-items-container">
<SectionItem title="Pre-Launch Webinar (March 2014)" format="half" thumbnail={< iframe width = "342" height = "192" src = "http://www.youtube.com/embed/mZAawCvDlBM?rel=0" frameborder = "0" allowfullscreen > </iframe>} description="Project leaders Marina Bers and Mitch Resnick
demonstrate how to create a simple project, discuss ScratchJr features,
and share favorite stories from beta-testing the app in classrooms."/>
<SectionItem title="Post-Launch Webinar (August 2014)" format="half" thumbnail={< iframe width = "342" height = "192" src = "http://www.youtube.com/embed/owAA_IjdVUM?rel=0" frameborder = "0" allowfullscreen > </iframe>} description="Project leaders Marina Bers and Mitch Resnick
respond to questions about the initial release of ScratchJr, and discuss
future directions for the programming environment."/>
<SectionItem title="EdWeb Webinar" format="half" thumbnail={< iframe src = "//player.vimeo.com/video/108504313?title=0&amp;byline=0&amp;portrait=0" width = "342" height = "214" frameborder = "0" webkitallowfullscreen mozallowfullscreen allowfullscreen > </iframe>} description="Research Coordinator Amanda Strawhacker explores pedagogy
around young children's programming languages, and presents affordances of digital playgrounds.
She discusses why programming is an important skill for early education."/>
</div>
</div>
);
}
});
module.exports = VideosSection;

176
src/views/index/index.jsx
View file

@ -6,80 +6,118 @@ var NavBar = require('../../components/navbar/navbar.jsx');
var Carousel = require('../../components/carousel/carousel.jsx'); var Carousel = require('../../components/carousel/carousel.jsx');
var Footer = require('../../components/footer/footer.jsx'); var Footer = require('../../components/footer/footer.jsx');
require('./index.scss');
var Index = React.createClass({ var Index = React.createClass({
type: 'Index', type: 'Index',
render: function() { render: function() {
return ( var images = [
<div> {
<NavBar /> id: 's1',
<Carousel /> url: 'images/slide1.png'
}, {
id: 's2',
url: 'images/slide2.png'
}, {
id: 's3',
url: 'images/slide3.png'
}, {
id: 's4',
url: 'images/slide4.png'
}, {
id: 's5',
url: 'images/slide5.png'
}
];
return (
<div>
<NavBar/>
<Carousel items={images}/>
<div id="content"> <div id="content">
<div id="announcement-banner"> <div id="announcement-banner">
ScratchJr is available as a free app for <a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">iPads</a> and <a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">Android</a> tablets. ScratchJr is available as a free app for
</div> <a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">iPads</a>
and
<a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">Android</a>
tablets.
</div>
<div id="content-text"> <div id="content-text">
<div id="content-header-first"> <div id="content-header-first">
ScratchJr ScratchJr
</div> {/* end content-header-first */} </div>
<div id="content-header-second"> {/* end content-header-first */}
Coding for young children <div id="content-header-second">
</div> {/* end content-header-second */} Coding for young children
<div id="content-body"> </div>
Coding is the new literacy! With ScratchJr, young children (ages 5-7) can program their own interactive stories and games. In the process, they learn to solve problems, design projects, and express themselves creatively on the computer. {/* end content-header-second */}
<div id="store-badges"> <div id="content-body">
<a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8"> Coding is the new literacy! With ScratchJr, young children (ages 5-7) can program their own interactive stories and games. In the process, they learn to solve problems, design projects, and express themselves creatively on the computer.
<img alt="Download on the App Store"src="images/Apple_appstore.svg" /> <div id="store-badges">
</a> <a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">
<a href="https://play.google.com/store/apps/details?id=org.scratchjr.android"> <img alt="Download on the App Store" src="images/Apple_appstore.svg"/>
<img alt="Get it on Google Play" src="images/GooglePlay.svg" width="135px" height="40px"/> </a>
</a> <a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">
</div> {/* end store-badges */} <img alt="Get it on Google Play" src="images/GooglePlay.svg" width="135px" height="40px"/>
</div> {/* end content-body */} </a>
</div> {/* end content-text */} </div>
<div id="content-graphic"> {/* end store-badges */}
<img id="content-graphic-item" src="images/homegraphic.png" /> </div>
</div> {/* end content-graphic */} {/* end content-body */}
<div className="content-news"> </div>
<div className="content-news-header"> {/* end content-text */}
News <div id="content-graphic">
</div> <img id="content-graphic-item" src="images/homegraphic.png"/>
<div className="content-news-body"> </div>
ScratchJr is available on <a href="http://www.amazon.com/Scratch-Foundation-ScratchJr/dp/B01AKGTD2E" target="_blank">Amazon</a>. Now, kids can create interactive stories and games on Kindle! {/* end content-graphic */}
</div> <div className="content-news">
<div className="content-news-body"> <div className="content-news-header">
Newly released by <a href="https://www.nostarch.com/scratchjr" target="_blank">No Starch Press</a>, <a href="about#faq">The Official ScratchJr Book</a>The Official ScratchJr Book is now available in paperback or ebook format! News
</div> </div>
</div> <div className="content-news-body">
ScratchJr is available on
<a href="http://www.amazon.com/Scratch-Foundation-ScratchJr/dp/B01AKGTD2E" target="_blank">Amazon</a>. Now, kids can create interactive stories and games on Kindle!
</div>
<div className="content-news-body">
Newly released by
<a href="https://www.nostarch.com/scratchjr" target="_blank">No Starch Press</a>,
<a href="about#faq">The Official ScratchJr Book</a>The Official ScratchJr Book is now available in paperback or ebook format!
</div>
</div>
<div id="discussion-container"> <div id="discussion-container">
<div id="discussion-text"> <div id="discussion-text">
<div id="discussion-header"> <div id="discussion-header">
Join the Discussion Join the Discussion
</div> </div>
<div id="discussion-body"> <div id="discussion-body">
We introduced ourselves. Now it's your turn. Drop us a line with feedback, report bugs &amp; glitches, or just say "hi!" <br></br> We introduced ourselves. Now it's your turn. Drop us a line with feedback, report bugs &amp; glitches, or just say "hi!"
<br></br>
<a href=" https://twitter.com/intent/tweet?screen_name=ScratchJr"> <a href=" https://twitter.com/intent/tweet?screen_name=ScratchJr">
<div className="blue-button"> <div className="blue-button">
Tweet @ScratchJr Tweet @ScratchJr
</div> </div>
</a> </a>
</div> </div>
</div>
<div id="disscussion-tweets">
<Timeline widgetId={'618881920324079616'} options={{
username: 'ScratchJr',
width: '425',
height: '250',
chrome: 'noheader nofooter'
}}/>
</div>
</div>
</div>
{/* end content */}
<Footer/>
</div> </div>
<div id="disscussion-tweets"> );
<Timeline }
widgetId={'618881920324079616'}
options={{username: 'ScratchJr', width: '425', height: '250', chrome: 'noheader nofooter'}}
/>
</div>
</div>
</div> {/* end content */}
<Footer />
</div>
);
}
}); });
ReactDOM.render(<Index />, document.getElementById('app')); ReactDOM.render(
<Index/>, document.getElementById('app'));

133
src/views/index/index.scss Normal file
View file

@ -0,0 +1,133 @@
#content-text {
background-color: white;
width: 49%;
float: left;
}
#content-graphic {
background-color: white;
width: 49%;
float: right;
text-align: center;
}
#content-graphic-item {
width: 100%;
}
#content-header-first {
color: #7f7f7f;
font-size: 28px;
margin-top: 24px;
margin-left: 40px;
}
#content-header-second {
color: #f5a322;
margin-left: 40px;
font-size: 20px;
}
#content-body {
font-family: "Lucida Grande", arial, sans-serif;
margin-top: 45px;
margin-left: 40px;
color: #808080;
font-size: 14pt;
line-height: 22pt;
}
/* Index page News */
.content-news {
background-color: white;
width: 90%;
float: left;
}
.content-news-header {
color: #7f7f7f;
font-size: 28px;
margin-top: 24px;
margin-left: 40px;
}
.content-news-body {
font-family: "Lucida Grande", arial, sans-serif;
margin-top: 20px;
margin-left: 40px;
margin-bottom: 10px;
color: #808080;
font-size: 14pt;
line-height: 22pt;
}
#store-badges {
margin-left: 0px;
}
#store-badges img {
float: left;
margin: 10px 30px 10px 0;
}
#announcement-banner {
text-align: center;
background-color: #f5a322;
color: white;
height: 60px;
line-height: 60px;
font-size: 18px;
letter-spacing: .5px;
}
#discussion-container {
width: 100%;
clear: both;
background-color: #e9e9e9;
padding-top: 20px;
padding-bottom: 20px;
}
#discussion-container::after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0px;
}
#discussion-text {
width:50%;
float:left;
}
#discussion-header {
color: #555;
margin-top: 32px;
margin-left: 40px;
font-size: 20px;
}
#discussion-body {
font-family: "Lucida Grande", arial, sans-serif;
margin-top: 12px;
margin-left: 40px;
margin-right: 25px;
color: #808080;
font-size: 14pt;
line-height: 22pt;
}
#disscussion-tweets {
width: 50%;
float: right;
}
.timeline-header {
display: none;
}
#announcement-banner > a {
color: white;
text-decoration: none;
border-bottom: 2px solid;
}

55
static/js/lib/content-nav.js
View file

@ -1,55 +0,0 @@
// navigation links are hashes where the target is the id of the content div
// e.g. href='#activities' will show the content-section div with id='activities-section'
// nav items should have id <target>-nav e.g. activities-nav
// content sections should have id <target>-section e.g. activities-section
// read-more items should have an id, the target section should have id <target>-section
$(function() {
// add read-more link to related item thumbnail image and title
$(".content-section-item-thumbnail-image").wrap(function() {
return $(this).parent().siblings().find($(".read-more")).clone().text("");
} );
$(".content-section-item-title").wrapInner(function() {
return $(this).siblings().find($(".read-more")).clone().text("");
} );
// load the correct content based on URL if there is a #hash
var hash = location.hash.substr(1);
if (hash){
if ($('#'+hash+'-section').length) {
updateContent(hash+'-section');
updateCategory(hash+'-nav');
} else {
updateContent(hash);
var category = $(".read-more#"+hash).closest($(".content-section")).attr('id').replace("section", "nav");
updateCategory(category);
}
}
});
$(document).on('click', '.content-nav-item', function(e) {
updateContent($(this).attr('id').replace('nav', 'section'));
updateCategory($(this).attr('id'));
});
$(document).on('click', '.read-more', function(e) {
updateContent($(this).attr('id')+"-section");
});
function updateContent(sectionId) {
var section = $("#"+sectionId);
if(section.length) {
$('.content-section').removeClass('content-section-selected');
section.addClass('content-section-selected');
if($(".content-section-selected.content-subpage").length) {
$('html,body').scrollTop($("#content").offset().top);
}
}
}
function updateCategory(navId) {
if($("#"+navId).length) {
$('.content-nav-item').removeClass('content-nav-item-selected');
$("#"+navId).addClass('content-nav-item-selected');
}
}

8
static/js/lib/responsiveslides.min.js vendored
View file

@ -1,8 +0,0 @@
/*! http://responsiveslides.com v1.54 by @viljamis */
(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);

4
static/js/lib/simple-expand.min.js vendored
View file

@ -1,4 +0,0 @@
/* Copyright (C) 2012 Sylvain Hamel
Project: https://github.com/redhotsly/simple-expand
MIT Licence: https://raw.github.com/redhotsly/simple-expand/master/licence-mit.txt */
(function($){"use strict";function SimpleExpand(){var that=this;that.defaults={hideMode:"fadeToggle",defaultSearchMode:"parent",defaultTarget:".content",throwOnMissingTarget:true,keepStateInCookie:false,cookieName:"simple-expand"};that.settings={};$.extend(that.settings,that.defaults);that.findLevelOneDeep=function(parent,filterSelector,stopAtSelector){return parent.find(filterSelector).filter(function(){return!$(this).parentsUntil(parent,stopAtSelector).length})};that.setInitialState=function(expander,targets){var isExpanded=that.readState(expander);if(isExpanded){expander.removeClass("collapsed").addClass("expanded");that.show(targets)}else{expander.removeClass("expanded").addClass("collapsed");that.hide(targets)}};that.hide=function(targets){if(that.settings.hideMode==="fadeToggle"){targets.hide()}else if(that.settings.hideMode==="basic"){targets.hide()}};that.show=function(targets){if(that.settings.hideMode==="fadeToggle"){targets.show()}else if(that.settings.hideMode==="basic"){targets.show()}};that.checkKeepStateInCookiePreconditions=function(){if(that.settings.keepStateInCookie&&$.cookie===undefined){throw new Error("simple-expand: keepStateInCookie option requires $.cookie to be defined.")}};that.readCookie=function(){var jsonString=$.cookie(that.settings.cookieName);if(jsonString===null||jsonString===""){return{}}else{return JSON.parse(jsonString)}};that.readState=function(expander){if(!that.settings.keepStateInCookie){return expander.hasClass("expanded")}var id=expander.attr("Id");if(id===undefined){return}var cookie=that.readCookie();var cookieValue=cookie[id];if(typeof cookieValue!=="undefined"){return cookie[id]===true}else{return expander.hasClass("expanded")}};that.saveState=function(expander,isExpanded){if(!that.settings.keepStateInCookie){return}var id=expander.attr("Id");if(id===undefined){return}var cookie=that.readCookie();cookie[id]=isExpanded;$.cookie(that.settings.cookieName,JSON.stringify(cookie),{raw:true,path:window.location.pathname})};that.toggle=function(expander,targets){var isExpanded=that.toggleCss(expander);if(that.settings.hideMode==="fadeToggle"){targets.fadeToggle(150)}else if(that.settings.hideMode==="basic"){targets.toggle()}else if($.isFunction(that.settings.hideMode)){that.settings.hideMode(expander,targets,isExpanded)}that.saveState(expander,isExpanded);return false};that.toggleCss=function(expander){if(expander.hasClass("expanded")){expander.toggleClass("collapsed expanded");return false}else{expander.toggleClass("expanded collapsed");return true}};that.findTargets=function(expander,searchMode,targetSelector){var targets=[];if(searchMode==="absolute"){targets=$(targetSelector)}else if(searchMode==="relative"){targets=that.findLevelOneDeep(expander,targetSelector,targetSelector)}else if(searchMode==="parent"){var parent=expander.parent();do{targets=that.findLevelOneDeep(parent,targetSelector,targetSelector);if(targets.length===0){parent=parent.parent()}}while(targets.length===0&&parent.length!==0)}return targets};that.activate=function(jquery,options){$.extend(that.settings,options);that.checkKeepStateInCookiePreconditions();jquery.each(function(){var expander=$(this);var targetSelector=expander.attr("data-expander-target")||that.settings.defaultTarget;var searchMode=expander.attr("data-expander-target-search")||that.settings.defaultSearchMode;var targets=that.findTargets(expander,searchMode,targetSelector);if(targets.length===0){if(that.settings.throwOnMissingTarget){throw"simple-expand: Targets not found"}return this}that.setInitialState(expander,targets);expander.click(function(){return that.toggle(expander,targets)})})}}window.SimpleExpand=SimpleExpand;$.fn.simpleexpand=function(options){var instance=new SimpleExpand;instance.activate(this,options);return this}})(jQuery);

6
static/style/content.css
View file

@ -7,11 +7,9 @@
overflow: auto; overflow: auto;
} }
.content-section { /* TODO: Content section should simply be the 'selected' style. selected style is unnedded */
display: none;
}
.content-section-selected { .content-section {
padding-top: 3px; padding-top: 3px;
margin-left: 70px; margin-left: 70px;
margin-right: 70px; margin-right: 70px;

7
static/style/site.css
View file

@ -74,6 +74,9 @@ h1 {
cursor:pointer; cursor:pointer;
} }
#content-nav a:last-child .content-nav-item {
border-right: none;
}
.content-nav-item-selected { .content-nav-item-selected {
color: #2898CD; color: #2898CD;
} }
@ -98,10 +101,6 @@ h1 {
} }
.content-nav-item-right{
border-right: none;
}
.content-nav-item-icon { .content-nav-item-icon {
width: 77px; width: 77px;
height: 77px; height: 77px;

160
static/style/style.css
View file

@ -1,161 +1 @@
.slideshow {
width: 900px;
margin-left: auto;
margin-right: auto;
height: 507px;
background-color: white;
}
img { display: block; } img { display: block; }
.slide-hidden {
width: 900px;
height: 461px;
display: none;
}
.slide-current {
width: 900px;
height: 461px;
}
#content {
background-color: white;
width: 900px;
margin: auto;
display: block;
overflow: hidden;
}
#content-text {
background-color: white;
width: 49%;
float: left;
}
#content-graphic {
background-color: white;
width: 49%;
float: right;
text-align: center;
}
#content-graphic-item {
width: 100%;
}
#content-header-first {
color: #7f7f7f;
font-size: 28px;
margin-top: 24px;
margin-left: 40px;
}
#content-header-second {
color: #f5a322;
margin-left: 40px;
font-size: 20px;
}
#content-body {
font-family: "Lucida Grande", arial, sans-serif;
margin-top: 45px;
margin-left: 40px;
color: #808080;
font-size: 14pt;
line-height: 22pt;
}
/* Index page News */
.content-news {
background-color: white;
width: 90%;
float: left;
}
.content-news-header {
color: #7f7f7f;
font-size: 28px;
margin-top: 24px;
margin-left: 40px;
}
.content-news-body {
font-family: "Lucida Grande", arial, sans-serif;
margin-top: 20px;
margin-left: 40px;
margin-bottom: 10px;
color: #808080;
font-size: 14pt;
line-height: 22pt;
}
#store-badges {
margin-left: 0px;
}
#store-badges img {
float: left;
margin: 10px 30px 10px 0;
}
#announcement-banner {
text-align: center;
background-color: #f5a322;
color: white;
height: 60px;
line-height: 60px;
font-size: 18px;
letter-spacing: .5px;
}
#discussion-container {
width: 100%;
clear: both;
background-color: #e9e9e9;
padding-top: 20px;
padding-bottom: 20px;
}
#discussion-container::after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0px;
}
#discussion-text {
width:50%;
float:left;
}
#discussion-header {
color: #555;
margin-top: 32px;
margin-left: 40px;
font-size: 20px;
}
#discussion-body {
font-family: "Lucida Grande", arial, sans-serif;
margin-top: 12px;
margin-left: 40px;
margin-right: 25px;
color: #808080;
font-size: 14pt;
line-height: 22pt;
}
#disscussion-tweets {
width: 50%;
float: right;
}
.timeline-header {
display: none;
}
#announcement-banner > a {
color: white;
text-decoration: none;
border-bottom: 2px solid;
}