mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-22 15:17:53 -05:00
Add navigation and footer components
This commit is contained in:
Andrew Sliwinski
parent
9ba3f729cf
commit
baa5e158b9
14 changed files with 327 additions and 15 deletions
|
|
@ -19,6 +19,7 @@
|
|||
"homepage": "https://github.com/llk/scratch-www#readme",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"autoprefixer-loader": "2.1.0",
|
||||
"css-loader": "0.17.0",
|
||||
"eslint": "1.3.1",
|
||||
"eslint-plugin-react": "3.3.1",
|
||||
|
|
|
|||
|
|
@ -5,8 +5,55 @@ require('./footer.scss');
|
|||
module.exports = React.createClass({
|
||||
render: function () {
|
||||
return (
|
||||
<div>
|
||||
<h1>Footer</h1>
|
||||
<div className="inner">
|
||||
<div className="lists">
|
||||
<dl>
|
||||
<dt>About</dt>
|
||||
<dd><a href="/about/">About Scratch</a></dd>
|
||||
<dd><a href="/parents/">For Parents</a></dd>
|
||||
<dd><a href="/educators/">For Educators</a></dd>
|
||||
<dd><a href="/info/credits/">Credits</a></dd>
|
||||
<dd><a href="/jobs/">Jobs</a></dd>
|
||||
<dd><a href="http://wiki.scratch.mit.edu/wiki/Scratch_Press">Press</a></dd>
|
||||
</dl>
|
||||
|
||||
<dl>
|
||||
<dt>Community</dt>
|
||||
<dd><a href="/community_guidelines/">Community Guidelines</a></dd>
|
||||
<dd><a href="/discuss/">Discussion Forums</a></dd>
|
||||
<dd><a href="https://wiki.scratch.mit.edu/">Scratch Wiki</a></dd>
|
||||
<dd><a href="/statistics/">Statistics</a></dd>
|
||||
</dl>
|
||||
|
||||
<dl>
|
||||
<dt>Support</dt>
|
||||
<dd><a href="/help/">Help Page</a></dd>
|
||||
<dd><a href="/info/faq/">FAQ</a></dd>
|
||||
<dd><a href="/scratch2download/">Offline Editor</a></dd>
|
||||
<dd><a href="/contact-us/">Contact Us</a></dd>
|
||||
<dd><a href="https://secure.donationpay.org/codetolearn/">Donate</a></dd>
|
||||
</dl>
|
||||
|
||||
<dl>
|
||||
<dt>Legal</dt>
|
||||
<dd><a href="/terms_of_use/">Terms of Use</a></dd>
|
||||
<dd><a href="/privacy_policy/">Privacy Policy</a></dd>
|
||||
<dd><a href="/DMCA/">DMCA</a></dd>
|
||||
</dl>
|
||||
|
||||
<dl>
|
||||
<dt>Scratch Family</dt>
|
||||
<dd><a href="http://scratched.gse.harvard.edu/">ScratchEd</a></dd>
|
||||
<dd><a href="http://www.scratchjr.org/">ScratchJr</a></dd>
|
||||
<dd><a href="http://day.scratch.mit.edu/">Scratch Day</a></dd>
|
||||
<dd><a href="/conference/">Scratch Conference</a></dd>
|
||||
<dd><a href="http://www.scratchfoundation.org/">Scratch Foundation</a></dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="copyright">
|
||||
<p>Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,43 @@
|
|||
#footer {
|
||||
background-color: yellow;
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
color: #666;
|
||||
background-color: #ececec;
|
||||
|
||||
.lists {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
|
||||
dl {
|
||||
display: inline-block;
|
||||
width: 130pt;
|
||||
font-size: 0.85rem;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
dt {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,28 @@ require('./navigation.scss');
|
|||
module.exports = React.createClass({
|
||||
render: function () {
|
||||
return (
|
||||
<div>
|
||||
<h1>Navigation</h1>
|
||||
<div className="inner">
|
||||
<ul>
|
||||
<li className="logo"><a href="/"></a></li>
|
||||
|
||||
<li className="link"><a href="/projects/editor">Create</a></li>
|
||||
<li className="link"><a href="/explore">Explore</a></li>
|
||||
<li className="link"><a href="/discuss">Discuss</a></li>
|
||||
<li className="link"><a href="/about">About</a></li>
|
||||
<li className="link"><a href="/help">Help</a></li>
|
||||
|
||||
<li className="search">
|
||||
<form action="/search/google_results" method="get">
|
||||
<input type="submit" value="" />
|
||||
<input type="text" placeholder="Search" name="q" />
|
||||
<input type="hidden" name="date" value="anytime" />
|
||||
<input type="hidden" name="sort_by" value="datetime_shared" />
|
||||
</form>
|
||||
</li>
|
||||
|
||||
<li className="link right"><a href="/join">Join Scratch</a></li>
|
||||
<li className="link right"><a href="">Sign In</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,121 @@
|
|||
#navigation {
|
||||
background-color: cyan;
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
|
||||
background-color: #0f8bc0;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
height: 35px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
align-self: flex-start;
|
||||
float: left;
|
||||
height: 100%;
|
||||
border-left: 1px solid rgb(20, 154, 203);
|
||||
}
|
||||
|
||||
.logo {
|
||||
border-left: none;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
margin: 4px 6px 0 0;
|
||||
|
||||
border: none;
|
||||
background-image: url('/images/logo_sm.png');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&:hover {
|
||||
background-image: url('/images/logo_sm_highlight.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
a {
|
||||
display: block;
|
||||
height: 28px;
|
||||
padding: 7px 15px 0 15px;
|
||||
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: rgb(1, 96, 135);
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
flex-grow: 3;
|
||||
border-right: none;
|
||||
|
||||
form {
|
||||
margin: 6px 0 0 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
|
||||
background-color: white;
|
||||
background-image: url(/images/nav-search-glass.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
border-right: 1px solid #efefef;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: calc(100% - 50px);
|
||||
padding-left: 36px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.ie9 input[type=text] {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
align-self: flex-end;
|
||||
float: right;
|
||||
margin-left: auto;
|
||||
font-weight: bold;
|
||||
|
||||
a:hover {
|
||||
background-color: #f79231;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid rgb(20, 154, 203);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.news {
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
var React = require('react');
|
||||
|
||||
require('./main.scss');
|
||||
|
||||
var Navigation = require('./components/navigation/navigation.jsx');
|
||||
var Footer = require('./components/footer/footer.jsx');
|
||||
|
||||
|
|
|
|||
50
src/main.scss
Normal file
50
src/main.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/* Tags */
|
||||
html, body {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
color: #322f31;
|
||||
background-color: #fdfdfd;
|
||||
|
||||
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
color: #554747;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.0rem;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a:link, a:visited, a:active {
|
||||
color: #1aa0d8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
.inner {
|
||||
width: 942px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#view {
|
||||
min-height: 768px;
|
||||
padding: 10px 0;
|
||||
|
||||
/* Compensate for fixed navigation */
|
||||
margin-top: 35px;
|
||||
}
|
||||
10
src/mixins/session.jsx
Normal file
10
src/mixins/session.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
module.exports = {
|
||||
getInitialState: function () {
|
||||
return {
|
||||
session: null
|
||||
};
|
||||
},
|
||||
componentWillMount: function () {
|
||||
// @todo Fetch session from API
|
||||
}
|
||||
};
|
||||
|
|
@ -1,17 +1,22 @@
|
|||
var React = require('react');
|
||||
|
||||
var Api = require('../../mixins/api.jsx');
|
||||
var Session = require('../../mixins/session.jsx');
|
||||
|
||||
var News = require('../../components/news/news.jsx');
|
||||
|
||||
require('./splash.scss');
|
||||
|
||||
var View = React.createClass({
|
||||
mixins: [
|
||||
Api
|
||||
Api,
|
||||
Session
|
||||
],
|
||||
getInitialState: function () {
|
||||
return {
|
||||
news: []
|
||||
activity: [],
|
||||
news: [],
|
||||
featured: []
|
||||
};
|
||||
},
|
||||
componentDidMount: function () {
|
||||
|
|
@ -21,9 +26,11 @@ var View = React.createClass({
|
|||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div>
|
||||
<h1>I am the splash page!</h1>
|
||||
<div className="inner">
|
||||
<div className="intro"></div>
|
||||
<div className="activity"></div>
|
||||
<News />
|
||||
<div className="featured"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
#view {
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<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" />
|
||||
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Scratch</title>
|
||||
<title>Scratch - Imagine, Program, Share</title>
|
||||
<meta name="description" content="Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations." />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://scratch.mit.edu/" />
|
||||
<meta property="og:title" content="Scratch - Imagine, Program, Share" />
|
||||
<meta property="og:description" content="Make games, stories and interactive art with Scratch. (scratch.mit.edu)" />
|
||||
|
||||
<!-- Favicon & CSS normalize -->
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="/css/lib/normalize.min.css" />
|
||||
|
||||
<!-- Shim/Sham ES5 polyfill for older browsers -->
|
||||
<script src="/js/lib/polyfill.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -21,5 +34,9 @@
|
|||
<script src="/js/lib/react.js"></script>
|
||||
<script src="/js/main.bundle.js"></script>
|
||||
<script src="/js/splash.bundle.js"></script>
|
||||
|
||||
<!-- @todo Analytics (GA) -->
|
||||
<!-- @todo Monitoring (Raven) -->
|
||||
<!-- @todo New Relic -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ module.exports = {
|
|||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loader: 'style!css!sass'
|
||||
loader: 'style!css!sass!autoprefixer-loader?browsers=last 3 versions'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue