this repo has no description
Allow show more figcaption
+19
-8
+8
src/components/media.jsx
+8
src/components/media.jsx
···
48
48
);
49
49
};
50
50
51
+
const MEDIA_CAPTION_LIMIT = 140;
52
+
51
53
function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
52
54
const {
53
55
blurhash,
···
371
373
</Parent>
372
374
{showInlineDesc && (
373
375
<figcaption
376
+
class={`media-caption media-caption-${
377
+
description.length <= MEDIA_CAPTION_LIMIT ? 'short' : 'long'
378
+
}`}
374
379
onClick={(e) => {
375
380
e.preventDefault();
376
381
e.stopPropagation();
377
382
states.showMediaAlt = description;
378
383
}}
384
+
title={
385
+
description.length > MEDIA_CAPTION_LIMIT ? description : undefined
386
+
}
379
387
>
380
388
{description}
381
389
</figcaption>
+11
-8
src/components/status.css
+11
-8
src/components/status.css
···
714
714
padding: 0 4px;
715
715
font-size: 90%;
716
716
color: var(--text-insignificant-color);
717
-
overflow: hidden;
718
-
white-space: normal;
719
-
display: -webkit-box;
720
-
display: box;
721
-
-webkit-box-orient: vertical;
722
-
box-orient: vertical;
723
-
-webkit-line-clamp: 2;
724
-
line-clamp: 2;
725
717
line-height: 1.2;
726
718
cursor: pointer;
719
+
720
+
&.media-caption-long {
721
+
overflow: hidden;
722
+
white-space: normal;
723
+
display: -webkit-box;
724
+
display: box;
725
+
-webkit-box-orient: vertical;
726
+
box-orient: vertical;
727
+
-webkit-line-clamp: 3;
728
+
line-clamp: 3;
729
+
}
727
730
}
728
731
}
729
732