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

Add stub for 'Activity' component

Browse source
This commit is contained in:
Andrew Sliwinski 2015-09-08 19:54:55 -07:00
parent 27f0a305ff
commit 826ed270e5
7 changed files with 192 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/activity/activity.json Normal file
View 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
View 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
View 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;
}
}
}

2
src/main.scss
View file

@ -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
View 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';
}
};

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

@ -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>
<News />
<div className="splash-header">
<Activity />
<News />
</div>
<div className="featured"></div>
</div>
);

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

@ -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%;
}
}
}