mirror of
https://framagit.org/tykayn/mastodon.git
synced 2023-08-25 08:33:12 +02:00
Fix wrong cut-off point for "Read more" in web UI (#20599)
This commit is contained in:
parent
24b2c60beb
commit
d0b7bd4250
@ -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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user