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

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

View file

@ -10,7 +10,11 @@ require('./carousel.scss');
*/
var Carousel = React.createClass({
type: 'Carousel',
propTypes: {
items: React.PropTypes.array
},
render: function () {
/* TODO: allow override of default settings */
var settings = {
dots: true,
arrows: false,
@ -21,16 +25,10 @@ var Carousel = React.createClass({
speed: 500,
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 (
<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>
);
}

View file

@ -14,33 +14,33 @@ var NavBar = React.createClass({
<div id="header">
<a href="/">
<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>
</a>
<div id="header-nav">
<div className="header-nav-item-wrapper">
<a href="about">
<a href="/about">
<div className={this.generateHeaderClasses("about")}>
About
</div>
</a>
</div>
<div className="header-nav-item-wrapper">
<a href="learn">
<a href="/learn">
<div className={this.generateHeaderClasses("learn")}>
Learn
</div>
</a>
</div>
<div className="header-nav-item-wrapper">
<a href="teach">
<a href="/teach">
<div className={this.generateHeaderClasses("teach")}>
Teach
</div>
</a>
</div>
<div className="header-nav-item-wrapper">
<a href="donate">
<a href="/donate">
<div className={this.generateHeaderClasses("donate")}>
Donate
</div>
@ -52,4 +52,4 @@ var NavBar = React.createClass({
}
});
module.exports = NavBar;
module.exports = NavBar;

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;

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

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;

View file

@ -1,49 +1,31 @@
import React from 'react';
var tabLocations = ['left', 'middle', 'right']; // corresponds to css class: "content-nav-item-" + tabLocation
import {Link} from 'react-router'
var TabNav = React.createClass({
getInitialState: function() {
return {
activeTabIndex: this.props.initialActiveTabIndex
};
},
componentDidMount: function() {
// called once when component initially mounts
},
getTabLocation: function(index, numChildren) { // determine location of index in order to set css properly
if (index == 0) {
return tabLocations[0];
} else if (index == numChildren - 1) {
return tabLocations[2];
} else {
return tabLocations[1];
type: 'TabNav',
propTypes: {
items: React.PropTypes.array
},
render: function() {
return (
<div id="content-nav">
{this.props.items.map((tab, index) => {
return (
<Link to={tab.url} activeClassName="content-nav-item-selected" key={tab.section}>
<div className="content-nav-item" id={tab.section + "-section-nav"}>
<div className={tab.section + "-icon content-nav-item-icon"}></div>
<div className="content-nav-item-description">
{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;

View file

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

View file

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

View file

@ -1,47 +1,64 @@
var React = require('react');
var ReactDOM = require('react-dom');
import React from 'react'
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');
var Footer = require('../../components/footer/footer.jsx');
var Tabber = require('../../components/tabber/tabber.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');
import InfoSection from './info.jsx'
import PressSection from './press.jsx'
import FAQSection from './faq.jsx'
import VideosSection from './videos.jsx'
require('./about.scss');
var About = React.createClass({
type: 'About',
render: function() {
return (
<div>
<NavBar selected="about"/>
type: 'About',
render: function() {
var tabs = [
{
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>
<Tab tabId="info" title="Info" iconClass="info-icon" />
<Tab tabId="press" title="Press" iconClass="press-icon"/>
<Tab tabId="faq" title="FAQ" iconClass="faq-icon" />
<Tab tabId="videos" title="Videos" iconClass="videos-icon" />
</TabNav>
<TabSectionNav>
<InfoSection />
<PressSection />
<FAQSection />
<VideosSection />
</TabSectionNav>
</Tabber>
<Footer />
</div>
);
}
];
return (
<div>
<NavBar selected="about"/>
<div id="content">
<TabNav items={tabs}/> {this.props.children}
</div>
<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'));

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 {
padding-top: 40px;
text-align: center;
@ -90,7 +47,7 @@
background-size: 100%;
}
.content-nav-item-selected > .info-icon {
.content-nav-item-selected .info-icon {
background-image: url(/images/infos_o.svg);
}
@ -99,7 +56,7 @@
background-size: 100%;
}
.content-nav-item-selected > .press-icon {
.content-nav-item-selected .press-icon {
background-image: url(/images/press_o.svg);
}
@ -108,7 +65,7 @@
background-size: 100%;
}
.content-nav-item-selected > .videos-icon {
.content-nav-item-selected .videos-icon {
background-image: url(/images/videos_o.svg);
}
@ -117,6 +74,6 @@
background-size: 100%;
}
.content-nav-item-selected > .faq-icon {
.content-nav-item-selected .faq-icon {
background-image: url(/images/faq_o.svg);
}

View file

@ -1,16 +1,9 @@
import React from 'react';
var classNames = require('classnames');
var FAQSection = React.createClass({
render: function() {
return (
<div
className={classNames(
"content-section",
{"content-section-selected": this.props.sectionIndex == this.props.activeSectionIndex}
)}
id="faq-section">
<div className="content-section" id="faq-section">
<div className="content-section-title">
Frequently Asked Questions
</div>
@ -25,7 +18,7 @@ var FAQSection = React.createClass({
<div className="content-description-section">
<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 className="content-description-section">
@ -77,4 +70,4 @@ var FAQSection = React.createClass({
}
});
module.exports = FAQSection;
module.exports = FAQSection;

View file

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

View file

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

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;

View file

@ -6,80 +6,118 @@ var NavBar = require('../../components/navbar/navbar.jsx');
var Carousel = require('../../components/carousel/carousel.jsx');
var Footer = require('../../components/footer/footer.jsx');
require('./index.scss');
var Index = React.createClass({
type: 'Index',
render: function() {
return (
<div>
<NavBar />
<Carousel />
type: 'Index',
render: function() {
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 (
<div>
<NavBar/>
<Carousel items={images}/>
<div id="content">
<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.
</div>
<div id="content">
<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.
</div>
<div id="content-text">
<div id="content-header-first">
ScratchJr
</div> {/* end content-header-first */}
<div id="content-header-second">
Coding for young children
</div> {/* end content-header-second */}
<div id="content-body">
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.
<div id="store-badges">
<a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">
<img alt="Download on the App Store"src="images/Apple_appstore.svg" />
</a>
<a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">
<img alt="Get it on Google Play" src="images/GooglePlay.svg" width="135px" height="40px"/>
</a>
</div> {/* end store-badges */}
</div> {/* end content-body */}
</div> {/* end content-text */}
<div id="content-graphic">
<img id="content-graphic-item" src="images/homegraphic.png" />
</div> {/* end content-graphic */}
<div className="content-news">
<div className="content-news-header">
News
</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="content-text">
<div id="content-header-first">
ScratchJr
</div>
{/* end content-header-first */}
<div id="content-header-second">
Coding for young children
</div>
{/* end content-header-second */}
<div id="content-body">
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.
<div id="store-badges">
<a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">
<img alt="Download on the App Store" src="images/Apple_appstore.svg"/>
</a>
<a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">
<img alt="Get it on Google Play" src="images/GooglePlay.svg" width="135px" height="40px"/>
</a>
</div>
{/* end store-badges */}
</div>
{/* end content-body */}
</div>
{/* end content-text */}
<div id="content-graphic">
<img id="content-graphic-item" src="images/homegraphic.png"/>
</div>
{/* end content-graphic */}
<div className="content-news">
<div className="content-news-header">
News
</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-text">
<div id="discussion-header">
Join the Discussion
</div>
<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>
<div id="discussion-container">
<div id="discussion-text">
<div id="discussion-header">
Join the Discussion
</div>
<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>
<a href=" https://twitter.com/intent/tweet?screen_name=ScratchJr">
<div className="blue-button">
Tweet @ScratchJr
</div>
</a>
</div>
<a href=" https://twitter.com/intent/tweet?screen_name=ScratchJr">
<div className="blue-button">
Tweet @ScratchJr
</div>
</a>
</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 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;
}

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

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

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

View file

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

View file

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

View file

@ -1,161 +1 @@
.slideshow {
width: 900px;
margin-left: auto;
margin-right: auto;
height: 507px;
background-color: white;
}
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;
}