diff --git a/src/components/activity/activity.json b/src/components/activity/activity.json new file mode 100644 index 000000000..394eab22b --- /dev/null +++ b/src/components/activity/activity.json @@ -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/" + } +] diff --git a/src/components/activity/activity.jsx b/src/components/activity/activity.jsx new file mode 100644 index 000000000..2728d1337 --- /dev/null +++ b/src/components/activity/activity.jsx @@ -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 ( + + + + + ); + } +}); diff --git a/src/components/activity/activity.scss b/src/components/activity/activity.scss new file mode 100644 index 000000000..64a070bb0 --- /dev/null +++ b/src/components/activity/activity.scss @@ -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; + } + } +} diff --git a/src/main.scss b/src/main.scss index 5586d9f96..9e49b9390 100644 --- a/src/main.scss +++ b/src/main.scss @@ -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; diff --git a/src/mixins/format.jsx b/src/mixins/format.jsx new file mode 100644 index 000000000..f1ae05264 --- /dev/null +++ b/src/mixins/format.jsx @@ -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'; + } +}; diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index 7c9719004..e8b9f1563 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -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 (
-
-
- +
+ + +
); diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss index d40c56fb9..de14cf5a3 100644 --- a/src/views/splash/splash.scss +++ b/src/views/splash/splash.scss @@ -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%; + } + } }