Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

TootPreviewCard: limit text lines (#9)

Browse source 
A problem in this impl is that the ellipsis does
not show.
This commit is contained in:
thislight 2024-09-14 15:08:17 +08:00
parent 5325576ff4
commit e32de2f2e9
3 changed files with 13 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/material/theme.css
View file

@ -11,6 +11,8 @@
--button-size: 1rem; --button-size: 1rem;
--button-weight: 500; --button-weight: 500;
--button-text-transform: uppercase; --button-text-transform: uppercase;
--body-line-height: 1.375;
--title-line-height: 1.25;
@media (min-width: 1024px) { @media (min-width: 1024px) {
& { & {
@ -39,6 +41,8 @@
--caption-size: 0.9375rem; --caption-size: 0.9375rem;
--button-size: 1.0625rem; --button-size: 1.0625rem;
--button-text-transform: none; --button-text-transform: none;
--body-line-height: 1.425;
--title-line-height: 1.3;
@media (min-width: 1024px) { @media (min-width: 1024px) {
& { & {
@ -148,4 +152,5 @@
body { body {
font-size: var(--body-size, 1rem); font-size: var(--body-size, 1rem);
line-height: var(--body-line-height);
} }

1
src/material/typography.module.css
View file

@ -22,6 +22,7 @@
.title { .title {
font-size: var(--title-size); font-size: var(--title-size);
font-weight: var(--title-weight); font-weight: var(--title-weight);
line-height: var(--title-line-height);
} }
.subheading { .subheading {

7
src/timelines/toot.module.css
View file

@ -137,12 +137,19 @@
>h1 { >h1 {
color: var(--tutu-color-on-surface); color: var(--tutu-color-on-surface);
max-height: calc(4 * var(--title-line-height) * var(--title-size));
}
> p {
max-height: calc(8 * var(--body-line-height) * var(--body-size));
} }
>h1, >h1,
>p { >p {
margin-left: 16px; margin-left: 16px;
margin-right: 16px; margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
} }
&.compact { &.compact {