Eugen Rochko
parent
d2619e0b53
commit
5c4c046132
5 changed files with 89 additions and 80 deletions
|
|
@ -7,16 +7,6 @@ import Permalink from '../../../components/permalink';
|
|||
import emojify from '../../../emoji';
|
||||
import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser';
|
||||
|
||||
const messageStyle = {
|
||||
marginLeft: '68px',
|
||||
padding: '8px 0',
|
||||
paddingBottom: '0',
|
||||
cursor: 'default',
|
||||
color: '#d9e1e8',
|
||||
fontSize: '15px',
|
||||
position: 'relative'
|
||||
};
|
||||
|
||||
const linkStyle = {
|
||||
fontWeight: '500'
|
||||
};
|
||||
|
|
@ -32,9 +22,9 @@ const Notification = React.createClass({
|
|||
renderFollow (account, link) {
|
||||
return (
|
||||
<div className='notification'>
|
||||
<div style={messageStyle}>
|
||||
<div className='notification__message'>
|
||||
<div style={{ position: 'absolute', 'left': '-26px'}}>
|
||||
<i className='fa fa-fw fa-user-plus' style={{ color: '#2b90d9' }} />
|
||||
<i className='fa fa-fw fa-user-plus' />
|
||||
</div>
|
||||
|
||||
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
|
||||
|
|
@ -52,7 +42,7 @@ const Notification = React.createClass({
|
|||
renderFavourite (notification, link) {
|
||||
return (
|
||||
<div className='notification'>
|
||||
<div style={messageStyle}>
|
||||
<div className='notification__message'>
|
||||
<div style={{ position: 'absolute', 'left': '-26px'}}>
|
||||
<i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} />
|
||||
</div>
|
||||
|
|
@ -68,9 +58,9 @@ const Notification = React.createClass({
|
|||
renderReblog (notification, link) {
|
||||
return (
|
||||
<div className='notification'>
|
||||
<div style={messageStyle}>
|
||||
<div className='notification__message'>
|
||||
<div style={{ position: 'absolute', 'left': '-26px'}}>
|
||||
<i className='fa fa-fw fa-retweet' style={{ color: '#2b90d9' }} />
|
||||
<i className='fa fa-fw fa-retweet' />
|
||||
</div>
|
||||
|
||||
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
|
||||
|
|
|
|||
|
|
@ -1,18 +1,6 @@
|
|||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
|
||||
const outerStyle = {
|
||||
display: 'flex',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
border: '1px solid #363c4b',
|
||||
borderRadius: '4px',
|
||||
color: '#616b86',
|
||||
marginTop: '14px',
|
||||
textDecoration: 'none',
|
||||
overflow: 'hidden'
|
||||
};
|
||||
|
||||
const contentStyle = {
|
||||
flex: '1 1 auto',
|
||||
padding: '8px',
|
||||
|
|
@ -20,25 +8,6 @@ const contentStyle = {
|
|||
overflow: 'hidden'
|
||||
};
|
||||
|
||||
const titleStyle = {
|
||||
display: 'block',
|
||||
fontWeight: '500',
|
||||
marginBottom: '5px',
|
||||
color: '#d9e1e8',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
};
|
||||
|
||||
const descriptionStyle = {
|
||||
color: '#d9e1e8'
|
||||
};
|
||||
|
||||
const imageOuterStyle = {
|
||||
flex: '0 0 100px',
|
||||
background: '#373b4a'
|
||||
};
|
||||
|
||||
const imageStyle = {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
|
|
@ -77,20 +46,20 @@ const Card = React.createClass({
|
|||
|
||||
if (card.get('image')) {
|
||||
image = (
|
||||
<div style={imageOuterStyle}>
|
||||
<div className='status-card__image'>
|
||||
<img src={card.get('image')} alt={card.get('title')} style={imageStyle} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a style={outerStyle} href={card.get('url')} className='status-card'>
|
||||
<a href={card.get('url')} className='status-card'>
|
||||
{image}
|
||||
|
||||
<div style={contentStyle}>
|
||||
<strong style={titleStyle} title={card.get('title')}>{card.get('title')}</strong>
|
||||
<p style={descriptionStyle}>{card.get('description').substring(0, 50)}</p>
|
||||
<span style={hostStyle}>{getHostname(card.get('url'))}</span>
|
||||
<div className='status-card__content' style={contentStyle}>
|
||||
<strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
|
||||
<p className='status-card__description'>{card.get('description').substring(0, 50)}</p>
|
||||
<span className='status-card__host' style={hostStyle}>{getHostname(card.get('url'))}</span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const DetailedStatus = React.createClass({
|
|||
|
||||
{media}
|
||||
|
||||
<div style={{ marginTop: '15px', color: '#616b86', fontSize: '14px', lineHeight: '18px' }}>
|
||||
<div className='detailed-status__meta'>
|
||||
<a className='detailed-status__datetime' style={{ color: 'inherit' }} href={status.get('url')} target='_blank' rel='noopener'><FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /></a>{applicationLink} · <Link to={`/statuses/${status.get('id')}/reblogs`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-retweet' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('reblogs_count')} /></span></Link> · <Link to={`/statuses/${status.get('id')}/favourites`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-star' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('favourites_count')} /></span></Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
.column-icon {
|
||||
color: $color3;
|
||||
background: lighten($color1, 4%);
|
||||
|
||||
|
||||
&:hover {
|
||||
color: lighten($color3, 7%);
|
||||
}
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
a.status__content__spoiler-link {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
color: lighten($color1, 6%);
|
||||
color: lighten($color1, 8%);
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
padding: 0px 6px;
|
||||
|
|
@ -201,7 +201,7 @@ a.status__content__spoiler-link {
|
|||
padding-left: 68px;
|
||||
position: relative;
|
||||
min-height: 48px;
|
||||
border-bottom: 1px solid lighten($color1, 6%);
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
cursor: default;
|
||||
|
||||
.status__relative-time {
|
||||
|
|
@ -228,7 +228,7 @@ a.status__content__spoiler-link {
|
|||
|
||||
.detailed-status {
|
||||
background: lighten($color1, 4%);
|
||||
|
||||
|
||||
.status__content {
|
||||
font-size: 19px;
|
||||
line-height: 24px;
|
||||
|
|
@ -240,12 +240,19 @@ a.status__content__spoiler-link {
|
|||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
margin-top: 15px;
|
||||
color: lighten($color1, 26%);
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.detailed-status__action-bar {
|
||||
background: lighten($color1, 4%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-top: 1px solid lighten($color1, 6%);
|
||||
border-bottom: 1px solid lighten($color1, 6%);
|
||||
border-top: 1px solid lighten($color1, 8%);
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
|
|
@ -260,7 +267,7 @@ a.status__content__spoiler-link {
|
|||
|
||||
.account {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid lighten($color1, 6%);
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -302,7 +309,7 @@ a.status__content__spoiler-link {
|
|||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
color: $color3;
|
||||
|
||||
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
|
@ -329,8 +336,8 @@ a.status__content__spoiler-link {
|
|||
}
|
||||
|
||||
.account__action-bar {
|
||||
border-top: 1px solid lighten($color1, 6%);
|
||||
border-bottom: 1px solid lighten($color1, 6%);
|
||||
border-top: 1px solid lighten($color1, 8%);
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
line-height: 36px;
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -341,7 +348,7 @@ a.status__content__spoiler-link {
|
|||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
width: 80px;
|
||||
border-left: 1px solid lighten($color1, 6%);
|
||||
border-left: 1px solid lighten($color1, 8%);
|
||||
padding: 10px 5px;
|
||||
|
||||
& > span {
|
||||
|
|
@ -426,6 +433,20 @@ a.status__content__spoiler-link {
|
|||
}
|
||||
}
|
||||
|
||||
.notification__message {
|
||||
margin-left: 68px;
|
||||
padding: 8px 0;
|
||||
padding-bottom: 0;
|
||||
cursor: default;
|
||||
color: $color3;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
|
||||
.fa {
|
||||
color: $color4;
|
||||
}
|
||||
}
|
||||
|
||||
.notification__display-name {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
|
@ -650,7 +671,7 @@ a.status__content__spoiler-link {
|
|||
|
||||
.tabs-bar {
|
||||
display: flex;
|
||||
background: lighten($color1, 6%);
|
||||
background: lighten($color1, 8%);
|
||||
flex: 0 0 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -664,7 +685,7 @@ a.status__content__spoiler-link {
|
|||
text-align: center;
|
||||
font-size:12px;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid lighten($color1, 6%);
|
||||
border-bottom: 2px solid lighten($color1, 8%);
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid $color4;
|
||||
|
|
@ -854,9 +875,9 @@ a.status__content__spoiler-link {
|
|||
}
|
||||
|
||||
.column-link {
|
||||
background: lighten($color1, 6%);
|
||||
background: lighten($color1, 8%);
|
||||
color: $color5;
|
||||
|
||||
|
||||
&:hover {
|
||||
background: lighten($color1, 11%);
|
||||
}
|
||||
|
|
@ -974,11 +995,40 @@ button.active i.fa-retweet {
|
|||
}
|
||||
|
||||
.status-card {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
border: 1px solid lighten($color1, 8%);
|
||||
border-radius: 4px;
|
||||
color: lighten($color1, 26%);
|
||||
margin-top: 14px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color1, 6%);
|
||||
background: lighten($color1, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.status-card__title {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
color: $color3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-card__description {
|
||||
color: $color3;
|
||||
}
|
||||
|
||||
.status-card__image {
|
||||
flex: 0 0 100px;
|
||||
background: lighten($color1, 8%);
|
||||
}
|
||||
|
||||
.load-more {
|
||||
display: block;
|
||||
color: lighten($color1, 26%);
|
||||
|
|
@ -987,7 +1037,7 @@ button.active i.fa-retweet {
|
|||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color1, 6%);
|
||||
background: lighten($color1, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1037,8 +1087,8 @@ button.active i.fa-retweet {
|
|||
}
|
||||
|
||||
.collapsable {
|
||||
color: $color5;
|
||||
background: lighten($color1, 6%);
|
||||
color: $color5;
|
||||
background: lighten($color1, 8%);
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
|
|
@ -1047,17 +1097,17 @@ button.active i.fa-retweet {
|
|||
}
|
||||
|
||||
.modal-container--preloader {
|
||||
background: lighten($color1, 6%);
|
||||
background: lighten($color1, 8%);
|
||||
}
|
||||
|
||||
.account--panel {
|
||||
background: lighten($color1, 4%);
|
||||
border-top: 1px solid lighten($color1, 6%);
|
||||
border-bottom: 1px solid lighten($color1, 6%);
|
||||
border-top: 1px solid lighten($color1, 8%);
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
}
|
||||
|
||||
.column-settings--outer {
|
||||
background: lighten($color1, 6%);
|
||||
background: lighten($color1, 8%);
|
||||
}
|
||||
|
||||
.column-settings--section {
|
||||
|
|
|
|||
|
|
@ -5,24 +5,24 @@
|
|||
.entry {
|
||||
background: lighten($color2, 8%);
|
||||
|
||||
&, .detailed-status.light {
|
||||
.detailed-status.light, .status.light {
|
||||
border-bottom: 1px solid $color2;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&, .detailed-status.light {
|
||||
&, .detailed-status.light, .status.light {
|
||||
border-bottom: 0;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&, .detailed-status.light {
|
||||
&, .detailed-status.light, .status.light {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&, .detailed-status.light {
|
||||
&, .detailed-status.light, .status.light {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue