diff --git a/public/scss/mixins.scss b/public/scss/mixins.scss index c38a4d13b3..4c75a264c5 100644 --- a/public/scss/mixins.scss +++ b/public/scss/mixins.scss @@ -111,6 +111,28 @@ } } +// Use on elements with `line-clamp-*` classes +@mixin clamp-fade($lines) { + position: relative; + cursor: pointer; + + &.line-clamp-#{$lines}::before { + content: ''; + position: absolute; + top: calc(1.5em * ($lines - 2)); + display: block; + width: 100%; + height: 3em; + background: linear-gradient(180deg, transparent 0, $body-bg 100%); + } +} + +@for $i from 1 through 6 { + .clamp-fade-#{$i} { + @include clamp-fade($i); + } +} + @each $color, $value in $grays { .border-gray-#{$color} { border-color: $value !important; diff --git a/public/scss/modules/bottom-sheet.scss b/public/scss/modules/bottom-sheet.scss index 339e000a8b..94d5fa1508 100644 --- a/public/scss/modules/bottom-sheet.scss +++ b/public/scss/modules/bottom-sheet.scss @@ -45,6 +45,7 @@ width: auto; } + // this does not look to be used anymore .dropdown-backdrop { background-color: rgba(0, 0, 0, .3); } diff --git a/public/src/client/category.js b/public/src/client/category.js index e0f77793c4..c90b2710ad 100644 --- a/public/src/client/category.js +++ b/public/src/client/category.js @@ -41,6 +41,8 @@ define('forum/category', [ handleLoadMoreSubcategories(); + handleDescription(); + categorySelector.init($('[component="category-selector"]'), { privilege: 'find', parentCid: ajaxify.data.cid, @@ -113,6 +115,18 @@ define('forum/category', [ }); } + function handleDescription() { + const fadeEl = document.querySelector('.description.clamp-fade-4'); + if (!fadeEl) { + return; + } + + fadeEl.addEventListener('click', () => { + const state = fadeEl.classList.contains('line-clamp-4'); + fadeEl.classList.toggle('line-clamp-4', !state); + }); + } + Category.toTop = function () { navigator.scrollTop(0); };