Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-08-23 15:14:33 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Enable coexistence of horizontal and vertical posts (#37204)

Browse Source
This commit is contained in:
Itoh Shimon
2026-02-06 18:51:22 +09:00
committed by GitHub
parent 7a4945c0d3
commit 96de28dd6f
4 changed files with 103 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/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/styles/mastodon/components.scss
View File

@@ -1343,6 +1343,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: 22px * 15; // 15 lines is roughly above 500 characters
}