Merge pull request #5572 from avalonmediasystem/tabbed-nav-columns

Set tabbed nav columns to fill height
avalonmediasystem · Jan 17, 2024 · bd051b8 · bd051b8
2 parents 23f1c0b + 91dd2a5
commit bd051b8
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/app/javascript/components/MediaObjectRamp.jsx b/app/javascript/components/MediaObjectRamp.jsx
@@ -245,7 +245,7 @@ const Ramp = ({
  <MetadataDisplay showHeading={false} displayTitle={false}/>
  </Tab>
  { (cdl.can_stream && master_files_count != 0 && has_transcripts) &&
- <Tab eventKey="transcripts" title="Transcripts" className="ramp-transcripts-tab">
+ <Tab eventKey="transcripts" title="Transcripts" className="ramp--transcripts_tab">
  <Transcript
  playerID="iiif-media-player"
  manifestUrl={manifestUrl}

diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss
@@ -160,25 +160,25 @@
  .ramp--tabs-panel {
  display: flex;
  flex-direction: column;
+ flex-basis: auto;
 
  .tab-content {
  display: flex;
- flex: 1;
- height: 100%;
+ flex-grow: 1;
+ height: 70vh;
  }
 
  .tab-pane {
- flex: 1;
+ flex-grow: 1;
  padding:1rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
- max-height: inherit;
  overflow: auto;
  }
  }
 
  // Remove double scroll-bar for transcripts tab
- .ramp-transcripts-tab {
+ .ramp--transcripts_tab {
  overflow: hidden;
  }
 
@@ -193,23 +193,22 @@
  /* Override Ramp styling */
  .ramp--metadata-display {
  min-width: fit-content !important;
- height: 100%;
 
  .ramp--metadata-display-content {
  padding: 0;
- max-height: 50rem;
+ max-height: 100%;
  }
  }
 
  .ramp--transcript_nav {
- max-height: 50rem;
+ max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  }
 
  .ramp--transcript_nav div.transcript_content {
- height: fit-content !important;
+ height: fit-content;
  }
 
  .vjs-track-scrubber-container {

diff --git a/app/views/media_objects/_item_view.html.erb b/app/views/media_objects/_item_view.html.erb
@@ -95,10 +95,34 @@ Unless required by applicable law or agreed to in writing, software distributed
  player.player.ready(() => {
  let canvasindex = player.dataset['canvasindex'];
  transcriptCheck(canvasindex);
+ setColumnHeights();
  });
  }
  }
 
+ /*
+ Set tabbed nav column height based on the content
+ */
+ function setColumnHeights() {
+ let activeTab = $('.tab-pane.active.show');
+ // When the active tab is transcripts, check the transcript content height to
+ // check there is overflowing content to set the column height. This is handled
+ // seperately because the height check in the else block doesn't identify this since
+ // since this content is set dynamically based on user selection in dropdown menu. 
+ if(activeTab.hasClass('ramp--transcripts_tab')) {
+ let transcriptContent = $('.transcript_content');
+ if(transcriptContent[0].scrollHeight > transcriptContent[0].clientHeight) {
+ activeTab[0].style.height = 'unset';
+ }
+ } else {
+ if (activeTab[0].scrollHeight > activeTab[0].clientHeight) {
+ activeTab[0].style.height = 'unset';
+ } else {
+ activeTab[0].style.height = 'fit-content';
+ }
+ }
+ }
+
  function transcriptCheck(canvasindex) {
  let sectionId = sectionIds[canvasindex];
  let transcriptTab = document.evaluate('//a[text()="Transcripts"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;