diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index bddb694d41..494a6c523d 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -1145,6 +1145,11 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { font-size: 1.4em; } +.overview-controls { + display: flex; + justify-content: flex-end; +} + .detail-clamp-text { overflow: hidden; display: -webkit-box; diff --git a/src/controllers/itemDetails.js b/src/controllers/itemDetails.js index d005ffabff..33eec21a7d 100644 --- a/src/controllers/itemDetails.js +++ b/src/controllers/itemDetails.js @@ -972,14 +972,16 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti } } - function toggleLineClamp(e) { - var target = e.target; + function toggleLineClamp(clampTarget, e) { + var expandButton = e.target; var clampClassName = 'detail-clamp-text'; - if (target.classList.contains(clampClassName)) { - target.classList.remove(clampClassName); + if (clampTarget.classList.contains(clampClassName)) { + clampTarget.classList.remove(clampClassName); + expandButton.innerHTML = 'Show Less'; } else { - target.classList.add(clampClassName); + clampTarget.classList.add(clampClassName); + expandButton.innerHTML = 'Show More'; } } @@ -991,9 +993,20 @@ 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); + + // Grab the sibling element to control the expand state + var expandButton = elem.parentElement.querySelector('.overview-expand'); + + // Detect if we have overflow of text. Based on this StackOverflow answer + // https://stackoverflow.com/a/35157976 + if (Math.abs(elem.scrollHeight - elem.offsetHeight) > 2) { + expandButton.classList.remove('hide'); + } else { + expandButton.classList.add('hide'); + } + + expandButton.addEventListener('click', toggleLineClamp.bind(null, elem)); var anchors = elem.querySelectorAll('a'); diff --git a/src/itemdetails.html b/src/itemdetails.html index 4d5cab026f..3b20397407 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -148,6 +148,9 @@
+