From 1ddfd2c7bbad361d94cd0465b855863b94e2a35c Mon Sep 17 00:00:00 2001 From: Andres Ruiz Date: Sun, 8 Mar 2020 15:50:54 -0400 Subject: [PATCH 1/6] 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 | 19 +++++++++++++++++++ src/controllers/itemDetails.js | 15 +++++++++++++++ 2 files changed, 34 insertions(+) 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++) { From 8154abc5252e5cb7caa4f0a51c888edd2fd0ebba Mon Sep 17 00:00:00 2001 From: Andres J Ruiz Torres Date: Sun, 3 May 2020 16:48:04 -0400 Subject: [PATCH 2/6] Remove fallback values --- src/assets/css/librarybrowser.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 721aee3d8a..bddb694d41 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -1150,16 +1150,10 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { 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); } } From ed0eefb5c7387a771542cac04997bb27925e6f23 Mon Sep 17 00:00:00 2001 From: Andres J Ruiz Torres Date: Sun, 3 May 2020 17:30:19 -0400 Subject: [PATCH 3/6] Add a linkbutton control to show/hide more User a linkbutton element adjecent to the overview to control the expanded / shrunken state. The button will show dynamically based on the detected content size. --- src/assets/css/librarybrowser.css | 5 +++++ src/controllers/itemDetails.js | 27 ++++++++++++++++++++------- src/itemdetails.html | 3 +++ 3 files changed, 28 insertions(+), 7 deletions(-) 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 @@

+
+ Show More +

From 000de9279bbe6842a71546d5677eb21dfd5fa650 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 23 May 2020 19:48:27 +0200 Subject: [PATCH 4/6] Fix translation and TV layout on Show More button --- src/itemdetails.html | 2 +- src/strings/en-us.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/itemdetails.html b/src/itemdetails.html index 3b20397407..18de25845c 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -149,7 +149,7 @@

- Show More + ${ShowMore}

diff --git a/src/strings/en-us.json b/src/strings/en-us.json index f26ba16c85..4f109eaeb6 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -1373,6 +1373,7 @@ "Share": "Share", "ShowAdvancedSettings": "Show advanced settings", "ShowIndicatorsFor": "Show indicators for:", + "ShowMore": "Show more", "ShowTitle": "Show title", "ShowYear": "Show year", "Shows": "Shows", From 0e74e89950171fd7e18b01481a4024efeaf8bf38 Mon Sep 17 00:00:00 2001 From: Andres J Ruiz Torres Date: Tue, 2 Jun 2020 23:15:15 -0400 Subject: [PATCH 5/6] Translate dynamic toggle messages --- src/controllers/itemDetails.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/controllers/itemDetails.js b/src/controllers/itemDetails.js index 33eec21a7d..c2a1370176 100644 --- a/src/controllers/itemDetails.js +++ b/src/controllers/itemDetails.js @@ -978,10 +978,10 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti if (clampTarget.classList.contains(clampClassName)) { clampTarget.classList.remove(clampClassName); - expandButton.innerHTML = 'Show Less'; + expandButton.innerHTML = globalize.translate('Show Less'); } else { clampTarget.classList.add(clampClassName); - expandButton.innerHTML = 'Show More'; + expandButton.innerHTML = globalize.translate('Show More'); } } From 68762d80122e749c7ad58ac17f58394fb594bef0 Mon Sep 17 00:00:00 2001 From: Andres Ruiz Date: Wed, 3 Jun 2020 23:28:26 -0400 Subject: [PATCH 6/6] Use correct string for translation, add ShowLess Use the right string form for the string translation for the dynamic strings, add the `ShowLess` version. Co-authored-by: Dmitry Lyzo <56478732+dmitrylyzo@users.noreply.github.com> --- src/controllers/itemDetails.js | 4 ++-- src/strings/en-us.json | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/controllers/itemDetails.js b/src/controllers/itemDetails.js index c2a1370176..365cdaca5b 100644 --- a/src/controllers/itemDetails.js +++ b/src/controllers/itemDetails.js @@ -978,10 +978,10 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti if (clampTarget.classList.contains(clampClassName)) { clampTarget.classList.remove(clampClassName); - expandButton.innerHTML = globalize.translate('Show Less'); + expandButton.innerHTML = globalize.translate('ShowLess'); } else { clampTarget.classList.add(clampClassName); - expandButton.innerHTML = globalize.translate('Show More'); + expandButton.innerHTML = globalize.translate('ShowMore'); } } diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 4f109eaeb6..cbe2ae0683 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -1373,6 +1373,7 @@ "Share": "Share", "ShowAdvancedSettings": "Show advanced settings", "ShowIndicatorsFor": "Show indicators for:", + "ShowLess": "Show less", "ShowMore": "Show more", "ShowTitle": "Show title", "ShowYear": "Show year",