Skip to content

Commit

Permalink
Override Ramp css for details and transcript tabs in itemview page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dananji
Dananji committed Oct 2, 2023
1 parent 5d164cd commit b46971b
Show file tree
Hide file tree
Showing 2 changed files with 176 additions and 147 deletions.
2 changes: 1 addition & 1 deletion app/javascript/components/Ramp.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
321 changes: 175 additions & 146 deletions app/javascript/components/Ramp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

0 comments on commit b46971b

Please sign in to comment.