mirror of
https://github.com/scratchfoundation/scratchjr-website.git
synced 2025-07-29 23:49:39 -04:00
[WIP] Added react-router to About page, others are currently broken
This commit is contained in:
parent
41d6ccac34
commit
ecd7f64a68
22 changed files with 480 additions and 564 deletions
src
static
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
33
src/components/sectionitem/sectionitem.jsx
Normal file
33
src/components/sectionitem/sectionitem.jsx
Normal 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
42
src/components/sectionitem/sectionitem.scss
Normal 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;
|
||||
}
|
|
@ -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&byline=0&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;
|
|
@ -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;
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
"title": "Home"
|
||||
},
|
||||
{
|
||||
"pattern": "/about",
|
||||
"pattern": "/about(/*)?",
|
||||
"view": "about",
|
||||
"title": "About"
|
||||
},
|
||||
|
@ -39,4 +39,4 @@
|
|||
"view": "eula",
|
||||
"title": "Terms and Conditions"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'));
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
32
src/views/about/videos.jsx
Normal file
32
src/views/about/videos.jsx
Normal 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&byline=0&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;
|
|
@ -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 & 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 & 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
133
src/views/index/index.scss
Normal 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;
|
||||
}
|
|
@ -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
8
static/js/lib/responsiveslides.min.js
vendored
|
@ -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
4
static/js/lib/simple-expand.min.js
vendored
|
@ -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);
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue