diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 82e704f074..721aee3d8a 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -1144,3 +1144,22 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { margin-top: 0; font-size: 1.4em; } + +.detail-clamp-text { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 12; + -webkit-box-orient: vertical; + + /* Fallback for older browsers: line-height * number of lines */ + max-height: calc(1.35 * 12em); +} + +@media all and (min-width: 40em) { + .detail-clamp-text { + -webkit-line-clamp: 6; + + /* Fallback for older browsers: line-height * number of lines */ + max-height: calc(1.35 * 6em); + } +} diff --git a/src/controllers/itemDetails.js b/src/controllers/itemDetails.js index 0fad1ba967..d005ffabff 100644 --- a/src/controllers/itemDetails.js +++ b/src/controllers/itemDetails.js @@ -972,6 +972,17 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti } } + function toggleLineClamp(e) { + var target = e.target; + var clampClassName = 'detail-clamp-text'; + + if (target.classList.contains(clampClassName)) { + target.classList.remove(clampClassName); + } else { + target.classList.add(clampClassName); + } + } + function renderOverview(elems, item) { for (var i = 0, length = elems.length; i < length; i++) { var elem = elems[i]; @@ -980,6 +991,10 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti if (overview) { elem.innerHTML = overview; elem.classList.remove('hide'); + + elem.classList.add('detail-clamp-text'); + elem.addEventListener('click', toggleLineClamp); + var anchors = elem.querySelectorAll('a'); for (var j = 0, length2 = anchors.length; j < length2; j++) {