Verified Commit 33253c1a authored by Chocobozzz's avatar Chocobozzz

Fix multiline ellipsis

parent 58b9ce30
......@@ -32,6 +32,8 @@ $more-margin-right: 15px;
.video-miniature-name {
@include miniature-name;
word-wrap: break-word;
width: calc(100% - #{$more-button-width});
}
......
......@@ -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);
}
}
}
......
......@@ -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) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment