aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-04-03 13:51:02 +0200
committerChocobozzz <me@florianbigard.com>2019-04-03 13:51:02 +0200
commit0c9945d900fa926a3d8c54738bb7a62a00f47efc (patch)
treec64afcecfba9f8bbf6949b0002c1aece52dd130a /client/src/sass
parent11dd0c2e4202e7ad68d8b7e6706de846401d29ff (diff)
downloadPeerTube-0c9945d900fa926a3d8c54738bb7a62a00f47efc.tar.gz
PeerTube-0c9945d900fa926a3d8c54738bb7a62a00f47efc.tar.zst
PeerTube-0c9945d900fa926a3d8c54738bb7a62a00f47efc.zip
Try to fix multiline ellipsis
some characters like "g" were cut out
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/include/_miniature.scss7
-rw-r--r--client/src/sass/include/_mixins.scss16
2 files changed, 7 insertions, 16 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 2ea4aa105..1e9e8d749 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -2,11 +2,8 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4@mixin miniature-name { 4@mixin miniature-name {
5 @include ellipsis-multiline( 5 @include ellipsis-multiline(16px, 2);
6 $font-size: 1rem, 6
7 $line-height: 1,
8 $lines-to-show: 2
9 );
10 transition: color 0.2s; 7 transition: color 0.2s;
11 font-size: 16px; 8 font-size: 16px;
12 font-weight: $font-semibold; 9 font-weight: $font-semibold;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 37bd404dd..900638a0e 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -24,22 +24,16 @@
24 overflow: hidden; 24 overflow: hidden;
25 text-overflow: ellipsis; 25 text-overflow: ellipsis;
26} 26}
27/** 27
28 * This mixin will crop text in block for needed amount of lines and put ellipsis at the end 28@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
29 *
30 * @param $font-size font-size property
31 * @param $line-height line-height property
32 * @param $lines-to-show amount of lines to show
33 */
34@mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) {
35 display: block; 29 display: block;
36 /* Fallback for non-webkit */ 30 /* Fallback for non-webkit */
37 display: -webkit-box; 31 display: -webkit-box;
38 max-height: $font-size * $line-height * $lines-to-show; 32 max-height: $font-size * $number-of-lines;
39 /* Fallback for non-webkit */ 33 /* Fallback for non-webkit */
40 font-size: $font-size; 34 font-size: $font-size;
41 line-height: $line-height; 35 line-height: $font-size - 0.1;
42 -webkit-line-clamp: $lines-to-show; 36 -webkit-line-clamp: $number-of-lines;
43 -webkit-box-orient: vertical; 37 -webkit-box-orient: vertical;
44 overflow: hidden; 38 overflow: hidden;
45 text-overflow: ellipsis; 39 text-overflow: ellipsis;