Change layout of posts in web UI (#19423)
This commit is contained in:
Eugen Rochko
GitHub
parent
fcca781aae
commit
0ca29eaa3f
13 changed files with 195 additions and 357 deletions
|
|
@ -136,7 +136,7 @@ class Account extends ImmutablePureComponent {
|
|||
<div className='account'>
|
||||
<div className='account__wrapper'>
|
||||
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
|
||||
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
||||
<div className='account__avatar-wrapper'><Avatar account={account} size={46} /></div>
|
||||
{mute_expires_at}
|
||||
<DisplayName account={account} />
|
||||
</Permalink>
|
||||
|
|
|
|||
|
|
@ -386,6 +386,15 @@ class Status extends ImmutablePureComponent {
|
|||
|
||||
account = status.get('account');
|
||||
status = status.get('reblog');
|
||||
} else if (showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) {
|
||||
const display_name_html = { __html: status.getIn(['account', 'display_name_html']) };
|
||||
|
||||
prepend = (
|
||||
<div className='status__prepend'>
|
||||
<div className='status__prepend-icon-wrapper'><Icon id='reply' className='status__prepend-icon' fixedWidth /></div>
|
||||
<FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (pictureInPicture.get('inUse')) {
|
||||
|
|
@ -481,7 +490,7 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
if (account === undefined || account === null) {
|
||||
statusAvatar = <Avatar account={status.get('account')} size={48} />;
|
||||
statusAvatar = <Avatar account={status.get('account')} size={46} />;
|
||||
} else {
|
||||
statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
|
||||
}
|
||||
|
|
@ -501,8 +510,6 @@ class Status extends ImmutablePureComponent {
|
|||
{prepend}
|
||||
|
||||
<div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted })} data-id={status.get('id')}>
|
||||
<div className='status__expand' onClick={this.handleClick} role='presentation' />
|
||||
|
||||
<div className='status__info'>
|
||||
<a onClick={this.handleClick} href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
|
||||
<span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
|
||||
|
|
@ -522,7 +529,6 @@ class Status extends ImmutablePureComponent {
|
|||
status={status}
|
||||
onClick={this.handleClick}
|
||||
expanded={!status.get('hidden')}
|
||||
showThread={showThread}
|
||||
onExpandedToggle={this.handleExpandedToggle}
|
||||
onTranslate={this.handleTranslate}
|
||||
collapsable
|
||||
|
|
|
|||
|
|
@ -246,8 +246,9 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
|
||||
render () {
|
||||
const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
|
||||
const { signedIn } = this.context.identity;
|
||||
|
||||
const anonymousAccess = !me;
|
||||
const anonymousAccess = !signedIn;
|
||||
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
|
||||
const pinnableStatus = ['public', 'unlisted', 'private'].includes(status.get('visibility'));
|
||||
const mutingConversation = status.get('muted');
|
||||
|
|
@ -350,24 +351,25 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
const shareButton = ('share' in navigator) && publicStatus && (
|
||||
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
|
||||
<IconButton className='status__action-bar__button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
|
||||
);
|
||||
|
||||
const filterButton = this.props.onFilter && (
|
||||
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
|
||||
<IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='status__action-bar'>
|
||||
<IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
|
||||
<IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
|
||||
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
|
||||
<IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
|
||||
<IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
|
||||
<IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
|
||||
<IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
|
||||
|
||||
{shareButton}
|
||||
|
||||
{filterButton}
|
||||
|
||||
<div className='status__action-bar-dropdown'>
|
||||
<div className='status__action-bar__dropdown'>
|
||||
<DropdownMenuContainer
|
||||
scrollKey={scrollKey}
|
||||
disabled={anonymousAccess}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@ class StatusContent extends React.PureComponent {
|
|||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
expanded: PropTypes.bool,
|
||||
showThread: PropTypes.bool,
|
||||
onExpandedToggle: PropTypes.func,
|
||||
onTranslate: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
|
|
@ -214,7 +213,6 @@ class StatusContent extends React.PureComponent {
|
|||
|
||||
const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
|
||||
const renderReadMore = this.props.onClick && status.get('collapsed');
|
||||
const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
|
||||
const renderTranslate = translationEnabled && this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && status.get('language') !== null && intl.locale !== status.get('language');
|
||||
|
||||
const content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') };
|
||||
|
|
@ -226,12 +224,6 @@ class StatusContent extends React.PureComponent {
|
|||
'status__content--collapsed': renderReadMore,
|
||||
});
|
||||
|
||||
const showThreadButton = renderViewThread && (
|
||||
<button className='status__content__read-more-button' onClick={this.props.onClick}>
|
||||
<FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
|
||||
</button>
|
||||
);
|
||||
|
||||
const readMoreButton = renderReadMore && (
|
||||
<button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
|
||||
<FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' fixedWidth />
|
||||
|
|
@ -275,7 +267,6 @@ class StatusContent extends React.PureComponent {
|
|||
|
||||
{!hidden && poll}
|
||||
{!hidden && translateButton}
|
||||
{showThreadButton}
|
||||
</div>
|
||||
);
|
||||
} else if (this.props.onClick) {
|
||||
|
|
@ -286,7 +277,6 @@ class StatusContent extends React.PureComponent {
|
|||
|
||||
{poll}
|
||||
{translateButton}
|
||||
{showThreadButton}
|
||||
</div>
|
||||
|
||||
{readMoreButton}
|
||||
|
|
@ -299,7 +289,6 @@ class StatusContent extends React.PureComponent {
|
|||
|
||||
{poll}
|
||||
{translateButton}
|
||||
{showThreadButton}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ class FeaturedTags extends ImmutablePureComponent {
|
|||
name={featuredTag.get('name')}
|
||||
href={featuredTag.get('url')}
|
||||
to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`}
|
||||
uses={featuredTag.get('statuses_count')}
|
||||
uses={featuredTag.get('statuses_count') * 1}
|
||||
withGraph={false}
|
||||
description={((featuredTag.get('statuses_count') * 1) > 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -326,25 +326,26 @@ class Header extends ImmutablePureComponent {
|
|||
{!(suspended || hidden) && (
|
||||
<div className='account__header__extra'>
|
||||
<div className='account__header__bio'>
|
||||
{fields.size > 0 && (
|
||||
<div className='account__header__fields'>
|
||||
{fields.map((pair, i) => (
|
||||
<dl key={i}>
|
||||
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
|
||||
|
||||
<dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}>
|
||||
{pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
|
||||
</dd>
|
||||
</dl>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(account.get('id') !== me && signedIn) && <AccountNoteContainer account={account} />}
|
||||
|
||||
{account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content translate' dangerouslySetInnerHTML={content} />}
|
||||
|
||||
<div className='account__header__joined'><FormattedMessage id='account.joined' defaultMessage='Joined {date}' values={{ date: intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' }) }} /></div>
|
||||
<div className='account__header__fields'>
|
||||
<dl>
|
||||
<dt><FormattedMessage id='account.joined_short' defaultMessage='Joined' /></dt>
|
||||
<dd>{intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' })}</dd>
|
||||
</dl>
|
||||
|
||||
{fields.map((pair, i) => (
|
||||
<dl key={i}>
|
||||
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
|
||||
|
||||
<dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}>
|
||||
{pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
|
||||
</dd>
|
||||
</dl>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='account__header__extra__links'>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ class ActionBar extends React.PureComponent {
|
|||
return (
|
||||
<div className='compose__action-bar'>
|
||||
<div className='compose__action-bar-dropdown'>
|
||||
<DropdownMenuContainer items={menu} icon='chevron-down' size={16} direction='right' />
|
||||
<DropdownMenuContainer items={menu} icon='ellipsis-v' size={18} direction='right' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default class NavigationBar extends ImmutablePureComponent {
|
|||
<div className='navigation-bar'>
|
||||
<Permalink href={this.props.account.get('url')} to={`/@${this.props.account.get('acct')}`}>
|
||||
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
|
||||
<Avatar account={this.props.account} size={48} />
|
||||
<Avatar account={this.props.account} size={46} />
|
||||
</Permalink>
|
||||
|
||||
<div className='navigation-bar__profile'>
|
||||
|
|
|
|||
|
|
@ -287,9 +287,10 @@ class ActionBar extends React.PureComponent {
|
|||
<div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
|
||||
<div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
|
||||
<div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
|
||||
{shareButton}
|
||||
<div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
|
||||
|
||||
{shareButton}
|
||||
|
||||
<div className='detailed-status__action-bar-dropdown'>
|
||||
<DropdownMenuContainer size={18} icon='ellipsis-h' disabled={!signedIn} status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
<div style={outerStyle}>
|
||||
<div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })}>
|
||||
<a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
|
||||
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
|
||||
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={46} /></div>
|
||||
<DisplayName account={status.get('account')} localDomain={this.props.domain} />
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import StatusContent from '../../../components/status_content';
|
||||
import Avatar from '../../../components/avatar';
|
||||
import RelativeTimestamp from '../../../components/relative_timestamp';
|
||||
import DisplayName from '../../../components/display_name';
|
||||
import IconButton from '../../../components/icon_button';
|
||||
import classNames from 'classnames';
|
||||
|
||||
|
|
@ -38,32 +34,8 @@ export default class ActionsModal extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const status = this.props.status && (
|
||||
<div className='status light'>
|
||||
<div className='boost-modal__status-header'>
|
||||
<div className='boost-modal__status-time'>
|
||||
<a href={this.props.status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
|
||||
<RelativeTimestamp timestamp={this.props.status.get('created_at')} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'>
|
||||
<div className='status__avatar'>
|
||||
<Avatar account={this.props.status.get('account')} size={48} />
|
||||
</div>
|
||||
|
||||
<DisplayName account={this.props.status.get('account')} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<StatusContent status={this.props.status} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal actions-modal'>
|
||||
{status}
|
||||
|
||||
<ul className={classNames({ 'with-status': !!status })}>
|
||||
{this.props.actions.map(this.renderAction)}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -97,12 +97,11 @@ class BoostModal extends ImmutablePureComponent {
|
|||
<div className='modal-root__modal boost-modal'>
|
||||
<div className='boost-modal__container'>
|
||||
<div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
|
||||
<div className='boost-modal__status-header'>
|
||||
<div className='boost-modal__status-time'>
|
||||
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
|
||||
<span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
|
||||
<RelativeTimestamp timestamp={status.get('created_at')} /></a>
|
||||
</div>
|
||||
<div className='status__info'>
|
||||
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
|
||||
<span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
|
||||
<RelativeTimestamp timestamp={status.get('created_at')} />
|
||||
</a>
|
||||
|
||||
<a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
|
||||
<div className='status__avatar'>
|
||||
|
|
|
|||
|
|
@ -367,7 +367,7 @@
|
|||
}
|
||||
|
||||
.compose-form {
|
||||
padding: 10px;
|
||||
padding: 15px;
|
||||
|
||||
&__sensitive-button {
|
||||
padding: 10px;
|
||||
|
|
@ -714,7 +714,7 @@
|
|||
|
||||
.compose-form__publish-button-wrapper {
|
||||
overflow: hidden;
|
||||
padding-top: 10px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -808,7 +808,7 @@
|
|||
.reply-indicator__content {
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
|
|
@ -955,12 +955,12 @@
|
|||
.status__content__read-more-button {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
line-height: 22px;
|
||||
color: $highlight-text-color;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
padding-top: 8px;
|
||||
padding-top: 16px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -972,7 +972,7 @@
|
|||
.translate-button {
|
||||
margin-top: 16px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: $dark-text-color;
|
||||
|
|
@ -1022,11 +1022,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.status__prepend-icon-wrapper {
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.focusable {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
|
@ -1040,19 +1035,11 @@
|
|||
}
|
||||
|
||||
.status {
|
||||
padding: 8px 10px;
|
||||
padding-left: 68px;
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
min-height: 54px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
cursor: auto;
|
||||
|
||||
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
|
||||
// Add margin to avoid Edge auto-hiding scrollbar appearing over content.
|
||||
// On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
|
||||
padding-right: 26px; // 10px + 16px
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
|
|
@ -1061,9 +1048,11 @@
|
|||
opacity: 1;
|
||||
animation: fade 150ms linear;
|
||||
|
||||
.media-gallery,
|
||||
.video-player,
|
||||
.audio-player {
|
||||
margin-top: 8px;
|
||||
.audio-player,
|
||||
.attachment-list {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&.light {
|
||||
|
|
@ -1091,7 +1080,7 @@
|
|||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
&__spoiler-link {
|
||||
color: $primary-text-color;
|
||||
background: $ui-primary-color;
|
||||
|
||||
|
|
@ -1104,7 +1093,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.status__relative-time,
|
||||
.status__relative-time {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
height: 40px;
|
||||
order: 2;
|
||||
flex: 0 0 auto;
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
.notification__relative_time {
|
||||
color: $dark-text-color;
|
||||
float: right;
|
||||
|
|
@ -1121,13 +1119,36 @@
|
|||
}
|
||||
|
||||
.status__info .status__display-name {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.display-name {
|
||||
bdi {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__account {
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status__info {
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.status-check-box__status {
|
||||
|
|
@ -1166,12 +1187,14 @@
|
|||
}
|
||||
|
||||
.status__prepend {
|
||||
margin-left: 68px;
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
color: $dark-text-color;
|
||||
padding: 8px 0;
|
||||
padding-bottom: 2px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
.status__display-name strong {
|
||||
color: $dark-text-color;
|
||||
|
|
@ -1185,22 +1208,11 @@
|
|||
}
|
||||
|
||||
.status__action-bar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.status__action-bar-button {
|
||||
margin-right: 18px;
|
||||
|
||||
&.icon-button--with-counter {
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.status__action-bar-dropdown {
|
||||
height: 23.15px;
|
||||
width: 23.15px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.detailed-status__action-bar-dropdown {
|
||||
|
|
@ -1213,7 +1225,7 @@
|
|||
|
||||
.detailed-status {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
padding: 14px 10px;
|
||||
padding: 16px;
|
||||
|
||||
&--flex {
|
||||
display: flex;
|
||||
|
|
@ -1243,14 +1255,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.media-gallery,
|
||||
.video-player,
|
||||
.audio-player {
|
||||
margin-top: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
margin-top: 15px;
|
||||
margin-top: 16px;
|
||||
color: $dark-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
|
|
@ -1312,7 +1325,7 @@
|
|||
}
|
||||
|
||||
.account {
|
||||
padding: 10px;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
&.compact {
|
||||
|
|
@ -1326,7 +1339,9 @@
|
|||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: $darker-text-color;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
|
@ -1359,12 +1374,7 @@
|
|||
|
||||
.account__wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.account__avatar-wrapper {
|
||||
float: left;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
|
|
@ -1372,9 +1382,6 @@
|
|||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-size: 36px 36px;
|
||||
|
||||
&-inline {
|
||||
display: inline-block;
|
||||
|
|
@ -1414,7 +1421,7 @@ a .account__avatar {
|
|||
}
|
||||
|
||||
.account__avatar-overlay {
|
||||
@include avatar-size(48px);
|
||||
@include avatar-size(46px);
|
||||
|
||||
position: relative;
|
||||
|
||||
|
|
@ -1615,10 +1622,13 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.detailed-status__display-name {
|
||||
color: $secondary-text-color;
|
||||
display: block;
|
||||
line-height: 24px;
|
||||
margin-bottom: 15px;
|
||||
color: $darker-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
strong,
|
||||
|
|
@ -1629,31 +1639,13 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
strong {
|
||||
font-size: 16px;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__display-avatar {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
height: 48px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.status__expand {
|
||||
width: 68px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.muted {
|
||||
|
|
@ -1684,40 +1676,52 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.notification__report {
|
||||
padding: 8px 10px;
|
||||
padding-left: 68px;
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
min-height: 54px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
&__avatar {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__details {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $darker-text-color;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
& > div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
&__actions {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.notification__message {
|
||||
margin: 0 10px 0 68px;
|
||||
padding: 8px 0 0;
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
cursor: default;
|
||||
color: $darker-text-color;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.fa {
|
||||
color: $highlight-text-color;
|
||||
|
|
@ -1731,9 +1735,6 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.notification__favourite-icon-wrapper {
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
|
||||
.star-icon {
|
||||
color: $gold-star;
|
||||
}
|
||||
|
|
@ -1767,15 +1768,10 @@ a.account__display-name {
|
|||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.notification__relative_time {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
|
@ -1788,10 +1784,6 @@ a.account__display-name {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.display-name__account {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status__relative-time,
|
||||
.detailed-status__datetime {
|
||||
&:hover {
|
||||
|
|
@ -1860,11 +1852,12 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.navigation-bar {
|
||||
padding: 10px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
cursor: default;
|
||||
gap: 10px;
|
||||
color: $darker-text-color;
|
||||
|
||||
strong {
|
||||
|
|
@ -1899,9 +1892,7 @@ a.account__display-name {
|
|||
|
||||
.navigation-bar__profile {
|
||||
flex: 1 1 auto;
|
||||
margin-left: 8px;
|
||||
line-height: 20px;
|
||||
margin-top: -1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -2466,101 +2457,6 @@ $ui-header-height: 55px;
|
|||
padding: 10px 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
padding: 15px;
|
||||
|
||||
.media-gallery,
|
||||
.video-player,
|
||||
.audio-player {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__bar {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.navigation-bar,
|
||||
.compose-form {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.notification__report {
|
||||
padding: 15px 15px 15px (48px + 15px * 2);
|
||||
min-height: 48px + 2px;
|
||||
|
||||
&__avatar {
|
||||
left: 15px;
|
||||
top: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 15px 15px 15px (48px + 15px * 2);
|
||||
min-height: 48px + 2px;
|
||||
|
||||
&__avatar {
|
||||
left: 15px;
|
||||
top: 17px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
&__prepend {
|
||||
margin-left: 48px + 15px * 2;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
&__prepend-icon-wrapper {
|
||||
left: -32px;
|
||||
}
|
||||
|
||||
.media-gallery,
|
||||
&__action-bar,
|
||||
.video-player,
|
||||
.audio-player {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
padding: 15px 10px;
|
||||
|
||||
&__header__bio {
|
||||
margin: 0 -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
&__message {
|
||||
margin-left: 48px + 15px * 2;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
&__favourite-icon-wrapper {
|
||||
left: -32px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.account {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.account__avatar-wrapper {
|
||||
margin-left: 17px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $no-gap-breakpoint) {
|
||||
|
|
@ -2805,10 +2701,7 @@ $ui-header-height: 55px;
|
|||
}
|
||||
|
||||
.navigation-bar {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
flex: 0 1 48px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.compose-form {
|
||||
|
|
@ -5303,24 +5196,6 @@ a.status-card.compact:hover {
|
|||
width: 480px;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
|
||||
.status__display-name {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
height: 28px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: lighten($secondary-text-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.actions-modal {
|
||||
|
|
@ -5352,9 +5227,9 @@ a.status-card.compact:hover {
|
|||
.block-modal__action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: $ui-secondary-color;
|
||||
padding: 10px;
|
||||
line-height: 36px;
|
||||
padding: 15px;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -5368,15 +5243,6 @@ a.status-card.compact:hover {
|
|||
}
|
||||
}
|
||||
|
||||
.boost-modal__status-header {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.boost-modal__status-time {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mute-modal,
|
||||
.block-modal {
|
||||
line-height: 24px;
|
||||
|
|
@ -5988,7 +5854,7 @@ a.status-card.compact:hover {
|
|||
font-size: 14px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border-radius: 4px;
|
||||
margin-top: 14px;
|
||||
margin-top: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
&__icon {
|
||||
|
|
@ -6034,7 +5900,6 @@ a.status-card.compact:hover {
|
|||
|
||||
&.compact {
|
||||
border: 0;
|
||||
margin-top: 4px;
|
||||
|
||||
.attachment-list__list {
|
||||
padding: 0;
|
||||
|
|
@ -7177,6 +7042,7 @@ noscript {
|
|||
|
||||
.account__header {
|
||||
overflow: hidden;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.5;
|
||||
|
|
@ -7210,8 +7076,7 @@ noscript {
|
|||
|
||||
&__bar {
|
||||
position: relative;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
padding: 5px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
|
||||
.avatar {
|
||||
|
|
@ -7230,8 +7095,8 @@ noscript {
|
|||
&__tabs {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 7px 10px;
|
||||
margin-top: -55px;
|
||||
padding-top: 10px;
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
|
|
@ -7249,7 +7114,8 @@ noscript {
|
|||
}
|
||||
|
||||
&__name {
|
||||
padding: 5px 10px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.account-role {
|
||||
vertical-align: top;
|
||||
|
|
@ -7261,17 +7127,17 @@ noscript {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
color: $darker-text-color;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
|
|
@ -7286,34 +7152,41 @@ noscript {
|
|||
}
|
||||
|
||||
&__bio {
|
||||
overflow: hidden;
|
||||
margin: 0 -5px;
|
||||
|
||||
.account__header__content {
|
||||
padding: 20px 15px;
|
||||
padding-bottom: 5px;
|
||||
color: $primary-text-color;
|
||||
|
||||
.columns-area--mobile & {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__joined {
|
||||
font-size: 14px;
|
||||
padding: 5px 15px;
|
||||
color: $darker-text-color;
|
||||
|
||||
.columns-area--mobile & {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
margin: 0;
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
margin-top: 16px;
|
||||
border-radius: 4px;
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 0;
|
||||
|
||||
dl {
|
||||
display: block;
|
||||
padding: 11px 16px;
|
||||
border-bottom-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
dd,
|
||||
dt {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
padding: 0;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
dt {
|
||||
width: auto;
|
||||
background: transparent;
|
||||
text-transform: uppercase;
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
dd {
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
|
|
@ -7330,12 +7203,14 @@ noscript {
|
|||
}
|
||||
|
||||
&__extra {
|
||||
margin-top: 4px;
|
||||
margin-top: 16px;
|
||||
|
||||
&__links {
|
||||
font-size: 14px;
|
||||
color: $darker-text-color;
|
||||
padding: 10px 0;
|
||||
margin: 0 -10px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
|
|
@ -7353,17 +7228,10 @@ noscript {
|
|||
}
|
||||
|
||||
&__account-note {
|
||||
padding: 15px;
|
||||
padding-bottom: 10px;
|
||||
color: $primary-text-color;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
|
||||
.columns-area--mobile & {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
margin-bottom: 10px;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
|
|
|
|||
Loading…
Reference in a new issue