teh/mastodon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 10

Fix wrong cut-off point for "Read more" in web UI (#20599)

Browse source
This commit is contained in:
Eugen Rochko 2022-11-14 00:43:24 +01:00 committed by GitHub
parent 24b2c60beb
commit d0b7bd4250
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/javascript/mastodon/components/status_content.js
View file

@ -8,7 +8,7 @@ import PollContainer from 'mastodon/containers/poll_container';
import Icon from 'mastodon/components/icon'; import Icon from 'mastodon/components/icon';
import { autoPlayGif, languages as preloadedLanguages, translationEnabled } from 'mastodon/initial_state'; import { autoPlayGif, languages as preloadedLanguages, translationEnabled } from 'mastodon/initial_state';
const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
class TranslateButton extends React.PureComponent { class TranslateButton extends React.PureComponent {
@ -77,16 +77,21 @@ class StatusContent extends React.PureComponent {
return; return;
} }
const { status, onCollapsedToggle } = this.props;
const links = node.querySelectorAll('a'); const links = node.querySelectorAll('a');
let link, mention;
for (var i = 0; i < links.length; ++i) { for (var i = 0; i < links.length; ++i) {
let link = links[i]; link = links[i];
if (link.classList.contains('status-link')) { if (link.classList.contains('status-link')) {
continue; continue;
} }
link.classList.add('status-link'); link.classList.add('status-link');
let mention = this.props.status.get('mentions').find(item => link.href === item.get('url')); mention = this.props.status.get('mentions').find(item => link.href === item.get('url'));
if (mention) { if (mention) {
link.addEventListener('click', this.onMentionClick.bind(this, mention), false); link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
@ -101,16 +106,16 @@ class StatusContent extends React.PureComponent {
} }
} }
if (this.props.status.get('collapsed', null) === null) { if (status.get('collapsed', null) === null && onCollapsedToggle) {
let collapsed = const { collapsable, onClick } = this.props;
this.props.collapsable
&& this.props.onClick const collapsed =
collapsable
&& onClick
&& node.clientHeight > MAX_HEIGHT && node.clientHeight > MAX_HEIGHT
&& this.props.status.get('spoiler_text').length === 0; && status.get('spoiler_text').length === 0;
if(this.props.onCollapsedToggle) this.props.onCollapsedToggle(collapsed); onCollapsedToggle(collapsed);
this.props.status.set('collapsed', collapsed);
} }
} }

2
app/javascript/styles/mastodon/components.scss
View file

@ -964,7 +964,7 @@
} }
.status__content.status__content--collapsed { .status__content.status__content--collapsed {
max-height: 20px * 15; // 15 lines is roughly above 500 characters max-height: 22px * 15; // 15 lines is roughly above 500 characters
} }
.status__content__read-more-button { .status__content__read-more-button {