OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Try to fix multiline ellipsis 

some characters like "g" were cut out
pull/1759/head
Chocobozzz 2019-04-03 13:51:02 +02:00
parent 11dd0c2e42
commit 0c9945d900
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 7 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/sass/include/_miniature.scss
View File

@ -2,11 +2,8 @@
@import '_mixins'; @import '_mixins';
@mixin miniature-name { @mixin miniature-name {
@include ellipsis-multiline( @include ellipsis-multiline(16px, 2);
$font-size: 1rem,
$line-height: 1,
$lines-to-show: 2
);
transition: color 0.2s; transition: color 0.2s;
font-size: 16px; font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;

16
client/src/sass/include/_mixins.scss
View File

@ -24,22 +24,16 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/**
* This mixin will crop text in block for needed amount of lines and put ellipsis at the end @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
*
* @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; display: block;
/* Fallback for non-webkit */ /* Fallback for non-webkit */
display: -webkit-box; display: -webkit-box;
max-height: $font-size * $line-height * $lines-to-show; max-height: $font-size * $number-of-lines;
/* Fallback for non-webkit */ /* Fallback for non-webkit */
font-size: $font-size; font-size: $font-size;
line-height: $line-height; line-height: $font-size - 0.1;
-webkit-line-clamp: $lines-to-show; -webkit-line-clamp: $number-of-lines;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;