From 0c9945d900fa926a3d8c54738bb7a62a00f47efc Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 3 Apr 2019 13:51:02 +0200
Subject: [PATCH] Try to fix multiline ellipsis
some characters like "g" were cut out
---
client/src/sass/include/_miniature.scss | 7 ++-----
client/src/sass/include/_mixins.scss | 16 +++++-----------
2 files changed, 7 insertions(+), 16 deletions(-)
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 2ea4aa1056..1e9e8d7499 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -2,11 +2,8 @@
@import '_mixins';
@mixin miniature-name {
- @include ellipsis-multiline(
- $font-size: 1rem,
- $line-height: 1,
- $lines-to-show: 2
- );
+ @include ellipsis-multiline(16px, 2);
+
transition: color 0.2s;
font-size: 16px;
font-weight: $font-semibold;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 37bd404dd0..900638a0e4 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -24,22 +24,16 @@
overflow: hidden;
text-overflow: ellipsis;
}
-/**
- * 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) {
+
+@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
display: block;
/* Fallback for non-webkit */
display: -webkit-box;
- max-height: $font-size * $line-height * $lines-to-show;
+ max-height: $font-size * $number-of-lines;
/* Fallback for non-webkit */
font-size: $font-size;
- line-height: $line-height;
- -webkit-line-clamp: $lines-to-show;
+ line-height: $font-size - 0.1;
+ -webkit-line-clamp: $number-of-lines;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
--
GitLab