Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-03-20 03:11:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: mask-image to use line-heights instead of hardcoded 60%

Browse Source 
add line-fade-sm for text-sm
This commit is contained in:
Barış Soner Uşaklı
2026-03-10 19:55:30 -04:00
parent c179a959e6
commit 2e21d21475
3 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
install/package.json
View File

@@ -107,7 +107,7 @@
"nodebb-plugin-spam-be-gone": "2.3.2", "nodebb-plugin-spam-be-gone": "2.3.2",
"nodebb-plugin-web-push": "0.7.6", "nodebb-plugin-web-push": "0.7.6",
"nodebb-rewards-essentials": "1.0.2", "nodebb-rewards-essentials": "1.0.2",
"nodebb-theme-harmony": "2.2.50", "nodebb-theme-harmony": "2.2.51",
"nodebb-theme-lavender": "7.1.21", "nodebb-theme-lavender": "7.1.21",
"nodebb-theme-peace": "2.2.56", "nodebb-theme-peace": "2.2.56",
"nodebb-theme-persona": "14.2.27", "nodebb-theme-persona": "14.2.27",

27
public/scss/mixins.scss
View File

@@ -112,24 +112,29 @@
} }
// Use on elements with `line-clamp-*` classes // Use on elements with `line-clamp-*` classes
@mixin clamp-fade($lines) { @mixin clamp-fade($lines, $line-height) {
position: relative;
cursor: pointer; cursor: pointer;
&.line-clamp-#{$lines}::before { &.line-clamp-#{$lines} {
content: ''; $solid-threshold: calc(#{$line-height} * (#{$lines} - 1.0));
position: absolute; $total-height: calc(#{$line-height} * #{$lines});
top: calc(1.5em * ($lines - 2)); $gradient: linear-gradient(
display: block; to bottom,
width: 100%; black 0px,
height: 3em; black #{$solid-threshold},
background: linear-gradient(180deg, transparent 0, $body-bg 100%); transparent #{$total-height}
);
mask-image: $gradient;
-webkit-mask-image: $gradient;
} }
} }
@for $i from 1 through 6 { @for $i from 1 through 6 {
.clamp-fade-#{$i} { .clamp-fade-#{$i} {
@include clamp-fade($i); @include clamp-fade($i, #{$line-height-base}em);
}
.clamp-fade-sm-#{$i} {
@include clamp-fade($i, #{$line-height-sm}em);
} }
} }

2
public/src/client/category.js
View File

@@ -115,7 +115,7 @@ define('forum/category', [
} }
function handleDescription() { function handleDescription() {
const fadeEl = document.querySelector('.description.clamp-fade-4'); const fadeEl = document.querySelector(`.description.clamp-fade-sm-4`);
if (!fadeEl) { if (!fadeEl) {
return; return;
} }