scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-22 23:27:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge and resolve feedback from review

Browse source
This commit is contained in:
Andrew Sliwinski 2015-09-04 08:26:18 -07:00
parent 41176aaee1
commit 3716d0462c
15 changed files with 327 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Makefile
View file

@ -41,7 +41,7 @@ watch:
wait wait
start: start:
node ./server/index.js $(NODE) ./server/index.js
# ------------------------------------ # ------------------------------------

1
package.json
View file

@ -27,6 +27,7 @@
"mustache": "2.1.3" "mustache": "2.1.3"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer-loader": "2.1.0",
"css-loader": "0.17.0", "css-loader": "0.17.0",
"eslint": "1.3.1", "eslint": "1.3.1",
"eslint-plugin-react": "3.3.1", "eslint-plugin-react": "3.3.1",

19
server/template.html
View file

@ -1,5 +1,7 @@
<!DOCTYPE html> <!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> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -9,7 +11,18 @@
<title>Scratch - {{title}}</title> <title>Scratch - {{title}}</title>
<meta name="description" content="{{description}}" /> <meta name="description" content="{{description}}" />
<!-- 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" /> <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> </head>
<body> <body>
@ -21,5 +34,9 @@
<script src="/js/lib/react.js"></script> <script src="/js/lib/react.js"></script>
<script src="/js/main.bundle.js"></script> <script src="/js/main.bundle.js"></script>
<script src="/js/{{view}}.bundle.js"></script> <script src="/js/{{view}}.bundle.js"></script>
<!-- @todo Analytics (GA) -->
<!-- @todo Monitoring (Raven) -->
<!-- @todo New Relic -->
</body> </body>
</html> </html>

51
src/components/footer/footer.jsx
View file

@ -5,8 +5,55 @@ require('./footer.scss');
module.exports = React.createClass({ module.exports = React.createClass({
render: function () { render: function () {
return ( return (
<div> <div className="inner">
<h1>Footer</h1> <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> </div>
); );
} }

42
src/components/footer/footer.scss
View file

@ -1,3 +1,43 @@
#footer { #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;
}
}
} }

24
src/components/navigation/navigation.jsx
View file

@ -5,8 +5,28 @@ require('./navigation.scss');
module.exports = React.createClass({ module.exports = React.createClass({
render: function () { render: function () {
return ( return (
<div> <div className="inner">
<h1>Navigation</h1> <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> </div>
); );
} }

120
src/components/navigation/navigation.scss
View file

@ -1,3 +1,121 @@
#navigation { #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);
}
}
}
} }

2
src/components/news/news.scss
View file

@ -1,3 +1,3 @@
.news { .news {
background-color: white;
} }

2
src/main.jsx
View file

@ -1,5 +1,7 @@
var React = require('react'); var React = require('react');
require('./main.scss');
var Navigation = require('./components/navigation/navigation.jsx'); var Navigation = require('./components/navigation/navigation.jsx');
var Footer = require('./components/footer/footer.jsx'); var Footer = require('./components/footer/footer.jsx');

0
src/main.sass
View file

50
src/main.scss Normal file
View 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
View file

@ -0,0 +1,10 @@
module.exports = {
getInitialState: function () {
return {
session: {}
};
},
componentWillMount: function () {
// @todo Fetch session from API
}
};

15
src/views/splash/splash.jsx
View file

@ -1,17 +1,22 @@
var React = require('react'); var React = require('react');
var Api = require('../../mixins/api.jsx'); var Api = require('../../mixins/api.jsx');
var Session = require('../../mixins/session.jsx');
var News = require('../../components/news/news.jsx'); var News = require('../../components/news/news.jsx');
require('./splash.scss'); require('./splash.scss');
var View = React.createClass({ var View = React.createClass({
mixins: [ mixins: [
Api Api,
Session
], ],
getInitialState: function () { getInitialState: function () {
return { return {
news: [] activity: [],
news: [],
featured: []
}; };
}, },
componentDidMount: function () { componentDidMount: function () {
@ -21,9 +26,11 @@ var View = React.createClass({
}, },
render: function () { render: function () {
return ( return (
<div> <div className="inner">
<h1>I am the splash page!</h1> <div className="intro"></div>
<div className="activity"></div>
<News /> <News />
<div className="featured"></div>
</div> </div>
); );
} }

2
src/views/splash/splash.scss
View file

@ -1,3 +1,3 @@
#view { #view {
background-color: red;
} }

2
webpack.config.js
View file

@ -36,7 +36,7 @@ module.exports = {
}, },
{ {
test: /\.scss$/, test: /\.scss$/,
loader: 'style!css!sass' loader: 'style!css!sass!autoprefixer-loader?browsers=last 3 versions'
} }
] ]
}, },