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

Change layout of posts in web UI (#19423)

Browse Source
main
Eugen Rochko 2 years ago committed by GitHub
parent fcca781aae
commit 0ca29eaa3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 193 additions and 355 deletions
Show Stats Download Patch File Download Diff File

2
app/javascript/mastodon/components/account.js
Unescape View File

@ -136,7 +136,7 @@ class Account extends ImmutablePureComponent {
<div className='account'> <div className='account'>
<div className='account__wrapper'> <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')}`}> <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} {mute_expires_at}
<DisplayName account={account} /> <DisplayName account={account} />
</Permalink> </Permalink>

14
app/javascript/mastodon/components/status.js
Unescape View File

@ -386,6 +386,15 @@ class Status extends ImmutablePureComponent {
account = status.get('account'); account = status.get('account');
status = status.get('reblog'); 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')) { if (pictureInPicture.get('inUse')) {
@ -481,7 +490,7 @@ class Status extends ImmutablePureComponent {
} }
if (account === undefined || account === null) { if (account === undefined || account === null) {
statusAvatar = <Avatar account={status.get('account')} size={48} />; statusAvatar = <Avatar account={status.get('account')} size={46} />;
} else { } else {
statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />; statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
} }
@ -501,8 +510,6 @@ class Status extends ImmutablePureComponent {
{prepend} {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={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'> <div className='status__info'>
<a onClick={this.handleClick} href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'> <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> <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
@ -522,7 +529,6 @@ class Status extends ImmutablePureComponent {
status={status} status={status}
onClick={this.handleClick} onClick={this.handleClick}
expanded={!status.get('hidden')} expanded={!status.get('hidden')}
showThread={showThread}
onExpandedToggle={this.handleExpandedToggle} onExpandedToggle={this.handleExpandedToggle}
onTranslate={this.handleTranslate} onTranslate={this.handleTranslate}
collapsable collapsable

16
app/javascript/mastodon/components/status_action_bar.js
Unescape View File

@ -246,8 +246,9 @@ class StatusActionBar extends ImmutablePureComponent {
render () { render () {
const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props; 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 publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
const pinnableStatus = ['public', 'unlisted', 'private'].includes(status.get('visibility')); const pinnableStatus = ['public', 'unlisted', 'private'].includes(status.get('visibility'));
const mutingConversation = status.get('muted'); const mutingConversation = status.get('muted');
@ -350,24 +351,25 @@ class StatusActionBar extends ImmutablePureComponent {
} }
const shareButton = ('share' in navigator) && publicStatus && ( 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 && ( 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 ( return (
<div className='status__action-bar'> <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='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={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 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} {shareButton}
{filterButton} {filterButton}
<div className='status__action-bar-dropdown'> <div className='status__action-bar__dropdown'>
<DropdownMenuContainer <DropdownMenuContainer
scrollKey={scrollKey} scrollKey={scrollKey}
disabled={anonymousAccess} disabled={anonymousAccess}

11
app/javascript/mastodon/components/status_content.js
Unescape View File

@ -58,7 +58,6 @@ class StatusContent extends React.PureComponent {
static propTypes = { static propTypes = {
status: ImmutablePropTypes.map.isRequired, status: ImmutablePropTypes.map.isRequired,
expanded: PropTypes.bool, expanded: PropTypes.bool,
showThread: PropTypes.bool,
onExpandedToggle: PropTypes.func, onExpandedToggle: PropTypes.func,
onTranslate: PropTypes.func, onTranslate: PropTypes.func,
onClick: 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 hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
const renderReadMore = this.props.onClick && status.get('collapsed'); 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 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') }; 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, '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 && ( const readMoreButton = renderReadMore && (
<button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'> <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 /> <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 && poll}
{!hidden && translateButton} {!hidden && translateButton}
{showThreadButton}
</div> </div>
); );
} else if (this.props.onClick) { } else if (this.props.onClick) {
@ -286,7 +277,6 @@ class StatusContent extends React.PureComponent {
{poll} {poll}
{translateButton} {translateButton}
{showThreadButton}
</div> </div>
{readMoreButton} {readMoreButton}
@ -299,7 +289,6 @@ class StatusContent extends React.PureComponent {
{poll} {poll}
{translateButton} {translateButton}
{showThreadButton}
</div> </div>
); );
} }

2
app/javascript/mastodon/features/account/components/featured_tags.js
Unescape View File

@ -41,7 +41,7 @@ class FeaturedTags extends ImmutablePureComponent {
name={featuredTag.get('name')} name={featuredTag.get('name')}
href={featuredTag.get('url')} href={featuredTag.get('url')}
to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`} to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`}
uses={featuredTag.get('statuses_count')} uses={featuredTag.get('statuses_count') * 1}
withGraph={false} 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)} 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)}
/> />

17
app/javascript/mastodon/features/account/components/header.js
Unescape View File

@ -326,8 +326,16 @@ class Header extends ImmutablePureComponent {
{!(suspended || hidden) && ( {!(suspended || hidden) && (
<div className='account__header__extra'> <div className='account__header__extra'>
<div className='account__header__bio'> <div className='account__header__bio'>
{fields.size > 0 && ( {(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__fields'> <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) => ( {fields.map((pair, i) => (
<dl key={i}> <dl key={i}>
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' /> <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
@ -338,13 +346,6 @@ class Header extends ImmutablePureComponent {
</dl> </dl>
))} ))}
</div> </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> </div>
<div className='account__header__extra__links'> <div className='account__header__extra__links'>

2
app/javascript/mastodon/features/compose/components/action_bar.js
Unescape View File

@ -56,7 +56,7 @@ class ActionBar extends React.PureComponent {
return ( return (
<div className='compose__action-bar'> <div className='compose__action-bar'>
<div className='compose__action-bar-dropdown'> <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>
</div> </div>
); );

2
app/javascript/mastodon/features/compose/components/navigation_bar.js
Unescape View File

@ -21,7 +21,7 @@ export default class NavigationBar extends ImmutablePureComponent {
<div className='navigation-bar'> <div className='navigation-bar'>
<Permalink href={this.props.account.get('url')} to={`/@${this.props.account.get('acct')}`}> <Permalink href={this.props.account.get('url')} to={`/@${this.props.account.get('acct')}`}>
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span> <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> </Permalink>
<div className='navigation-bar__profile'> <div className='navigation-bar__profile'>

3
app/javascript/mastodon/features/status/components/action_bar.js
Unescape View File

@ -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 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={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> <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> <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'> <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)} /> <DropdownMenuContainer size={18} icon='ellipsis-h' disabled={!signedIn} status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
</div> </div>

2
app/javascript/mastodon/features/status/components/detailed_status.js
Unescape View File

@ -262,7 +262,7 @@ class DetailedStatus extends ImmutablePureComponent {
<div style={outerStyle}> <div style={outerStyle}>
<div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })}> <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'> <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} /> <DisplayName account={status.get('account')} localDomain={this.props.domain} />
</a> </a>

28
app/javascript/mastodon/features/ui/components/actions_modal.js
Unescape View File

@ -2,10 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; 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 IconButton from '../../../components/icon_button';
import classNames from 'classnames'; import classNames from 'classnames';
@ -38,32 +34,8 @@ export default class ActionsModal extends ImmutablePureComponent {
} }
render () { 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 ( return (
<div className='modal-root__modal actions-modal'> <div className='modal-root__modal actions-modal'>
{status}
<ul className={classNames({ 'with-status': !!status })}> <ul className={classNames({ 'with-status': !!status })}>
{this.props.actions.map(this.renderAction)} {this.props.actions.map(this.renderAction)}
</ul> </ul>

7
app/javascript/mastodon/features/ui/components/boost_modal.js
Unescape View File

@ -97,12 +97,11 @@ class BoostModal extends ImmutablePureComponent {
<div className='modal-root__modal boost-modal'> <div className='modal-root__modal boost-modal'>
<div className='boost-modal__container'> <div className='boost-modal__container'>
<div className={classNames('status', `status-${status.get('visibility')}`, 'light')}> <div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
<div className='boost-modal__status-header'> <div className='status__info'>
<div className='boost-modal__status-time'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'> <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> <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
<RelativeTimestamp timestamp={status.get('created_at')} /></a> <RelativeTimestamp timestamp={status.get('created_at')} />
</div> </a>
<a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'> <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'> <div className='status__avatar'>

424
app/javascript/styles/mastodon/components.scss
Unescape View File

@ -367,7 +367,7 @@
} }
.compose-form { .compose-form {
padding: 10px; padding: 15px;
&__sensitive-button { &__sensitive-button {
padding: 10px; padding: 10px;
@ -714,7 +714,7 @@
.compose-form__publish-button-wrapper { .compose-form__publish-button-wrapper {
overflow: hidden; overflow: hidden;
padding-top: 10px; padding-top: 15px;
} }
} }
} }
@ -808,7 +808,7 @@
.reply-indicator__content { .reply-indicator__content {
position: relative; position: relative;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 22px;
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
@ -955,12 +955,12 @@
.status__content__read-more-button { .status__content__read-more-button {
display: block; display: block;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 22px;
color: $highlight-text-color; color: $highlight-text-color;
border: 0; border: 0;
background: transparent; background: transparent;
padding: 0; padding: 0;
padding-top: 8px; padding-top: 16px;
text-decoration: none; text-decoration: none;
&:hover, &:hover,
@ -972,7 +972,7 @@
.translate-button { .translate-button {
margin-top: 16px; margin-top: 16px;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 22px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: $dark-text-color; color: $dark-text-color;
@ -1022,11 +1022,6 @@
} }
} }
.status__prepend-icon-wrapper {
left: -26px;
position: absolute;
}
.focusable { .focusable {
&:focus { &:focus {
outline: 0; outline: 0;
@ -1040,19 +1035,11 @@
} }
.status { .status {
padding: 8px 10px; padding: 16px;
padding-left: 68px;
position: relative;
min-height: 54px; min-height: 54px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: auto; 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 { @keyframes fade {
0% { opacity: 0; } 0% { opacity: 0; }
100% { opacity: 1; } 100% { opacity: 1; }
@ -1061,9 +1048,11 @@
opacity: 1; opacity: 1;
animation: fade 150ms linear; animation: fade 150ms linear;
.media-gallery,
.video-player, .video-player,
.audio-player { .audio-player,
margin-top: 8px; .attachment-list {
margin-top: 16px;
} }
&.light { &.light {
@ -1091,7 +1080,7 @@
color: $highlight-text-color; color: $highlight-text-color;
} }
a.status__content__spoiler-link { &__spoiler-link {
color: $primary-text-color; color: $primary-text-color;
background: $ui-primary-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 { .notification__relative_time {
color: $dark-text-color; color: $dark-text-color;
float: right; float: right;
@ -1121,13 +1119,36 @@
} }
.status__info .status__display-name { .status__info .status__display-name {
display: block;
max-width: 100%; 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 { .status__info {
font-size: 15px; font-size: 15px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
} }
.status-check-box__status { .status-check-box__status {
@ -1166,12 +1187,14 @@
} }
.status__prepend { .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; color: $dark-text-color;
padding: 8px 0;
padding-bottom: 2px;
font-size: 14px;
position: relative;
.status__display-name strong { .status__display-name strong {
color: $dark-text-color; color: $dark-text-color;
@ -1185,22 +1208,11 @@
} }
.status__action-bar { .status__action-bar {
align-items: center;
display: flex; display: flex;
margin-top: 8px; justify-content: space-between;
} align-items: center;
gap: 18px;
.status__action-bar-button { margin-top: 16px;
margin-right: 18px;
&.icon-button--with-counter {
margin-right: 14px;
}
}
.status__action-bar-dropdown {
height: 23.15px;
width: 23.15px;
} }
.detailed-status__action-bar-dropdown { .detailed-status__action-bar-dropdown {
@ -1213,7 +1225,7 @@
.detailed-status { .detailed-status {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
padding: 14px 10px; padding: 16px;
&--flex { &--flex {
display: flex; display: flex;
@ -1243,14 +1255,15 @@
} }
} }
.media-gallery,
.video-player, .video-player,
.audio-player { .audio-player {
margin-top: 8px; margin-top: 16px;
} }
} }
.detailed-status__meta { .detailed-status__meta {
margin-top: 15px; margin-top: 16px;
color: $dark-text-color; color: $dark-text-color;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
@ -1312,7 +1325,7 @@
} }
.account { .account {
padding: 10px; padding: 16px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
&.compact { &.compact {
@ -1326,7 +1339,9 @@
.account__display-name { .account__display-name {
flex: 1 1 auto; flex: 1 1 auto;
display: block; display: flex;
align-items: center;
gap: 10px;
color: $darker-text-color; color: $darker-text-color;
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
@ -1359,12 +1374,7 @@
.account__wrapper { .account__wrapper {
display: flex; display: flex;
} gap: 10px;
.account__avatar-wrapper {
float: left;
margin-left: 12px;
margin-right: 12px;
} }
.account__avatar { .account__avatar {
@ -1372,9 +1382,6 @@
display: block; display: block;
position: relative; position: relative;
width: 36px;
height: 36px;
background-size: 36px 36px;
&-inline { &-inline {
display: inline-block; display: inline-block;
@ -1414,7 +1421,7 @@ a .account__avatar {
} }
.account__avatar-overlay { .account__avatar-overlay {
@include avatar-size(48px); @include avatar-size(46px);
position: relative; position: relative;
@ -1615,10 +1622,13 @@ a.account__display-name {
} }
.detailed-status__display-name { .detailed-status__display-name {
color: $secondary-text-color; color: $darker-text-color;
display: block; display: flex;
line-height: 24px; align-items: center;
margin-bottom: 15px; gap: 10px;
font-size: 15px;
line-height: 22px;
margin-bottom: 16px;
overflow: hidden; overflow: hidden;
strong, strong,
@ -1629,31 +1639,13 @@ a.account__display-name {
} }
strong { strong {
font-size: 16px;
color: $primary-text-color; color: $primary-text-color;
} }
} }
.detailed-status__display-avatar {
float: left;
margin-right: 10px;
}
.status__avatar { .status__avatar {
height: 48px; width: 46px;
left: 10px; height: 46px;
position: absolute;
top: 10px;
width: 48px;
}
.status__expand {
width: 68px;
position: absolute;
left: 0;
top: 0;
height: 100%;
cursor: pointer;
} }
.muted { .muted {
@ -1684,40 +1676,52 @@ a.account__display-name {
} }
.notification__report { .notification__report {
padding: 8px 10px; padding: 16px;
padding-left: 68px;
position: relative;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
min-height: 54px; display: flex;
gap: 10px;
&__avatar {
flex: 0 0 auto;
}
&__details { &__details {
flex: 1 1 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: $darker-text-color; color: $darker-text-color;
gap: 10px;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
white-space: nowrap;
overflow: hidden;
& > div {
overflow: hidden;
text-overflow: ellipsis;
}
strong { strong {
font-weight: 500; font-weight: 500;
} }
} }
&__avatar { &__actions {
position: absolute; flex: 0 0 auto;
left: 10px;
top: 10px;
} }
} }
.notification__message { .notification__message {
margin: 0 10px 0 68px; padding: 16px;
padding: 8px 0 0; padding-bottom: 0;
cursor: default; cursor: default;
color: $darker-text-color; color: $darker-text-color;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
position: relative; font-weight: 500;
display: flex;
gap: 10px;
.fa { .fa {
color: $highlight-text-color; color: $highlight-text-color;
@ -1731,9 +1735,6 @@ a.account__display-name {
} }
.notification__favourite-icon-wrapper { .notification__favourite-icon-wrapper {
left: -26px;
position: absolute;
.star-icon { .star-icon {
color: $gold-star; color: $gold-star;
} }
@ -1767,15 +1768,10 @@ a.account__display-name {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $primary-text-color;
text-decoration: underline; text-decoration: underline;
} }
} }
.notification__relative_time {
float: right;
}
.display-name { .display-name {
display: block; display: block;
max-width: 100%; max-width: 100%;
@ -1788,10 +1784,6 @@ a.account__display-name {
font-weight: 500; font-weight: 500;
} }
.display-name__account {
font-size: 14px;
}
.status__relative-time, .status__relative-time,
.detailed-status__datetime { .detailed-status__datetime {
&:hover { &:hover {
@ -1860,11 +1852,12 @@ a.account__display-name {
} }
.navigation-bar { .navigation-bar {
padding: 10px; padding: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
cursor: default; cursor: default;
gap: 10px;
color: $darker-text-color; color: $darker-text-color;
strong { strong {
@ -1899,9 +1892,7 @@ a.account__display-name {
.navigation-bar__profile { .navigation-bar__profile {
flex: 1 1 auto; flex: 1 1 auto;
margin-left: 8px;
line-height: 20px; line-height: 20px;
margin-top: -1px;
overflow: hidden; overflow: hidden;
} }
@ -2466,101 +2457,6 @@ $ui-header-height: 55px;
padding: 10px 0; padding: 10px 0;
padding-top: 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) { @media screen and (min-width: $no-gap-breakpoint) {
@ -2805,10 +2701,7 @@ $ui-header-height: 55px;
} }
.navigation-bar { .navigation-bar {
padding-top: 20px;
padding-bottom: 20px;
flex: 0 1 48px; flex: 0 1 48px;
min-height: 20px;
} }
.compose-form { .compose-form {
@ -5303,24 +5196,6 @@ a.status-card.compact:hover {
width: 480px; width: 480px;
position: relative; position: relative;
flex-direction: column; 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 { .actions-modal {
@ -5352,9 +5227,9 @@ a.status-card.compact:hover {
.block-modal__action-bar { .block-modal__action-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
background: $ui-secondary-color; background: $ui-secondary-color;
padding: 10px; padding: 15px;
line-height: 36px;
& > div { & > div {
flex: 1 1 auto; 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, .mute-modal,
.block-modal { .block-modal {
line-height: 24px; line-height: 24px;
@ -5988,7 +5854,7 @@ a.status-card.compact:hover {
font-size: 14px; font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px; border-radius: 4px;
margin-top: 14px; margin-top: 16px;
overflow: hidden; overflow: hidden;
&__icon { &__icon {
@ -6034,7 +5900,6 @@ a.status-card.compact:hover {
&.compact { &.compact {
border: 0; border: 0;
margin-top: 4px;
.attachment-list__list { .attachment-list__list {
padding: 0; padding: 0;
@ -7177,6 +7042,7 @@ noscript {
.account__header { .account__header {
overflow: hidden; overflow: hidden;
background: lighten($ui-base-color, 4%);
&.inactive { &.inactive {
opacity: 0.5; opacity: 0.5;
@ -7210,8 +7076,7 @@ noscript {
&__bar { &__bar {
position: relative; position: relative;
background: lighten($ui-base-color, 4%); padding: 0 20px;
padding: 5px;
border-bottom: 1px solid lighten($ui-base-color, 12%); border-bottom: 1px solid lighten($ui-base-color, 12%);
.avatar { .avatar {
@ -7230,8 +7095,8 @@ noscript {
&__tabs { &__tabs {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding: 7px 10px;
margin-top: -55px; margin-top: -55px;
padding-top: 10px;
&__buttons { &__buttons {
display: flex; display: flex;
@ -7249,7 +7114,8 @@ noscript {
} }
&__name { &__name {
padding: 5px 10px; margin-top: 16px;
margin-bottom: 16px;
.account-role { .account-role {
vertical-align: top; vertical-align: top;
@ -7261,17 +7127,17 @@ noscript {
} }
h1 { h1 {
font-size: 16px; font-size: 17px;
line-height: 24px; line-height: 22px;
color: $primary-text-color; color: $primary-text-color;
font-weight: 500; font-weight: 700;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
small { small {
display: block; display: block;
font-size: 14px; font-size: 15px;
color: $darker-text-color; color: $darker-text-color;
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
@ -7286,34 +7152,41 @@ noscript {
} }
&__bio { &__bio {
overflow: hidden;
margin: 0 -5px;
.account__header__content { .account__header__content {
padding: 20px 15px;
padding-bottom: 5px;
color: $primary-text-color; color: $primary-text-color;
.columns-area--mobile & {
padding-left: 20px;
padding-right: 20px;
}
} }
.account__header__joined { .account__header__fields {
font-size: 14px; margin: 0;
padding: 5px 15px; margin-top: 16px;
color: $darker-text-color; border-radius: 4px;
background: darken($ui-base-color, 4%);
border: 0;
.columns-area--mobile & { dl {
padding-left: 20px; display: block;
padding-right: 20px; padding: 11px 16px;
border-bottom-color: lighten($ui-base-color, 4%);
} }
dd,
dt {
font-size: 13px;
line-height: 18px;
padding: 0;
text-align: initial;
} }
.account__header__fields { dt {
margin: 0; width: auto;
border-top: 1px solid lighten($ui-base-color, 12%); background: transparent;
text-transform: uppercase;
color: $dark-text-color;
}
dd {
color: $darker-text-color;
}
a { a {
color: lighten($ui-highlight-color, 8%); color: lighten($ui-highlight-color, 8%);
@ -7330,12 +7203,14 @@ noscript {
} }
&__extra { &__extra {
margin-top: 4px; margin-top: 16px;
&__links { &__links {
font-size: 14px; font-size: 14px;
color: $darker-text-color; color: $darker-text-color;
padding: 10px 0; margin: 0 -10px;
padding-top: 16px;
padding-bottom: 10px;
a { a {
display: inline-block; display: inline-block;
@ -7353,17 +7228,10 @@ noscript {
} }
&__account-note { &__account-note {
padding: 15px;
padding-bottom: 10px;
color: $primary-text-color; color: $primary-text-color;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
border-bottom: 1px solid lighten($ui-base-color, 12%); margin-bottom: 10px;
.columns-area--mobile & {
padding-left: 20px;
padding-right: 20px;
}
label { label {
display: block; display: block;

Write Preview
Loading…
Cancel
Save