IntenseWebs/PeerTube
3
0
Fork 0
mirror of https://github.com/Chocobozzz/PeerTube.git synced 2024-11-28 03:23:57 -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 {
@include miniature-name;
word-wrap: break-word;
width: calc(100% - #{$more-button-width});
}

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

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

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

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