Merge pull request #4859 from avalonmediasystem/collection-card-title

Fix html encoded titles in collection cards
avalonmediasystem · Aug 29, 2022 · 65b14ed · 65b14ed
2 parents ddb9e34 + cde17e0
commit 65b14ed
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/app/javascript/components/collections/Collection.scss b/app/javascript/components/collections/Collection.scss
@@ -83,6 +83,17 @@
   .italic {
     font-style: italic;
   }
+
+  // When `line-clamp` is used with `display: -webkit-box`
+  // contains text to a given amount of lines (e.g.: 2)
+  // Reference: https://mgearon.com/css/line-clamp-css-guide/
+  h4 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .card-text {

diff --git a/app/javascript/components/collections/landing/SearchResultsCard.js b/app/javascript/components/collections/landing/SearchResultsCard.js
@@ -74,10 +74,7 @@ const thumbnailSrc = (doc, props) => {
 };
 
 const titleHTML = (doc) => {
-  var title = doc.attributes['title_tesi'] && doc.attributes['title_tesi'].attributes.value.substring(0, 50) || doc['id'];
-  if (doc.attributes['title_tesi'] && doc.attributes['title_tesi'].attributes.value.length >= 50) {
-    title += "<span>...</span>";
-  }
+  var title = doc.attributes['title_tesi'] && doc.attributes['title_tesi'].attributes.value || doc['id'];
   return { __html: title };
 };