mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-29 10:36:42 -05:00
Add stub for 'Activity' component
This commit is contained in:
parent
27f0a305ff
commit
826ed270e5
7 changed files with 192 additions and 5 deletions
57
src/components/activity/activity.json
Normal file
57
src/components/activity/activity.json
Normal file
|
@ -0,0 +1,57 @@
|
|||
[
|
||||
{
|
||||
"id": 5,
|
||||
"author": {
|
||||
"id": "lynxkitten101",
|
||||
"username": "lynxkitten101",
|
||||
"avatar": "https://cdn2.scratch.mit.edu/get_image/user/10122882_32x32.png?v=1438781835.82"
|
||||
},
|
||||
"stamp": "2015-09-08T19:40:00Z",
|
||||
"message": "became a curator of A bit of everything",
|
||||
"url": "/studios/1511220/"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"author": {
|
||||
"id": "sheep_tester",
|
||||
"username": "Sheep_tester",
|
||||
"avatar": "https://cdn2.scratch.mit.edu/get_image/user/3290075_32x32.png?v=1439575340.77"
|
||||
},
|
||||
"stamp": "2015-09-08T03:20:00Z",
|
||||
"message": "became a curator of To All My Great Followers & People",
|
||||
"url": "/studios/1511360/"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"author": {
|
||||
"id": "-vexvorlo-",
|
||||
"username": "-VexVorlo-",
|
||||
"avatar": "https://cdn2.scratch.mit.edu/get_image/user/10930092_32x32.png?v=1439735067.99"
|
||||
},
|
||||
"stamp": "2015-09-01T03:20:00Z",
|
||||
"message": "loved Virtual Chicken Coop",
|
||||
"url": "/projects/73311484/"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"author": {
|
||||
"id": "-vexvorlo-",
|
||||
"username": "-VexVorlo-",
|
||||
"avatar": "https://cdn2.scratch.mit.edu/get_image/user/10930092_32x32.png?v=1439735067.99"
|
||||
},
|
||||
"stamp": "2015-08-22T02:00:00Z",
|
||||
"message": "loved Bread bread bread..",
|
||||
"url": "/projects/75677832/"
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"author": {
|
||||
"id": "getbent",
|
||||
"username": "getbent",
|
||||
"avatar": "https://cdn2.scratch.mit.edu/get_image/user/676422_32x32.png?v=1436728562.25"
|
||||
},
|
||||
"stamp": "2014-09-08T00:00:00Z",
|
||||
"message": "loved Is ______ An Instrurment?",
|
||||
"url": "/projects/75347968/"
|
||||
}
|
||||
]
|
39
src/components/activity/activity.jsx
Normal file
39
src/components/activity/activity.jsx
Normal file
|
@ -0,0 +1,39 @@
|
|||
var React = require('react');
|
||||
|
||||
var Box = require('../box/box.jsx');
|
||||
var Format = require('../../mixins/format.jsx');
|
||||
|
||||
require('./activity.scss');
|
||||
|
||||
module.exports = React.createClass({
|
||||
propTypes: {
|
||||
items: React.PropTypes.array
|
||||
},
|
||||
getDefaultProps: function () {
|
||||
return {
|
||||
items: require('./activity.json')
|
||||
};
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<Box
|
||||
className="activity"
|
||||
title="What's Happening?">
|
||||
|
||||
<ul>
|
||||
{this.props.items.map(function (item) {
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<a href={item.url}>
|
||||
<img src={item.author.avatar} width="34" height="34" />
|
||||
<p>{item.author.username} {item.message}</p>
|
||||
<p><span className="stamp">{Format.date(item.stamp)}</span></p>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
});
|
42
src/components/activity/activity.scss
Normal file
42
src/components/activity/activity.scss
Normal file
|
@ -0,0 +1,42 @@
|
|||
.activity {
|
||||
ul {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
clear: both;
|
||||
|
||||
margin: 12px 0;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
color: #999;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -43,7 +43,7 @@ a:hover {
|
|||
|
||||
#view {
|
||||
min-height: 768px;
|
||||
padding: 10px 0;
|
||||
padding: 20px 0;
|
||||
|
||||
/* NOTE: Margin should match height in navigation.scss */
|
||||
margin-top: 35px;
|
||||
|
|
32
src/mixins/format.jsx
Normal file
32
src/mixins/format.jsx
Normal file
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* Takes an ISO time and returns a string representing how long ago the date
|
||||
* represents. For example, "2015-01-01T00:00:00" becomes "1 minute ago".
|
||||
*
|
||||
* Based on "JavaScript Pretty Date"
|
||||
* Copyright (c) 2011 John Resig (ejohn.org)
|
||||
* Licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
date: function (stamp) {
|
||||
stamp = (stamp || '').replace(/-/g,'/').replace(/[TZ]/g,' ');
|
||||
|
||||
var date = new Date(stamp);
|
||||
var diff = (((new Date()).getTime() - date.getTime()) / 1000);
|
||||
var day_diff = Math.floor(diff / 86400);
|
||||
|
||||
if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31) {
|
||||
return 'A while ago';
|
||||
}
|
||||
|
||||
return day_diff == 0 && (
|
||||
diff < 60 && 'Just now' ||
|
||||
diff < 120 && '1 minute ago' ||
|
||||
diff < 3600 && Math.floor( diff / 60 ) + ' minutes ago' ||
|
||||
diff < 7200 && '1 hour ago' ||
|
||||
diff < 86400 && Math.floor( diff / 3600 ) + ' hours ago') ||
|
||||
day_diff == 1 && 'Yesterday' ||
|
||||
day_diff < 7 && day_diff + ' days ago' ||
|
||||
day_diff < 31 && Math.ceil( day_diff / 7 ) + ' weeks ago';
|
||||
}
|
||||
};
|
|
@ -3,6 +3,7 @@ var React = require('react');
|
|||
var Api = require('../../mixins/api.jsx');
|
||||
var Session = require('../../mixins/session.jsx');
|
||||
|
||||
var Activity = require('../../components/activity/activity.jsx');
|
||||
var News = require('../../components/news/news.jsx');
|
||||
|
||||
require('./splash.scss');
|
||||
|
@ -27,9 +28,10 @@ var View = React.createClass({
|
|||
render: function () {
|
||||
return (
|
||||
<div className="inner">
|
||||
<div className="intro"></div>
|
||||
<div className="activity"></div>
|
||||
<div className="splash-header">
|
||||
<Activity />
|
||||
<News />
|
||||
</div>
|
||||
<div className="featured"></div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,3 +1,18 @@
|
|||
#view {
|
||||
.splash-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.activity {
|
||||
display: inline-block;
|
||||
width: calc(60% - 20px);
|
||||
}
|
||||
|
||||
.news {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue