aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-03-31 11:47:47 +0200
committerChocobozzz <me@florianbigard.com>2021-04-01 16:54:49 +0200
commit33253c1aa6b82284ddd0a9cb516ad85e276ca3a3 (patch)
tree732f1f1ade8fdc7b0f31a0ee469b7c401f842e0e /client
parent58b9ce3080c12678e8c1c28c08da09d6ea60011d (diff)
downloadPeerTube-33253c1aa6b82284ddd0a9cb516ad85e276ca3a3.tar.gz
PeerTube-33253c1aa6b82284ddd0a9cb516ad85e276ca3a3.tar.zst
PeerTube-33253c1aa6b82284ddd0a9cb516ad85e276ca3a3.zip
Fix multiline ellipsis
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss2
-rw-r--r--client/src/sass/include/_miniature.scss13
-rw-r--r--client/src/sass/include/_mixins.scss3
3 files changed, 11 insertions, 7 deletions
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index cd492e9ad..a9628c696 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -32,6 +32,8 @@ $more-margin-right: 15px;
32 32
33 .video-miniature-name { 33 .video-miniature-name {
34 @include miniature-name; 34 @include miniature-name;
35
36 word-wrap: break-word;
35 width: calc(100% - #{$more-button-width}); 37 width: calc(100% - #{$more-button-width});
36 } 38 }
37 39
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 426263444..7643a6816 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -4,6 +4,7 @@
4@mixin miniature-name { 4@mixin miniature-name {
5 @include ellipsis-multiline(1.1em, 2); 5 @include ellipsis-multiline(1.1em, 2);
6 6
7 word-break: break-all;
7 transition: color 0.2s; 8 transition: color 0.2s;
8 font-weight: $font-semibold; 9 font-weight: $font-semibold;
9 color: pvar(--mainForegroundColor); 10 color: pvar(--mainForegroundColor);
@@ -226,22 +227,22 @@ $play-overlay-width: 18px;
226 227
227 @media screen and (min-width: $mobile-view) { 228 @media screen and (min-width: $mobile-view) {
228 .videos { 229 .videos {
229 --miniature-min-width: #{$video-thumbnail-width - 15px}; 230 --miniatureMinWidth: #{$video-thumbnail-width - 15px};
230 --miniature-max-width: #{$video-thumbnail-width}; 231 --miniatureMaxWidth: #{$video-thumbnail-width};
231 232
232 display: grid; 233 display: grid;
233 column-gap: 5px; 234 column-gap: 5px;
234 grid-template-columns: repeat( 235 grid-template-columns: repeat(
235 auto-fill, 236 auto-fill,
236 minmax( 237 minmax(
237 var(--miniature-min-width), 238 var(--miniatureMinWidth),
238 1fr 239 1fr
239 ) 240 )
240 ); 241 );
241 242
242 @media screen and (min-width: #{breakpoint(fhd)}) { 243 @media screen and (min-width: #{breakpoint(fhd)}) {
243 column-gap: 1%; 244 column-gap: 1%;
244 --miniature-min-width: #{$video-thumbnail-width}; 245 --miniatureMinWidth: #{$video-thumbnail-width};
245 } 246 }
246 247
247 .video-wrapper { 248 .video-wrapper {
@@ -250,8 +251,8 @@ $play-overlay-width: 18px;
250 251
251 my-video-miniature { 252 my-video-miniature {
252 display: block; 253 display: block;
253 min-width: var(--miniature-min-width); 254 min-width: var(--miniatureMinWidth);
254 max-width: var(--miniature-max-width); 255 max-width: var(--miniatureMaxWidth);
255 } 256 }
256 } 257 }
257 } 258 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 58920ce36..eac2f1a7f 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -23,12 +23,13 @@
23 display: block; 23 display: block;
24 /* Fallback for non-webkit */ 24 /* Fallback for non-webkit */
25 display: -webkit-box; 25 display: -webkit-box;
26 max-height: $font-size * $number-of-lines; 26 -webkit-line-clamp: $number-of-lines;
27 /* Fallback for non-webkit */ 27 /* Fallback for non-webkit */
28 font-size: $font-size; 28 font-size: $font-size;
29 line-height: $font-size; 29 line-height: $font-size;
30 overflow: hidden; 30 overflow: hidden;
31 text-overflow: ellipsis; 31 text-overflow: ellipsis;
32 max-height: $font-size * $number-of-lines;
32} 33}
33 34
34@mixin fade-text ($fade-after, $background-color) { 35@mixin fade-text ($fade-after, $background-color) {