add title ellipsis over two lines to miniatures

4 files changed, 38 insertions, 6 deletions

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index ded45b5f7..e772e3a37 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -14,7 +14,7 @@
   position: fixed;
   top: 0;
   width: 100%;
-  background-color: #fff;
+  background-color: $bg-color;
   z-index: 1000;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
   display: flex;
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 6883650f4..cc643f9d9 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -14,14 +14,17 @@
     line-height: normal;
 
     .video-miniature-name {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      @include ellipsis-multiline(
+        $font-size: 1rem,
+        $line-height: 1,
+        $lines-to-show: 2
+      );
       transition: color 0.2s;
       font-size: 16px;
       font-weight: $font-semibold;
-      color: #000;
+      color: $fg-color;
+      margin-top: 5px;
+      margin-bottom: 5px;
 
       &:hover {
         text-decoration: none;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index aafe478f9..99225e4e5 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -16,6 +16,33 @@
   }
 }
 
+/**
+ *  This mixin will crop text in block for needed amount of lines and put ellipsis at the end
+ *
+ *  @param $font-size font-size property
+ *  @param $line-height line-height property
+ *  @param $lines-to-show amount of lines to show
+ */
+ @mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) {
+  display: block;
+  /* Fallback for non-webkit */
+  display: -webkit-box;
+  max-height: $font-size*$line-height*$lines-to-show;
+  /* Fallback for non-webkit */
+  font-size: $font-size;
+  line-height: $line-height;
+  -webkit-line-clamp: $lines-to-show;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin prefix($property, $parameters...) {
+  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
+    #{$prefix}#{$property}: $parameters;
+  }
+}
+
 @mixin peertube-word-wrap {
   word-break: normal;
   word-wrap: break-word;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index ba7abeef1..7fd178c3b 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -10,6 +10,8 @@ $orange-hoover-color: #F97D46;
 
 $black-background: #000;
 $grey-background: #f6f2f2;
+$bg-color: #fff;
+$fg-color: #000;
 
 $red: #FF0000;
 $green: #39CC0B;