Fixed notification appearance

This commit is contained in:
kibigo! 2017-09-20 14:51:45 -07:00
parent 65673e9a91
commit 47bc505c25
2 changed files with 22 additions and 71 deletions

View file

@ -1,38 +1,12 @@
/* // `<NotificationFollow>`
// ======================
`<NotificationFollow>` // * * * * * * * //
======================
This component renders a follow notification. // Imports
// -------
__Props:__ // Package imports.
- __`id` (`PropTypes.number.isRequired`) :__
This is the id of the notification.
- __`onDeleteNotification` (`PropTypes.func.isRequired`) :__
The function to call when a notification should be
dismissed/deleted.
- __`account` (`PropTypes.object.isRequired`) :__
The account associated with the follow notification, ie the account
which followed the user.
- __`intl` (`PropTypes.object.isRequired`) :__
Our internationalization object, inserted by `@injectIntl`.
*/
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
/*
Imports:
--------
*/
// Package imports //
import React from 'react'; import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -40,22 +14,18 @@ import { FormattedMessage } from 'react-intl';
import escapeTextContentForBrowser from 'escape-html'; import escapeTextContentForBrowser from 'escape-html';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
// Mastodon imports // // Mastodon imports.
import emojify from '../../../mastodon/emoji'; import emojify from '../../../mastodon/emoji';
import Permalink from '../../../mastodon/components/permalink'; import Permalink from '../../../mastodon/components/permalink';
import AccountContainer from '../../../mastodon/containers/account_container'; import AccountContainer from '../../../mastodon/containers/account_container';
// Our imports // // Our imports.
import NotificationOverlayContainer from '../notification/overlay/container'; import NotificationOverlayContainer from '../notification/overlay/container';
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * // * * * * * * * //
/* // Implementation
// --------------
Implementation:
---------------
*/
export default class NotificationFollow extends ImmutablePureComponent { export default class NotificationFollow extends ImmutablePureComponent {
@ -65,24 +35,10 @@ export default class NotificationFollow extends ImmutablePureComponent {
notification : ImmutablePropTypes.map.isRequired, notification : ImmutablePropTypes.map.isRequired,
}; };
/*
### `render()`
This actually renders the component.
*/
render () { render () {
const { account, notification } = this.props; const { account, notification } = this.props;
/* // Links to the display name.
`link` is a container for the account's `displayName`, which links to
the account timeline using a `<Permalink>`.
*/
const displayName = account.get('display_name') || account.get('username'); const displayName = account.get('display_name') || account.get('username');
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
const link = ( const link = (
@ -95,12 +51,7 @@ the account timeline using a `<Permalink>`.
/> />
); );
/* // Renders.
We can now render our component.
*/
return ( return (
<div className='notification notification-follow'> <div className='notification notification-follow'>
<div className='notification__message'> <div className='notification__message'>

View file

@ -752,7 +752,7 @@
} }
.notification__message { .notification__message {
margin: -10px 0 10px; margin: -10px -10px 10px;
} }
} }
@ -970,8 +970,7 @@
.account__avatar-wrapper { .account__avatar-wrapper {
float: left; float: left;
margin-left: 12px; margin: 6px 16px 6px 6px;
margin-right: 12px;
} }
.account__avatar { .account__avatar {
@ -987,6 +986,7 @@
} }
.account__avatar-overlay { .account__avatar-overlay {
position: relative;
@include avatar-size(48px); @include avatar-size(48px);
&-base { &-base {
@ -1007,7 +1007,7 @@
.account__relationship { .account__relationship {
height: 18px; height: 18px;
padding: 10px; padding: 12px 10px;
white-space: nowrap; white-space: nowrap;
} }
@ -1322,9 +1322,7 @@
} }
.notification__message { .notification__message {
margin-left: 68px; padding: 8px 10px 0;
padding: 8px 0;
padding-bottom: 0;
cursor: default; cursor: default;
color: $ui-primary-color; color: $ui-primary-color;
font-size: 15px; font-size: 15px;
@ -1336,8 +1334,10 @@
} }
.notification__favourite-icon-wrapper { .notification__favourite-icon-wrapper {
left: -26px; float: left;
position: absolute; margin: 0 10px 0 0;
width: 48px;
text-align: right;
.star-icon { .star-icon {
color: $gold-star; color: $gold-star;