From b46971bd6274438000e494aff8dc566239f07996 Mon Sep 17 00:00:00 2001
From: dananji <dwithana@iu.edu>
Date: Mon, 2 Oct 2023 16:16:27 -0400
Subject: [PATCH] Override Ramp css for details and transcript tabs in itemview
 page

---
 app/javascript/components/Ramp.jsx  |   2 +-
 app/javascript/components/Ramp.scss | 321 +++++++++++++++-------------
 2 files changed, 176 insertions(+), 147 deletions(-)

diff --git a/app/javascript/components/Ramp.jsx b/app/javascript/components/Ramp.jsx
index bbd27ce7f2..9a6135039c 100644
--- a/app/javascript/components/Ramp.jsx
+++ b/app/javascript/components/Ramp.jsx
@@ -51,7 +51,7 @@ const Ramp = ({
 
   return (
     <IIIFPlayer manifestUrl={manifestUrl}>
-      <Row>
+      <Row className="ramp--all-components">
         {!in_progress &&
           <Col sm={8}>
             { (cdl.enabled && !cdl.can_stream)
diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss
index 6c616d9cff..3d9050a967 100644
--- a/app/javascript/components/Ramp.scss
+++ b/app/javascript/components/Ramp.scss
@@ -14,167 +14,196 @@
  * ---  END LICENSE_HEADER BLOCK  ---
 */
 
-.iiif-player {
-  .ramp--structured-nav {
-    float: left;
-    width: 40%;
-    margin-top: 20px;
-  }
-  .ramp--transcript_nav {
-    float: right;
-    width: 60%;
-    margin-left: -20px;
-    margin-top: 20px;
-  }
-}
-
-.ramp--rails-title {
-  font-size: 2rem !important;
-  margin-top: 1rem !important;
+[class*="ramp--"] {
+  font-family: Arial, Helvetica, sans-serif;
 }
 
-.ramp--rails-content {
-  display: flex;
-
-  #administrative_options {
-    text-align: right !important;
-  }
-
-  .btn-sm {
-    padding: 0 0;
-  }
-
-  .share-tabs {
-    flex-grow: 2;
-  }
-
-  #share-list {
-    margin-left: -9.25rem;
-  }
-
-  .svg-add-to-playlist {
-    width: 35px;
-    margin: 0;
-  }
+.ramp--all-components {
 
-  .bgColor {
-    fill: white;
+  .iiif-player {
+    .ramp--structured-nav {
+      float: left;
+      width: 40%;
+      margin-top: 20px;
+    }
+    .ramp--transcript_nav {
+      float: right;
+      width: 60%;
+      margin-left: -20px;
+      margin-top: 20px;
+    }
   }
-
-  #add-to-playlist-btn:hover {
+  
+  .ramp--rails-title {
+    font-size: 2rem !important;
+    margin-top: 1rem !important;
+  }
+  
+  .ramp--rails-content {
+    display: flex;
+  
+    #administrative_options {
+      text-align: right !important;
+    }
+  
+    .btn-sm {
+      padding: 0 0;
+    }
+  
+    .share-tabs {
+      flex-grow: 2;
+    }
+  
+    #share-list {
+      margin-left: -9.25rem;
+    }
+  
+    .svg-add-to-playlist {
+      width: 35px;
+      margin: 0;
+    }
+  
     .bgColor {
-      fill: #f2f2f2;
+      fill: white;
+    }
+  
+    #add-to-playlist-btn:hover {
+      .bgColor {
+        fill: #f2f2f2;
+      }
+    }
+  
+    .foregroundColor {
+      fill: none;
+      stroke: #2a5459;
+      stroke-width: 2;
+      stroke-miterlimit: 10;
     }
   }
-
-  .foregroundColor {
-    fill: none;
-    stroke: #2a5459;
-    stroke-width: 2;
-    stroke-miterlimit: 10;
-  }
-}
-
-.ramp--supplemental-files {
-  .ramp--supplemental-files-display-content {
-    padding-left: 0;
+  
+  .ramp--supplemental-files {
+    .ramp--supplemental-files-display-content {
+      padding-left: 0;
+    }
+  
+    h4 {
+      border-bottom: 0.1rem solid #ddd;
+      padding-bottom: 0.75rem;
+      font-size: 1.25rem;
+    }
   }
-
-  h4 {
-    border-bottom: 0.1rem solid #ddd;
-    padding-bottom: 0.75rem;
-    font-size: 1.25rem;
+  
+  .nav.nav-tabs {
+    background-color:#fff;
+    border:1px solid #e2e7e9;
+    border-top-left-radius:.5rem;
+    border-top-right-radius:.5rem;
+    display:-ms-flexbox;
+    display:flex;
+    -ms-flex-wrap:wrap;
+    flex-wrap:wrap;
+  
+    .nav-item {
+      border:none;
+      background-color:transparent;
+      border-bottom:1px solid #e2e7e9;
+      color:#243142;
+      cursor:pointer;
+      -ms-flex-positive:1;
+      flex-grow:1;
+      line-height:1;
+      padding:1rem;
+      position:relative;
+      z-index:100;
+    }
+    .nav-item:not(:first-child) {
+      border-left:1px solid #e2e7e9;
+      margin-left:-1px;
+    }
+    .nav-item:hover {
+      background-color:#f8f9fa;
+      color:#0e1825;
+    }
+    .nav-item:hover:after {
+      background-color:#e2e7e9;
+      bottom:0;
+      content:"";
+      display:block;
+      height:.25rem;
+      left:0;
+      position:absolute;
+      width:100%;
+    }
+    .nav-item:focus {
+      outline:.125rem solid #328bb8;
+      outline-offset:.125rem;
+      background-color:#edfafd;
+    }
+    .nav-item:focus:not(:focus-visible) {
+      outline:none;
+    }
+    .nav-item[aria-selected=true] {
+      background-color:#f8f9fa;
+    }
+    .nav-item[aria-selected=true]:after {
+      bottom:0;
+      background-color:#2a5459;
+      content:"";
+      display:block;
+      height:.25rem;
+      left:0;
+      position:absolute;
+      width:100%;
+    }
   }
-}
-
-.nav.nav-tabs {
-  background-color:#fff;
-  border:1px solid #e2e7e9;
-  border-top-left-radius:.5rem;
-  border-top-right-radius:.5rem;
-  display:-ms-flexbox;
-  display:flex;
-  -ms-flex-wrap:wrap;
-  flex-wrap:wrap;
-
-  .nav-item {
-    border:none;
-    background-color:transparent;
-    border-bottom:1px solid #e2e7e9;
-    color:#243142;
-    cursor:pointer;
-    -ms-flex-positive:1;
-    flex-grow:1;
-    line-height:1;
+  
+  .tab-pane {
     padding:1rem;
-    position:relative;
-    z-index:100;
-  }
-  .nav-item:not(:first-child) {
-    border-left:1px solid #e2e7e9;
-    margin-left:-1px;
-  }
-  .nav-item:hover {
-    background-color:#f8f9fa;
-    color:#0e1825;
+    border-bottom-left-radius:.5rem;
+    border-bottom-right-radius:.5rem;
+    max-height: 75vh;
+    overflow: auto;
   }
-  .nav-item:hover:after {
-    background-color:#e2e7e9;
-    bottom:0;
-    content:"";
-    display:block;
-    height:.25rem;
-    left:0;
-    position:absolute;
-    width:100%;
+  .tab-pane:focus {
+    outline:.125rem solid #006298;
+    outline-offset:-.125rem;
   }
-  .nav-item:focus {
-    outline:.125rem solid #328bb8;
-    outline-offset:.125rem;
-    background-color:#edfafd;
-  }
-  .nav-item:focus:not(:focus-visible) {
+  .tab-pane:focus:not(:focus-visible) {
     outline:none;
   }
-  .nav-item[aria-selected=true] {
-    background-color:#f8f9fa;
-  }
-  .nav-item[aria-selected=true]:after {
-    bottom:0;
-    background-color:#2a5459;
-    content:"";
-    display:block;
-    height:.25rem;
-    left:0;
-    position:absolute;
-    width:100%;
+  
+  #expand_all_sections {
+    display: flex !important;
+    justify-content: flex-end;
+    padding-bottom: .5rem !important;
+  }
+  
+  .accordion-toggle-icon {
+    align-items: center;
+    color: #4c5a69;
+  }
+  
+  .icn-expand-all {
+    width: 20px;
+  }
+  
+  /* Override Ramp styling */
+  .ramp--metadata-display {
+    min-width: fit-content !important;
+  
+    .ramp--metadata-display-content {
+      padding: 0;
+      max-height: inherit;
+    }
   }
-}
-
-.tab-pane {
-  padding:1rem;
-  border-bottom-left-radius:.5rem;
-  border-bottom-right-radius:.5rem;
-}
-.tab-pane:focus {
-  outline:.125rem solid #006298;
-  outline-offset:-.125rem;
-}
-.tab-pane:focus:not(:focus-visible) {
-  outline:none;
-}
-
-#expand_all_sections {
-  display: flex !important;
-  justify-content: flex-end;
-  padding-bottom: .5rem !important;
-}
 
-.accordion-toggle-icon {
-  align-items: center;
-  color: #4c5a69;
-}
+  .ramp--transcript_nav {
+    max-height: 72vh;
+    display: flex;
+    flex-direction: column;
+  }
 
-.icn-expand-all {
-  width: 20px;
+  .ramp--transcript_nav div.transcript_content {
+    height: fit-content !important;
+  }
 }