tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Enable coexistence of horizontal and vertical posts

Browse Source 
Port 96de28dd6fcb127b462b56d510c804cddeebe992 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Itoh Shimon 2026-02-06 18:51:22 +09:00 committed by Claire
parent 351b8a719f
commit 425d411c9a
3 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/flavours/glitch/components/status_content.jsx
View File

@ -108,11 +108,12 @@ class StatusContent extends PureComponent {
const { status, onCollapsedToggle } = this.props;
if (status.get('collapsed', null) === null && onCollapsedToggle) {
const { collapsible, onClick } = this.props;
const text = node.querySelector(':scope > .status__content__text');
const collapsed =
collapsible
&& onClick
&& node.clientHeight > MAX_HEIGHT
&& (node.clientHeight > MAX_HEIGHT || (text !== null && text.scrollWidth > text.clientWidth))
&& status.get('spoiler_text').length === 0;
onCollapsedToggle(collapsed);

3
app/javascript/flavours/glitch/styles/mastodon/_variables.scss
View File

@ -6,6 +6,9 @@ $backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
// Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
// Language codes that is written vertically
$vertical-lr-langs: mn-Mong;
// Variables for components
$media-modal-media-max-width: 100%;

32
app/javascript/flavours/glitch/styles/mastodon/components.scss
View File

@ -1402,6 +1402,38 @@ body > [data-popper-placement] {
}
}
@each $lang in $vertical-lr-langs {
// writing-mode and width must be applied to a single element. When
// this element inherits a text direction that is opposite to its own,
// the start of this element's text is cut off.
.status:not(.status--is-quote)
> .status__content
> .status__content__text:lang(#{$lang}),
.conversation
> .conversation__content
> .status__content
> .status__content__text:lang(#{$lang}) {
writing-mode: vertical-lr;
width: 100%; // detecting overflow
max-width: calc(100% - mod(100%, 22px)); // avoid cut-offs
max-height: 209px; // roughly above 500 characters, readable
overflow-x: hidden; // read more
}
.autosuggest-textarea > .autosuggest-textarea__textarea:lang(#{$lang}) {
writing-mode: vertical-lr;
min-height: 209px; // writable
}
.detailed-status > .status__content > .status__content__text:lang(#{$lang}) {
writing-mode: vertical-lr;
width: 100%; // detecting overflow
max-height: 50vh;
overflow-x: auto;
}
}
.status__content.status__content--collapsed {
max-height: 20px * 15; // 15 lines is roughly above 500 characters
}