me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(style): Fix styles after classname refactor (#2368)

Browse source 
Float detailed status display avatar left. Only apply display block to display names in status info, not in detailed status. Thanks to @nightpool for finding those. Make star icon in notification show up as gold. Add anchor selector back to status__content__spoiler-link in order to override default anchor style elsewhere.
This commit is contained in:
Stephen Burgess 2017-04-23 14:34:33 -05:00 committed by Eugen
parent 38de6907d9
commit 5a0fdaded9
2 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/components/features/status/components/detailed_status.jsx
View file

@ -51,7 +51,7 @@ class DetailedStatus extends React.PureComponent {
return ( return (
<div className='detailed-status'> <div className='detailed-status'>
<a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'> <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
<div className='.detailed-status__display-avatar'><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div> <div className='detailed-status__display-avatar'><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div>
<DisplayName account={status.get('account')} /> <DisplayName account={status.get('account')} />
</a> </a>

11
app/assets/stylesheets/components.scss
View file

@ -496,6 +496,9 @@ a.status__content__spoiler-link {
.status__display-name { .status__display-name {
color: lighten($color1, 26%); color: lighten($color1, 26%);
}
.status__info .status__display-name {
display: block; display: block;
max-width: 100%; max-width: 100%;
padding-right: 25px; padding-right: 25px;
@ -835,7 +838,7 @@ a.status__content__spoiler-link {
} }
.detailed-status__display-avatar { .detailed-status__display-avatar {
float: right; float: left;
margin-right: 10px; margin-right: 10px;
} }
@ -861,7 +864,7 @@ a.status__content__spoiler-link {
opacity: 0.5; opacity: 0.5;
} }
.status__content__spoiler-link { a.status__content__spoiler-link {
background: lighten($color1, 26%); background: lighten($color1, 26%);
color: lighten($color1, 4%); color: lighten($color1, 4%);
@ -889,6 +892,10 @@ a.status__content__spoiler-link {
.notification__favourite-icon-wrapper { .notification__favourite-icon-wrapper {
left: -26px; left: -26px;
position: absolute; position: absolute;
.star-icon {
color: #ca8f04;
}
} }
.star-icon.active { .star-icon.active {