add title ellipsis over two lines to miniatures

2 files changed, 29 insertions, 0 deletions

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;