scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-31 15:21:34 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix formatting for numbers and for dismiss icon

Browse source 
fixes
This commit is contained in:
Matthew Taylor 2017-09-01 11:05:29 -04:00
parent 3dee0e46d2
commit 630ae5e462
4 changed files with 33 additions and 27 deletions

4
src/views/messages/message-rows/admin-message.jsx
View file

@ -21,10 +21,10 @@ var AdminMessage = React.createClass({
</span>
<Button
className="mod-admin-message-dismiss"
onClick={this.props.onDismiss.bind(this, 'notification', this.props.id)}
onClick={this.props.onDismiss}
>
<img
className="mod-admin-message-icon"
className="admin-message-icon"
src="/svgs/modal/close-x.svg"
alt="close-icon"
/>

6
src/views/messages/message-rows/scratcher-invite.jsx
View file

@ -25,11 +25,7 @@ var AdminMessage = injectIntl(React.createClass({
</span>
<Button
className="mod-scratcher-invite-dismiss"
onClick={
function () {
this.props.onDismiss('invite', this.props.id);
}.bind(this)
}
onClick={this.props.onDismiss}
>
<img
className="mod-scratcher-invite-icon"

26
src/views/messages/messages.scss
View file

@ -39,6 +39,20 @@
list-style-type: none;
}
.messages-header {
display: flex;
align-items: center;
}
.messages-header-unread {
margin-left: 1rem;
border-radius: 1rem;
background-color: $ui-orange;
padding: .25rem .5rem;
line-height: 1rem;
color: $type-white;
}
.admin-message {
border: 1px solid darken($ui-gray, 10);
border-radius: 5px;
@ -51,6 +65,10 @@
align-items: center;
}
.admin-message-icon {
vertical-align: middle;
}
.admin-message-content {
margin: 0;
}
@ -70,14 +88,6 @@
}
}
.messages-social-title-unread {
margin-left: 1rem;
border-radius: 1rem;
background-color: $ui-orange;
padding: .25rem .5rem;
color: $type-white;
}
.messages-social-list {
border: 1px solid $ui-border;
border-bottom-width: 0;

24
src/views/messages/presentation.jsx
View file

@ -181,11 +181,11 @@ var SocialMessagesList = React.createClass({
<section className="messages-social">
{this.props.messages.length > 0 ? [
<div className="messages-social-title" key="messages-social-title">
<h4>
<h4 className="messages-header">
<FormattedMessage id='messages.messageTitle' />
<span className="messages-social-title-unread">
<div className="messages-header-unread">
<FormattedNumber value={this.props.numNewMessages} />
</span>
</div>
</h4>
</div>,
<ul className="messages-social-list" key="messages-social-list">
@ -270,11 +270,11 @@ var MessagesPresentation = injectIntl(React.createClass({
{this.props.adminMessages.length > 0 || Object.keys(this.props.scratcherInvite).length > 0 ? [
<section className="messages-admin">
<div className="messages-admin-title">
<h4>
<h4 className="messages-header">
<FormattedMessage id='messages.scratchTeamTitle' />
<span className="messages-social-title-unread">
<div className="messages-header-unread">
<FormattedNumber value={adminMessageLength} />
</span>
</div>
</h4>
</div>
<ul className="messages-admin-list">
@ -283,7 +283,9 @@ var MessagesPresentation = injectIntl(React.createClass({
id={this.props.scratcherInvite.id}
username={this.props.user.username}
datetimeCreated={this.props.scratcherInvite.datetime_created}
onDismiss={this.props.handleAdminDismiss}
onDismiss={function () {
this.props.handleAdminDismiss('invite', this.props.scratcherInvite.id);
}.bind(this)}
/>
] : []}
{this.props.adminMessages.map(function (item) {
@ -292,11 +294,9 @@ var MessagesPresentation = injectIntl(React.createClass({
id={item.id}
message={item.message}
datetimeCreated={item.datetime_created}
onDismiss={
function () {
this.props.handleAdminDismiss('notification', item.id);
}.bind(this)
}
onDismiss={function () {
this.props.handleAdminDismiss('notification', item.id);
}.bind(this)}
/>;
}.bind(this))}
</ul>