Merge pull request #314 from samvera-labs/responsive-css

Player icon width, big-play button, demo site CSS changes for responsive UI
samvera-labs · Dec 14, 2023 · 39da90f · 39da90f
2 parents c79a2de + da5205f
commit 39da90f
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 131 deletions.
diff --git a/demo/app.js b/demo/app.js
@@ -38,34 +38,34 @@ 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">
             @samvera/ramp
           </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
@@ -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
@@ -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
@@ -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);
 }