adjust styling for more/less on project_description text (#1270)

* adjust styling for more/less on project_description text * additional styling * more js testing * Add toggle for more-less link for description as needed Co-authored-by: Hector Correa <[email protected]> * remove debugger line --------- Co-authored-by: Hector Correa <[email protected]>
pulibrary · Feb 6, 2025 · 85f4744 · 85f4744
1 parent 0a09fce
commit 85f4744
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 42 deletions.
diff --git a/app/assets/stylesheets/_projects.scss b/app/assets/stylesheets/_projects.scss
@@ -75,6 +75,7 @@
 
   a#show-more-less-link {
     color: $gray-60;
+    text-decoration: none;
   }
 
   .label {
@@ -140,22 +141,6 @@
     color: $red-darker;
   }
 
-  #project-description {
-    color: $black;
-    font-family: "Libre Franklin";
-    font-size: 1em;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.5em;
-  }
-
-  .truncate {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-
   a#show-more-less-link {
     color: $gray-60;
   }

diff --git a/app/javascript/entrypoints/showMoreLess.js b/app/javascript/entrypoints/showMoreLess.js
@@ -8,11 +8,11 @@ export const showMoreLess = {
       const linkText = event.target.textContent.toLowerCase();
       event.preventDefault();
 
-      if (linkText === 'more...') {
-        textElement.textContent = 'less...';
+      if (linkText === 'more') {
+        textElement.textContent = 'less';
         excerpt.classList.remove('truncate');
       } else {
-        textElement.textContent = 'more...';
+        textElement.textContent = 'more';
         excerpt.classList.add('truncate');
       }
     });

diff --git a/app/views/projects/_project_details_heading.html.erb b/app/views/projects/_project_details_heading.html.erb
@@ -19,7 +19,7 @@
         <div id="description-text" class="truncate">
           <%= @project.description %>
         </div>
-        <a id="show-more-less-link" class="show-more" href="#"><span>more...</span></a>
+        <a id="show-more-less-link" class="show-more" href="#"><span>more</span></a>
       </div><!-- #project-description -->
 
       <div class="row">
@@ -72,25 +72,23 @@
 
 <script type="module">
 
-var $element = $('#description-text');
-var $c = $element
-           .clone()
-           .css({display: 'inline', width: 'auto', visibility: 'hidden'})
-           .appendTo('body');
-if( $c.width() > $element.width() ) { 
-const ExcerptWidget = {
- showMore: function(showMoreLinksTarget, excerptTarget) {
-  const showMoreLinks = document.querySelectorAll(showMoreLinksTarget);
-
-   showMoreLinks.forEach(function(link) {
-      const excerpt = document.querySelector(excerptTarget);
-      showMoreLess.showMore(link, excerpt);
-    });
-   }
-  };
-  ExcerptWidget.showMore('.show-more', '#description-text');
-} else {
-  document.getElementById('show-more-less-link').style.display = 'none';
-}
-$c.remove();
-</script>
+// https://rubyyagi.com/how-to-truncate-long-text-and-show-read-more-less-button/  
+var $element = $('#description-text')[0];
+      if ($element !== undefined) {
+        var textTruncated = ($element.offsetHeight < $element.scrollHeight || $element.offsetWidth < $element.scrollWidth)
+        if (!textTruncated) {
+          $('#show-more-less-link').addClass("invisible");
+        }
+      }
+      const ExcerptWidget = {
+        showMore: function(showMoreLinksTarget, excerptTarget) {
+         const showMoreLinks = document.querySelectorAll(showMoreLinksTarget);
+
+          showMoreLinks.forEach(function(link) {
+             const excerpt = document.querySelector(excerptTarget);
+             showMoreLess.showMore(link, excerpt);
+           });
+          }
+         };
+         ExcerptWidget.showMore('.show-more', '#description-text');
+</script>