Add stub for 'Activity' component

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/"
+    }
+]

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 (
+            <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>
+        );
+    }
+});

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;
+        }
+    }
+}

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;

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';
+    }
+};

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 (
             <div className="inner">
-                <div className="intro"></div>
+                <div className="splash-header">
-                <div className="activity"></div>
+                    <Activity />
                     <News />
+                </div>
                 <div className="featured"></div>
             </div>
         );

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