mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-20 18:11:03 -04:00
Adds basic 'box' and 'news' component
This commit is contained in:
Andrew Sliwinski
parent
247c71e259
commit
4e7cd53e5c
10 changed files with 164 additions and 20 deletions
|
|
@ -3,6 +3,10 @@
|
|||
"pattern": "/",
|
||||
"view": "splash"
|
||||
},
|
||||
{
|
||||
"pattern": "/styleguide",
|
||||
"view": "styleguide"
|
||||
},
|
||||
{
|
||||
"pattern": "/about",
|
||||
"view": "about",
|
||||
|
|
|
|||
|
|
@ -5,17 +5,23 @@ require('./box.scss');
|
|||
module.exports = React.createClass({
|
||||
propTypes: {
|
||||
title: React.PropTypes.string.isRequired,
|
||||
more: React.React.PropTypes.string
|
||||
more: React.PropTypes.string,
|
||||
moreUrl: React.PropTypes.string
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className="box">
|
||||
<div className="header">
|
||||
<h4>{this.props.title}</h4>
|
||||
<p>
|
||||
<a href={this.props.moreUrl}>
|
||||
{this.props.more}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="content">
|
||||
{this.children}
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,46 @@
|
|||
.box {
|
||||
background-color: purple;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 10px 10px 0 0;
|
||||
box-shadow: 0 2px 3px rgba(34, 25, 25, 0.3);
|
||||
|
||||
.header {
|
||||
background-color: grey;
|
||||
display: block;
|
||||
margin: 0;
|
||||
height: 20px;
|
||||
padding: 8px 20px;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: #efefef;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border-top: 1px solid white;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
h4 {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin: 1px 0 0 0;
|
||||
padding: 0;
|
||||
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: block;
|
||||
padding: 8px 20px;
|
||||
clear: both;
|
||||
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
|
||||
background-color: #0f8bc0;
|
||||
|
||||
/* NOTE: Height should match offset settings in main.scss file */
|
||||
height: 35px;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
|
|
|
|||
23
src/components/news/news.json
Normal file
23
src/components/news/news.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
[
|
||||
{
|
||||
"id": 128283902498,
|
||||
"headline": "Update to Scratch Offline Editor",
|
||||
"copy": "We’ve released an update to Offline Editor which fixed bugs affecting Linux users.",
|
||||
"url": "https://scratch.mit.edu/news#128283902498",
|
||||
"image": "https://33.media.tumblr.com/695b93f4ab74c68feaef1fe03baebdd5/tumblr_inline_n0xubtT0vU1szpavb.png"
|
||||
},
|
||||
{
|
||||
"id": 127476896298,
|
||||
"headline": "Scratch Video Update: Ep 10",
|
||||
"copy": "Check out a special Scratch Conference edition of the Scratch Video Update!",
|
||||
"url": "https://scratch.mit.edu/news#127476896298",
|
||||
"image": "https://40.media.tumblr.com/0b5814b2eafa94b3594a36ad84bbcae4/tumblr_inline_nmyxdgwxzU1szpavb_540.png"
|
||||
},
|
||||
{
|
||||
"id": 126445521858,
|
||||
"headline": "New Scratch Design Studio!",
|
||||
"copy": "In this new Scratch Design Studio, use Custom Blocks to open up more possiblities in Scratch!",
|
||||
"url": "https://scratch.mit.edu/news#126445521858",
|
||||
"image": "https://31.media.tumblr.com/d99a1da959f7d077d266580842a8d3f4/tumblr_inline_n6jlk1ULuG1szpavb.png"
|
||||
}
|
||||
]
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
var React = require('react');
|
||||
|
||||
var Box = require('../box/box.jsx');
|
||||
|
||||
require('./news.scss');
|
||||
|
||||
module.exports = React.createClass({
|
||||
|
|
@ -8,30 +10,26 @@ module.exports = React.createClass({
|
|||
},
|
||||
getDefaultProps: function () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
id: 1,
|
||||
headline: 'Woo! Pizza party!',
|
||||
copy: 'Lorem ipsum dolor sit amet.'
|
||||
}
|
||||
]
|
||||
items: require('./news.json')
|
||||
};
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className="news">
|
||||
<h1>News</h1>
|
||||
<ul>
|
||||
<Box title="Scratch News" more="View All" moreUrl="/news">
|
||||
<ul className="news">
|
||||
{this.props.items.map(function (item) {
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<h4>{item.headline}</h4>
|
||||
<p>{item.copy}</p>
|
||||
<a href={item.url}>
|
||||
<img src={item.image} width="53" height="53" />
|
||||
<h4>{item.headline}</h4>
|
||||
<p>{item.copy}</p>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,3 +1,51 @@
|
|||
.news {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
min-height: 53px;
|
||||
margin: 0;
|
||||
padding: 12px 0;
|
||||
clear: both;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
display: block;
|
||||
|
||||
color: #1aa0d8;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
color: #322f31;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(even) {
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,6 +45,6 @@ a:hover {
|
|||
min-height: 768px;
|
||||
padding: 10px 0;
|
||||
|
||||
/* Compensate for fixed navigation */
|
||||
/* NOTE: Margin should match height in navigation.scss */
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
|
|
|||
24
src/views/styleguide/styleguide.jsx
Normal file
24
src/views/styleguide/styleguide.jsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
var React = require('react');
|
||||
|
||||
var Box = require('../../components/box/box.jsx');
|
||||
|
||||
require('./styleguide.scss');
|
||||
|
||||
var View = React.createClass({
|
||||
render: function () {
|
||||
return (
|
||||
<div className="inner">
|
||||
<h1>Box Component</h1>
|
||||
<Box
|
||||
title="Some Title"
|
||||
more="Cat Gifs"
|
||||
moreUrl="http://www.catgifpage.com/">
|
||||
<h4>Things go in here</h4>
|
||||
<p>Lorem ipsum dolor sit amet.</p>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<View />, document.getElementById('view'));
|
||||
5
src/views/styleguide/styleguide.scss
Normal file
5
src/views/styleguide/styleguide.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
#view {
|
||||
h1 {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue