scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-23 19:30:34 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions2

Add empty state for What's Happening box

Browse source
This commit is contained in:
Ray Schamp 2015-10-23 00:36:33 -04:00
parent 21b7386270
commit c8834ed251
3 changed files with 57 additions and 23 deletions
src
components
activity
activity.jsx
box
box.scss
main.scss

62
src/components/activity/activity.jsx
View file

@ -1,6 +1,7 @@
var React = require('react');
var ReactIntl = require('react-intl');
var defineMessages = ReactIntl.defineMessages;
var FormattedMessage = ReactIntl.FormattedMessage;
var FormattedRelative = ReactIntl.FormattedRelative;
var injectIntl = ReactIntl.injectIntl;
@ -32,29 +33,44 @@ var Activity = React.createClass({
className="activity"
title={formatMessage(defaultMessages.whatsHappening)}>
<ul>
{this.props.items.map(function (item) {
var actorProfileUrl = '/users/' + item.actor.username + '/';
var actionDate = new Date(item.datetime_created + 'Z');
var activityMessageHTML = '<a href=' + actorProfileUrl + '>' +
item.actor.username + '</a>' + item.message;
if (item.message.replace(/\s/g, '')) {
return (
<li key={item.pk}>
<a href={actorProfileUrl}>
<img src={item.actor.thumbnail_url} width="34" height="34" />
<p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
<p>
<span className="stamp">
<FormattedRelative value={actionDate} />
</span>
</p>
</a>
</li>
);
}
})}
</ul>
{this.props.items && this.props.items.length > 0 ? [
<ul>
{this.props.items.map(function (item) {
var actorProfileUrl = '/users/' + item.actor.username + '/';
var actionDate = new Date(item.datetime_created + 'Z');
var activityMessageHTML = '<a href=' + actorProfileUrl + '>' +
item.actor.username + '</a>' + item.message;
if (item.message.replace(/\s/g, '')) {
return (
<li key={item.pk}>
<a href={actorProfileUrl}>
<img src={item.actor.thumbnail_url} width="34" height="34" />
<p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
<p>
<span className="stamp">
<FormattedRelative value={actionDate} />
</span>
</p>
</a>
</li>
);
}
})}
</ul>
] : [
<div className="empty">
<h4>
<FormattedMessage
id="activity.seeUpdates"
defaultMessage="This is where you will see updates from Scratchers you follow" />
</h4>
<a href="/studios/146521/">
<FormattedMessage
id="activity.checkOutScratchers"
defaultMessage="Check out some Scratchers you might like to follow" />
</a>
</div>
]}
</Box>
);
}

4
src/components/box/box.scss
View file

@ -44,4 +44,8 @@ $base-bg: $ui-white;
background-color: $base-bg;
padding: 8px 20px;
}
.empty {
margin-top: 20px;
}
}

14
src/main.scss
View file

@ -52,6 +52,20 @@ a:hover {
width: 942px;
}
.empty {
$bg-blue: #d9edf7;
$bg-blue-accent: #bce8f1;
border: 1px solid $bg-blue-accent;
border-radius: 5px;
background-color: $bg-blue;
text-align: center;
line-height: 2rem;
color: $type-gray;
h4 {
color: $type-gray;
}
}
#view {
/* NOTE: Margin should match height in navigation.scss */
margin-top: 50px;