Add onClick for an expandable Overview of item details

Adds a onClick action that toggles expanding the item detail
Overview. By default it crops the text to 12 lines on mobile, 6
on larger viewports.

-webkit-line-clamp is supported on all Webkit browsers and Firefox
as of 3/2020. A fallback with max-height is provided as well.

Fixes #888

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);
+    }
+}

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++) {