Merge pull request #5894 from avalonmediasystem/playlist_desc_tweaks

Fix playlist description display issues
avalonmediasystem · Jul 2, 2024 · 8cbd9cc · 8cbd9cc
2 parents a554c15 + 23bc08e
commit 8cbd9cc
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 10 deletions.
diff --git a/app/javascript/components/PlaylistRamp.jsx b/app/javascript/components/PlaylistRamp.jsx
@@ -133,6 +133,26 @@ const Ramp = ({
     setExpanded(!expanded);
   };
 
+  // Update scrolling indicators when end of scrolling has been reached
+  const handleScrollableDescription = (e) => {
+    let elem = e.target;
+    const scrollMsg = elem.nextSibling;
+    const structureEnd = Math.abs(elem.scrollHeight - (elem.scrollTop + elem.clientHeight)) <= 1;
+
+    if (scrollMsg && structureEnd && scrollMsg.classList.contains('scrollable')) {
+      scrollMsg.classList.remove('scrollable');
+    } else if (scrollMsg && !structureEnd && !scrollMsg.classList.contains('scrollable')) {
+      scrollMsg.classList.add('scrollable');
+    }
+  };
+
+  // Update scrolling indicators when page is resized
+  const resizeObserver = new ResizeObserver(entries => {
+    for (let entry of entries) {
+      handleScrollableDescription(entry);
+    }
+  });
+
   return (
     <IIIFPlayer manifestUrl={manifestUrl}
       customErrorMessage='This playlist is empty.'
@@ -203,27 +223,32 @@ const Ramp = ({
               </div>
             </Col>
           </Row>
-          <div>
+          <Row>
             {comment && (
-              <div>
+              <div style={{position: 'relative'}}>
                 <h4>{comment_label}</h4>
-                <div>
+                <div className='ramp--playlist-description' onScroll={handleScrollableDescription}>
                   <span dangerouslySetInnerHTML={{ __html: description }} />
-                  {words.length > wordCount && (
-                    <a className="btn-link" style={expandBtn} onClick={handleDescriptionMoreLessClick}>
-                      Show {expanded ? 'less' : 'more'}
-                    </a>
-                  )}
                 </div>
+                {expanded && (
+                  <div className='ramp--playlist-description-scroll scrollable'>
+                    Scroll to see more
+                  </div>
+                )}
+                {words.length > wordCount && (
+                  <a className="btn-link" style={expandBtn} onClick={handleDescriptionMoreLessClick}>
+                    Show {expanded ? 'less' : 'more'}
+                  </a>
+                )}
               </div>
             )}
             {tags && (
-              <div>
+              <div className='ramp--playlist-tags'>
                 <h4>Tags</h4>
                 <div className="tag-button-wrapper" dangerouslySetInnerHTML={{ __html: tags }} />
               </div>
             )}
-          </div>
+          </Row>
           {playlist_item_ids?.length > 0 && (
             <React.Fragment>
               <h4 className="mt-3">Playlist Items</h4>

diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss
@@ -360,6 +360,37 @@
     flex-basis: auto;
     height: 70vh;
 
+    .ramp--playlist-description {
+      overflow: auto;
+      max-height: 25vh;
+    }
+
+    // Scroll to see more message
+    .ramp--playlist-description-scroll {
+      display: none;
+    }
+
+    .ramp--playlist-description-scroll.scrollable {
+      background: #bbbbbb;
+      text-align: center;
+      display: block;
+      position: absolute;
+      color: black;
+      font-size: 13px;
+      width: fit-content;
+      bottom: 0;
+      left: 35.5%;
+      border: 1px solid #ddd;
+      border-radius: 0.25rem 0.25rem 0 0;
+      border-bottom: none;
+      padding: 0.25em;
+      transform: translateY(-1.5rem);
+
+      @media (min-width: 585px) and (max-width: 768px) {
+        left: 25%;
+      }
+    }
+
     .ramp--structured-nav__border {
       margin-top: 0;
       overflow: auto;