IntenseWebs/PeerTube
3
0
Fork 0
mirror of https://github.com/Chocobozzz/PeerTube.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix multiline ellipsis

Browse Source
This commit is contained in:
Chocobozzz 2021-03-31 11:47:47 +02:00
parent 58b9ce3080
commit 33253c1aa6
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/shared/shared-video-miniature/video-miniature.component.scss
View File

@ -32,6 +32,8 @@ $more-margin-right: 15px;
.video-miniature-name { .video-miniature-name {
@include miniature-name; @include miniature-name;
word-wrap: break-word;
width: calc(100% - #{$more-button-width}); width: calc(100% - #{$more-button-width});
} }

13
client/src/sass/include/_miniature.scss
View File

@ -4,6 +4,7 @@
@mixin miniature-name { @mixin miniature-name {
@include ellipsis-multiline(1.1em, 2); @include ellipsis-multiline(1.1em, 2);
word-break: break-all;
transition: color 0.2s; transition: color 0.2s;
font-weight: $font-semibold; font-weight: $font-semibold;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
@ -226,22 +227,22 @@ $play-overlay-width: 18px;
@media screen and (min-width: $mobile-view) { @media screen and (min-width: $mobile-view) {
.videos { .videos {
--miniature-min-width: #{$video-thumbnail-width - 15px}; --miniatureMinWidth: #{$video-thumbnail-width - 15px};
--miniature-max-width: #{$video-thumbnail-width}; --miniatureMaxWidth: #{$video-thumbnail-width};
display: grid; display: grid;
column-gap: 5px; column-gap: 5px;
grid-template-columns: repeat( grid-template-columns: repeat(
auto-fill, auto-fill,
minmax( minmax(
var(--miniature-min-width), var(--miniatureMinWidth),
1fr 1fr
) )
); );
@media screen and (min-width: #{breakpoint(fhd)}) { @media screen and (min-width: #{breakpoint(fhd)}) {
column-gap: 1%; column-gap: 1%;
--miniature-min-width: #{$video-thumbnail-width}; --miniatureMinWidth: #{$video-thumbnail-width};
} }
.video-wrapper { .video-wrapper {
@ -250,8 +251,8 @@ $play-overlay-width: 18px;
my-video-miniature { my-video-miniature {
display: block; display: block;
min-width: var(--miniature-min-width); min-width: var(--miniatureMinWidth);
max-width: var(--miniature-max-width); max-width: var(--miniatureMaxWidth);
} }
} }
} }

3
client/src/sass/include/_mixins.scss
View File

@ -23,12 +23,13 @@
display: block; display: block;
/* Fallback for non-webkit */ /* Fallback for non-webkit */
display: -webkit-box; display: -webkit-box;
max-height: $font-size * $number-of-lines; -webkit-line-clamp: $number-of-lines;
/* Fallback for non-webkit */ /* Fallback for non-webkit */
font-size: $font-size; font-size: $font-size;
line-height: $font-size; line-height: $font-size;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-height: $font-size * $number-of-lines;
} }
@mixin fade-text ($fade-after, $background-color) { @mixin fade-text ($fade-after, $background-color) {