diff options
-rw-r--r-- | app/javascript/mastodon/common.js | 6 | ||||
-rw-r--r-- | app/javascript/mastodon/features/standalone/hashtag_timeline/index.js | 2 | ||||
-rw-r--r-- | app/javascript/mastodon/features/status/components/detailed_status.js | 35 | ||||
-rw-r--r-- | app/javascript/mastodon/features/status/index.js | 5 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/widgets.scss | 28 | ||||
-rw-r--r-- | app/views/tags/_features.html.haml | 25 | ||||
-rw-r--r-- | app/views/tags/show.html.haml | 6 |
7 files changed, 63 insertions, 44 deletions
diff --git a/app/javascript/mastodon/common.js b/app/javascript/mastodon/common.js index 2b10b8c30..fba21316a 100644 --- a/app/javascript/mastodon/common.js +++ b/app/javascript/mastodon/common.js @@ -4,5 +4,9 @@ export function start() { require('font-awesome/css/font-awesome.css'); require.context('../images/', true); - Rails.start(); + try { + Rails.start(); + } catch (e) { + // If called twice + } }; diff --git a/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js b/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js index 4e09b1948..333726f94 100644 --- a/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js +++ b/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js @@ -80,7 +80,7 @@ class HashtagTimeline extends React.PureComponent { <div className='statuses-grid__item' key={statusId}> <DetailedStatusContainer id={statusId} - showThread + compact measureHeight onHeightChange={this.handleHeightChange} /> diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 3ea8e9e74..2921a26f9 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -12,6 +12,7 @@ import Card from './card'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Video from '../../video'; import scheduleIdleTask from '../../ui/util/schedule_idle_task'; +import classNames from 'classnames'; export default class DetailedStatus extends ImmutablePureComponent { @@ -27,6 +28,7 @@ export default class DetailedStatus extends ImmutablePureComponent { measureHeight: PropTypes.bool, onHeightChange: PropTypes.func, domain: PropTypes.string.isRequired, + compact: PropTypes.bool, }; state = { @@ -52,7 +54,7 @@ export default class DetailedStatus extends ImmutablePureComponent { _measureHeight (heightJustChanged) { if (this.props.measureHeight && this.node) { - scheduleIdleTask(() => this.node && this.setState({ height: this.node.offsetHeight })); + scheduleIdleTask(() => this.node && this.setState({ height: this.node.scrollHeight })); if (this.props.onHeightChange && heightJustChanged) { this.props.onHeightChange(); @@ -86,6 +88,7 @@ export default class DetailedStatus extends ImmutablePureComponent { render () { const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status; const outerStyle = { boxSizing: 'border-box' }; + const { compact } = this.props; if (!status) { return null; @@ -187,20 +190,22 @@ export default class DetailedStatus extends ImmutablePureComponent { } return ( - <div ref={this.setRef} className='detailed-status' style={outerStyle}> - <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> - <DisplayName account={status.get('account')} localDomain={this.props.domain} /> - </a> - - <StatusContent status={status} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} /> - - {media} - - <div className='detailed-status__meta'> - <a className='detailed-status__datetime' 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} · {reblogLink} · {favouriteLink} + <div style={outerStyle}> + <div ref={this.setRef} className={classNames('detailed-status', { 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> + <DisplayName account={status.get('account')} localDomain={this.props.domain} /> + </a> + + <StatusContent status={status} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} /> + + {media} + + <div className='detailed-status__meta'> + <a className='detailed-status__datetime' 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} · {reblogLink} · {favouriteLink} + </div> </div> </div> ); diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js index a092f7bb1..d48b682eb 100644 --- a/app/javascript/mastodon/features/status/index.js +++ b/app/javascript/mastodon/features/status/index.js @@ -101,6 +101,7 @@ const makeMapStateToProps = () => { ancestorsIds, descendantsIds, askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0, + domain: state.getIn(['meta', 'domain']), }; }; @@ -123,6 +124,7 @@ class Status extends ImmutablePureComponent { descendantsIds: ImmutablePropTypes.list, intl: PropTypes.object.isRequired, askReplyConfirmation: PropTypes.bool, + domain: PropTypes.string.isRequired, }; state = { @@ -387,7 +389,7 @@ class Status extends ImmutablePureComponent { render () { let ancestors, descendants; - const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl } = this.props; + const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain } = this.props; const { fullscreen } = this.state; if (status === null) { @@ -438,6 +440,7 @@ class Status extends ImmutablePureComponent { onOpenVideo={this.handleOpenVideo} onOpenMedia={this.handleOpenMedia} onToggleHidden={this.handleToggleHidden} + domain={domain} /> <ActionBar diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index cabef807e..d44a1ef06 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -450,5 +450,33 @@ $fluid-breakpoint: $maximum-width + 20px; @media screen and (max-width: $no-gap-breakpoint) { border-bottom: 1px solid lighten($ui-base-color, 12%); } + + &.compact { + .detailed-status__meta { + margin-top: 15px; + } + + .status__content { + font-size: 15px; + line-height: 20px; + + .emojione { + width: 20px; + height: 20px; + margin: -3px 0 0; + } + + .status__content__spoiler-link { + line-height: 20px; + margin: 0; + } + } + + .media-gallery, + .status-card, + .video-player { + margin-top: 15px; + } + } } } diff --git a/app/views/tags/_features.html.haml b/app/views/tags/_features.html.haml deleted file mode 100644 index 8fbc6b760..000000000 --- a/app/views/tags/_features.html.haml +++ /dev/null @@ -1,25 +0,0 @@ -.features-list - .features-list__row - .text - %h6= t 'about.features.real_conversation_title' - = t 'about.features.real_conversation_body' - .visual - = fa_icon 'fw comments' - .features-list__row - .text - %h6= t 'about.features.not_a_product_title' - = t 'about.features.not_a_product_body' - .visual - = fa_icon 'fw users' - .features-list__row - .text - %h6= t 'about.features.within_reach_title' - = t 'about.features.within_reach_body' - .visual - = fa_icon 'fw mobile' - .features-list__row - .text - %h6= t 'about.features.humane_approach_title' - = t 'about.features.humane_approach_body' - .visual - = fa_icon 'fw leaf' diff --git a/app/views/tags/show.html.haml b/app/views/tags/show.html.haml index 229fe958b..18de48eea 100644 --- a/app/views/tags/show.html.haml +++ b/app/views/tags/show.html.haml @@ -8,5 +8,9 @@ = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous' = render 'og' -#mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } } +.page-header + %h1= "##{@tag.name}" + %p= t('about.about_hashtag_html', hashtag: @tag.name) + +#mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) }} #modal-container |