Fix styling for components and demo site

demo/app.js

@@ -6,10 +6,12 @@ import Transcript from '@Components/Transcript/Transcript';
 import MetadataDisplay from '@Components/MetadataDisplay/MetadataDisplay';
 import './app.scss';
 import 'video.js/dist/video-js.css';
+import '../dist/ramp.css';
 
 const App = ({ manifestURL }) => {
   const [userURL, setUserURL] = React.useState(manifestURL);
   const [manifestUrl, setManifestUrl] = React.useState(manifestURL);
+  const [activeTab, setActiveTab] = React.useState('Details');
 
   React.useEffect(() => {
     setManifestUrl(manifestUrl);
@@ -25,6 +27,10 @@ const App = ({ manifestURL }) => {
     setUserURL(e.target.value);
   };
 
+  const handleShowTab = (tab) => {
+    setActiveTab(tab);
+  };
+
   return (
     <div className='iiif-demo'>
       <h1>Ramp</h1>
@@ -60,30 +66,62 @@ const App = ({ manifestURL }) => {
           manifestUrl={manifestUrl}
         >
           <div className="iiif-player-demo">
-            <div className="player-metadata-container">
-              <MediaPlayer enableFileDownload={true} />
-              <MetadataDisplay />
+            <MediaPlayer enableFileDownload={true} />
+            <div className="components-row">
+              <StructuredNavigation />
+              <div className="tabs">
+                <Tab
+                  activeTab={activeTab == 'Details'}
+                  key={'Details'}
+                  label={'Details'}
+                  onClick={handleShowTab}
+                >
+                  <MetadataDisplay showHeading={false} />
+                </Tab>
+                <Tab
+                  activeTab={activeTab == 'Transcripts'}
+                  key={'Transcripts'}
+                  label={'Transcripts'}
+                  onClick={handleShowTab}
+                ><Transcript
+                    playerID="iiif-media-player"
+                    transcripts={[
+                      {
+                        canvasId: 0,
+                        items: [
+                          {
+                            title: 'Manifest linked Transcript',
+                            url: manifestUrl,
+                          }
+                        ],
+                      },
+                    ]}
+                  />
+                </Tab>
+
+              </div>
             </div>
-            <StructuredNavigation />
-            <Transcript
-              playerID="iiif-media-player"
-              transcripts={[
-                {
-                  canvasId: 0,
-                  items: [
-                    {
-                      title: 'Manifest linked Transcript',
-                      url: manifestUrl,
-                    }
-                  ],
-                },
-              ]}
-            />
           </div>
         </IIIFPlayer>
       </div>
     </div>
   );
 };
 
+const Tab = ({ label, onClick, activeTab, children }) => {
+  const onClickHandler = () => {
+    onClick(label);
+  };
+
+  return (
+    <div className="tab-nav">
+      <input type="radio" id={label} name="tab-nav" checked={activeTab} onChange={onClickHandler} />
+      <label htmlFor={label}>{label}</label>
+      <div className="tab-content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
 export default App;

demo/app.scss

@@ -4,30 +4,96 @@ html {
 }
 
 div.iiif-player-demo {
-  .ramp--structured-nav {
-    float: left;
-    width: 40%;
-    margin-top: 20px;
+  .ramp--media_player {
+    width: 70%;
+    margin: auto;
   }
 
-  .ramp--transcript_nav {
-    float: right;
-    width: 60%;
-    margin-left: -20px;
+  .components-row {
+    padding: 0 1rem;
     margin-top: 20px;
-  }
-
-  .player-metadata-container {
     display: flex;
+    min-height: 30vh;
   }
 
-  .ramp--media_player {
+  .ramp--structured-nav {
     flex: 1;
   }
 
   .ramp--metadata-display {
+    margin-top: 1rem
+  }
+
+  // Reference: https://codepen.io/alvarotrigo/pen/xxXoMJy
+  .tabs {
+    flex: 2;
+    position: relative;
+    display: flex;
+    border-radius: 8px 8px 0 0;
+    overflow: hidden;
+  }
+
+  .tab-nav {
     flex: 1;
-    margin-left: 10px;
+  }
+
+  .tab-nav label {
+    display: block;
+    box-sizing: border-box;
+    /* tab content must clear this */
+    height: 2.5rem;
+
+    padding: 10px;
+    text-align: center;
+    cursor: pointer;
+    transition: background 0.5s ease;
+    // border: 1px solid #d3d3d3;
+    color: black;
+  }
+
+  .tab-nav label:hover {
+    background: #d3d3d3;
+  }
+
+  .tab-content {
+    position: absolute;
+    border: 1px solid #d3d3d3;
+
+    left: 0;
+    bottom: 0;
+    right: 0;
+    /* clear the tab labels */
+    top: 2.5rem;
+
+    border-radius: 0 0 8px 8px;
+
+    transition:
+      opacity 0.8s ease,
+      transform 0.8s ease;
+
+    /* show/hide */
+    opacity: 0;
+    transform: scale(0.1);
+    transform-origin: top left;
+  }
+
+
+  /* MAKE IT WORK ----- */
+  .tab-nav [type=radio] {
+    display: none;
+  }
+
+  [type=radio]:checked~label {
+    z-index: 2;
+    background: #d3d3d3;
+  }
+
+  [type=radio]:checked~label~.tab-content {
+    z-index: 1;
+
+    /* show/hide */
+    opacity: 1;
+    transform: scale(1);
   }
 }
 

dist/ramp.css

@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
 [class*='ramp--'] {
   font-family: "Open Sans", sans-serif;
-  color: #7e7e7e; }
+  color: #333333; }
 
 .vjs-marker {
   /* to ignore/pass-through click-, tap-, scroll- and hover events 
@@ -233,6 +233,7 @@
   width: 5em;
   padding-right: 0; }
 
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
 .vjs-download-btn {
   color: white;
   border: none;
@@ -252,12 +253,19 @@
   z-index: 1;
   right: -100%;
   bottom: 100%; }
+  .vjs-menu-content.file-download-menu .menu-header {
+    background-color: #7e7e7e; }
 
 .vjs-menu-content a {
   color: white;
-  padding: 0 1.5rem;
+  padding: 0 1.5rem 0 0.5rem;
   text-decoration: none; }
 
+.vjs-menu-item-text span,
+svg {
+  vertical-align: middle;
+  display: inline-block; }
+
 .vjs-menu-content li:hover {
   background-color: rgba(115, 133, 159, 0.5); }
 
@@ -300,7 +308,6 @@ ul.ramp--structured-nav__list {
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
 .ramp--transcript_nav {
   max-height: 30em;
-  font-size: 0.85em;
   padding: 10px; }
   .ramp--transcript_nav div.active {
     background-color: #d3d3d3; }
@@ -356,17 +363,17 @@ div.ramp--transcript_item {
 /* TranscriptSelector styling */
 .ramp--transcript_selector {
   margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
+  background-color: #f2f2f2;
+  border: 1px solid #d3d3d3;
   padding: 1em;
-  border-color: #d3d3d3;
-  border-radius: 3px;
+  border-radius: 0.25rem 0.25rem 0 0;
   position: relative; }
   .ramp--transcript_selector select {
     font-family: "Open Sans", sans-serif;
     padding: 4px;
     width: 100%; }
   .ramp--transcript_selector .selector-content {
+    background-color: white;
     margin: 0;
     position: absolute;
     width: 50%; }
@@ -378,28 +385,55 @@ div.ramp--transcript_item {
 /* TranscriptDownloader styling */
 button.ramp--transcript_downloader {
   float: right;
-  margin: 0;
   position: relative;
-  color: #000;
-  border-radius: 3px;
+  color: #f2f2f2;
+  border-radius: 0.25rem;
   text-align: center;
-  line-height: 20px;
-  border: 1px solid #d3d3d3;
+  line-height: 1.5rem;
+  border: transparent;
+  background: #477076;
   width: fit-content; }
+  button.ramp--transcript_downloader span {
+    padding: 0.05rem; }
 
-/* Extra small devices (600px and down) */
-@media only screen and (max-width: 600px) {
+/* Extra small devices (768px and down) */
+@media only screen and (max-width: 768px) {
   .ramp--transcript_selector {
     min-height: 4em; }
     .ramp--transcript_selector select {
       min-width: 8em; }
   button.ramp--transcript_downloader .download-label:after {
     content: 'Download'; } }
 
-/* Small devices (600px and up) */
-@media only screen and (min-width: 600px) {
+/* Small devices (768px and up) */
+@media only screen and (min-width: 768px) {
   .ramp--transcript_selector {
     min-height: 3.5em;
     padding: 0.5em; }
   button.ramp--transcript_downloader .download-label:after {
-    content: 'Download this transcript'; } }
+    content: 'Download transcript'; } }
+
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+.ramp--metadata-display {
+  min-width: 30rem; }
+  .ramp--metadata-display .ramp--metadata-display-title {
+    border: 0.05rem solid #d3d3d3;
+    border-radius: 0.25rem 0.25rem 0 0;
+    margin-bottom: 1rem;
+    background: #f2f2f2; }
+    .ramp--metadata-display .ramp--metadata-display-title h4 {
+      font-weight: normal;
+      padding: 0.5rem 1.5rem;
+      margin: 0;
+      color: #333333; }
+  .ramp--metadata-display .ramp--metadata-display-content {
+    padding: 0 0 1.5rem 1.5rem;
+    color: #333333;
+    max-height: 30rem;
+    overflow-y: scroll; }
+    .ramp--metadata-display .ramp--metadata-display-content dt {
+      font-weight: bold; }
+    .ramp--metadata-display .ramp--metadata-display-content dd {
+      padding-bottom: 1rem; }
+    .ramp--metadata-display .ramp--metadata-display-content a {
+      color: #477076; }

src/components/MetadataDisplay/MetadataDisplay.js

@@ -43,7 +43,11 @@ const MetadataDisplay = ({ displayTitle = true, showHeading = true }) => {
       </div>
     );
   } else {
-    return null;
+    return (<div
+      data-testid="metadata-display"
+      className="ramp--metadata-display">
+      <p>No valid Metadata is in the Manifest</p>
+    </div>);
   }
 };
 

src/components/MetadataDisplay/MetadataDisplay.scss

@@ -1,8 +1,11 @@
 @import '../../styles/vars';
 
 .ramp--metadata-display {
-  max-width: 30rem;
-  max-height: 30rem;
+  min-width: 30rem;
+
+  p {
+    padding-left: 1rem;
+  }
 
   .ramp--metadata-display-title {
     border: 0.05rem solid $primaryLight;
@@ -22,7 +25,7 @@
   .ramp--metadata-display-content {
     padding: 0 0 1.5rem 1.5rem;
     color: $primaryDarker;
-    max-height: 20rem;
+    max-height: 30rem;
     overflow-y: scroll;
 
     dt {

src/components/MetadataDisplay/MetadataDisplay.test.js

@@ -55,11 +55,12 @@ describe('MetadataDisplay component', () => {
     });
   });
 
-  it('with manifest without metadata renders nothing', () => {
+  it('with manifest without metadata renders a message', () => {
     const MetadataDisp = withManifestProvider(MetadataDisplay, {
       initialState: { manifest: manfiestWoMetadata },
     });
     render(<MetadataDisp />);
-    expect(screen.queryByTestId('metadata-display')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('metadata-display')).toBeInTheDocument();
+    expect(screen.getByText('No valid Metadata is in the Manifest'));
   });
 });