From da5205f7633fcec67767bcf03a72084f2476922e Mon Sep 17 00:00:00 2001
From: dananji <dwithana@iu.edu>
Date: Mon, 11 Dec 2023 16:59:36 -0500
Subject: [PATCH] Player icon width, big-play button, demo site CSS changes for
 responsive UI

---
 demo/app.js                                   |  40 ++---
 demo/app.scss                                 | 166 +++++++-----------
 .../StructuredNavigation.scss                 |   1 -
 src/styles/main.scss                          |  22 +--
 4 files changed, 98 insertions(+), 131 deletions(-)

diff --git a/demo/app.js b/demo/app.js
index b0cc105a..034b6b02 100644
--- a/demo/app.js
+++ b/demo/app.js
@@ -38,8 +38,8 @@ const App = ({ manifestURL }) => {
 
   return (
     <div className='ramp-demo'>
-      <h1>Ramp</h1>
-      <div className='ramp--description'>
+      <div className='ramp--details'>
+        <h1>Ramp</h1>
         <p>An interactive, IIIF powered A/V player built with components
           from <a href="https://www.npmjs.com/package/@samvera/ramp"
             target="_blank">
@@ -47,25 +47,25 @@ const App = ({ manifestURL }) => {
           </a> library. This player supports <em>IIIF Presentation 3.0 Manifests</em>. Please enter the URL
           of your <em>public</em> manifest to view it in the player.
         </p>
-      </div>
-      <div className='ramp--form_container'>
-        <form onSubmit={handleSubmit}>
-          <div className='row'>
-            <div className='col-1'>
-              <label htmlFor="manifesturl" className="ramp-demo__manifest-input-label">Manifest URL</label>
-            </div>
-            <div className='col-2'>
-              <input type='url'
-                id='manifesturl'
-                name='manifesturl'
-                value={userURL}
-                onChange={handleUserInput}
-                placeholder='Manifest URL'
-                className="ramp-demo__manifest-input" />
-              <input type='submit' value='Set Manifest' className="ramp-demo__manifest-submit" />
+        <div className='ramp--form_container'>
+          <form onSubmit={handleSubmit}>
+            <div className='row'>
+              <div className='col-1'>
+                <label htmlFor="manifesturl" className="ramp-demo__manifest-input-label">Manifest URL</label>
+              </div>
+              <div className='col-2'>
+                <input type='url'
+                  id='manifesturl'
+                  name='manifesturl'
+                  value={userURL}
+                  onChange={handleUserInput}
+                  placeholder='Manifest URL'
+                  className="ramp-demo__manifest-input" />
+                <input type='submit' value='Set Manifest' className="ramp-demo__manifest-submit" />
+              </div>
             </div>
-          </div>
-        </form>
+          </form>
+        </div>
       </div>
       <div className='ramp--player_container'>
         <IIIFPlayer
diff --git a/demo/app.scss b/demo/app.scss
index ef537bc7..4a18d7eb 100644
--- a/demo/app.scss
+++ b/demo/app.scss
@@ -3,29 +3,80 @@ html {
   font-family: Arial, Helvetica, sans-serif;
 }
 
-div.iiif-player-demo {
-  .ramp--media_player {
-    margin: 0 10%;
+.ramp-demo {
+  margin: 0 2rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-template-rows: repeat(auto-fit, minmax(240px, 1fr));
+
+  .ramp--details,
+  .ramp--player_container {
+    grid-column-start: 1;
+    grid-column-end: end;
   }
 
-  .components-row {
-    padding: 0 1rem;
-    margin-top: 20px;
-    display: flex;
-    min-height: 40vh;
+  .ramp-demo__manifest-input {
+    width: 80%;
+    padding: 11px;
+    border: 1px solid #ccc;
+    border-radius: 4px 0 0 4px;
+    resize: vertical;
+    font-size: medium;
   }
 
-  .ramp--structured-nav {
-    flex: 1;
+  .ramp-demo__manifest-input-label {
+    padding: 12px 12px 12px 0;
+    display: inline-block;
   }
 
-  .ramp--metadata-display {
-    margin-top: 1rem
+  .ramp-demo__manifest-submit {
+    background-color: #2a5459;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 0 4px 4px 0;
+    cursor: pointer;
+    font-size: medium;
   }
 
-  .nav {
-    flex: 1;
-    margin-right: 2rem;
+  .ramp-demo__manifest-submit:hover {
+    background-color: #80a590;
+  }
+
+  .ramp--form_container {
+    background-color: #f2f2f2;
+    padding: 15px;
+    border-radius: 5px;
+  }
+
+  .col-1 {
+    float: left;
+    width: 10%;
+    margin-top: 5px;
+  }
+
+  .col-2 {
+    float: left;
+    width: 90%;
+    margin-top: 5px;
+  }
+
+  /* Clear floats after the columns */
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .ramp--player_container {
+    padding: 10px 0;
+  }
+
+  .components-row {
+    margin-top: 1rem;
+    display: grid;
+    gap: 0.1rem;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   }
 
   /*Reference: https://accessible-react.eevis.codes/components/tabs */
@@ -89,88 +140,3 @@ div.iiif-player-demo {
     border-radius: 0 0 0.5rem 0.5rem;
   }
 }
-
-.ramp-demo {
-  margin: auto;
-  width: 75%;
-
-  .ramp--description {
-    margin-bottom: 15px;
-  }
-
-  .ramp-demo__manifest-input {
-    width: 80%;
-    padding: 11px;
-    border: 1px solid #ccc;
-    border-radius: 4px 0 0 4px;
-    resize: vertical;
-    font-size: medium;
-  }
-
-  .ramp-demo__manifest-input-label {
-    padding: 12px 12px 12px 0;
-    display: inline-block;
-  }
-
-  .ramp-demo__manifest-submit {
-    background-color: #2a5459;
-    color: white;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 0 4px 4px 0;
-    cursor: pointer;
-    font-size: medium;
-  }
-
-  .ramp-demo__manifest-submit:hover {
-    background-color: #80a590;
-  }
-
-  .ramp--form_container {
-    background-color: #f2f2f2;
-    padding: 15px;
-    border-radius: 5px;
-  }
-
-  .col-1 {
-    float: left;
-    width: 10%;
-    margin-top: 5px;
-  }
-
-  .col-2 {
-    float: left;
-    width: 90%;
-    margin-top: 5px;
-  }
-
-  /* Clear floats after the columns */
-  .row:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  .ramp--player_container {
-    padding: 10px 0;
-  }
-
-  @media screen and (max-width: 835px) {
-    .components-row {
-      flex-direction: column;
-    }
-
-    .tabs {
-      margin-top: 2rem;
-    }
-
-    input[type=url] {
-      width: 75%;
-    }
-
-    .col-2 {
-      width: 90%;
-      margin-top: 5px;
-    }
-  }
-}
diff --git a/src/components/StructuredNavigation/StructuredNavigation.scss b/src/components/StructuredNavigation/StructuredNavigation.scss
index 9ce3a9b3..639f0c6a 100644
--- a/src/components/StructuredNavigation/StructuredNavigation.scss
+++ b/src/components/StructuredNavigation/StructuredNavigation.scss
@@ -3,7 +3,6 @@
 .ramp--structured-nav {
   margin-top: 20px;
   max-height: 40vh;
-  min-width: 45vh;
   max-width: 50vw;
   overflow-y: auto;
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index c19fda97..8f8442f6 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -44,15 +44,21 @@
   font-size: 120%;
 }
 
+/* Make VideoJS control bar buttons smaller */
+.video-js .vjs-volume-panel .vjs-volume-panel-vertical,
+.video-js .vjs-control {
+  width: 2.5rem !important;
+}
+
 /* Make the horizontal volume panel always visible for audio */
-.vjs-volume-panel-horizontal {
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
   transition: none !important;
-  width: 10em !important;
+  width: 8em !important;
 }
 
 .video-js.vjs-audio .vjs-volume-panel .vjs-volume-control {
   opacity: 1 !important;
-  width: 5em !important;
+  width: 4em !important;
 }
 
 /* Make player height minimum to the controls height so when we hide
@@ -95,13 +101,9 @@ video/poster area the controls are displayed correctly. */
 
 /* big-play button */
 .video-js .vjs-big-play-button {
-  height: 2.5rem;
-  width: 2.5rem;
-  line-height: 2.5rem;
   border-radius: 50%;
+  width: 50px;
   scale: 2;
-  border: 0.1rem solid #fff;
-  margin: -2vw;
 }
 
 /* captions button selection */
@@ -119,6 +121,6 @@ video/poster area the controls are displayed correctly. */
 
 ::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: rgba(0,0,0,.5);
-  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+  background-color: rgba(0, 0, 0, .5);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
 }