Set font-size CSS in metadata display component and cleanup (#747)

* Set font-size CSS in metadata display component and cleanup * Use meta tag in demo site to allow text scaling with zoom in/out * Use sass variables for font sizes for large and medium
samvera-labs · Dec 6, 2024 · 530797e · 530797e
1 parent f685a99
commit 530797e
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 13 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -2,6 +2,8 @@
 
 <head>
   <title>Ramp</title>
+  <!-- Allows for text scaling in the demo instance -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
 </head>
 
 <body>

diff --git a/src/components/MarkersDisplay/MarkersDisplay.scss b/src/components/MarkersDisplay/MarkersDisplay.scss
@@ -59,6 +59,10 @@
     display: flex;
     justify-content: flex-end;
 
+    svg {
+      vertical-align: baseline;
+    }
+
     p {
       margin: 0;
       margin-top: 0.25rem;
@@ -98,11 +102,6 @@
   }
 }
 
-.ramp--markers-display__markers-empty {
-  font-size: medium;
-  padding: 2em;
-}
-
 // Styling for new marker form
 .ramp-markers-display__new-marker {
   margin-bottom: 1rem;
@@ -113,7 +112,7 @@
   padding: 0.5rem;
   border-radius: 0.25rem;
   margin: 1rem 0;
-  font-size: 0.85rem;
+  font-size: $fontSizeMedium;
   font-weight: bold;
 
   table.create-marker-form-table {

diff --git a/src/components/StructuredNavigation/StructuredNavigation.scss b/src/components/StructuredNavigation/StructuredNavigation.scss
@@ -15,7 +15,7 @@
 
     .ramp--structured-nav__sections-text {
       font-weight: bold;
-      font-size: 1.25em;
+      font-size: $fontSizeLarge;
       &.hidden {
         visibility: hidden;
       }
@@ -29,6 +29,7 @@
       border-radius: 0.3em;
       cursor: pointer;
       align-items: flex-end;
+      font-size: 13px;
 
       .arrow {
         border: solid $primaryLightest;
@@ -246,7 +247,7 @@ ul.ramp--structured-nav__list {
   flex-direction: column;
   background-color: transparent;
   border-top: 1px solid $primaryLight;
-  font-size: 1.25rem;
+  font-size: $fontSizeLarge;
   font-weight: 400;
 
   .not-clickable {
@@ -258,7 +259,6 @@ ul.ramp--structured-nav__list {
     text-align: left;
     width: 100%;
     padding: 1rem;
-    font-size: 1.25rem;
     font-weight: inherit;
     background: $primaryLightest;
 
@@ -268,6 +268,7 @@ ul.ramp--structured-nav__list {
 
     span {
       padding-left: 0;
+      font-size: $fontSizeLarge;
     }
   }
 
@@ -308,7 +309,7 @@ ul.ramp--structured-nav__list {
       border: 1px solid $primaryDark;
       border-radius: 999px;
       color: $primaryDarkest;
-      font-size: 0.75rem;
+      font-size: $fontSizeMedium;
       letter-spacing: 0.02rem;
       line-height: 1.6;
       padding: 0 0.5rem;

diff --git a/src/components/SupplementalFiles/SupplementalFiles.scss b/src/components/SupplementalFiles/SupplementalFiles.scss
@@ -48,7 +48,6 @@
   }
 
   .ramp--supplemental-files-empty {
-    font-size: medium;
     padding: 2em;
   }
 }
diff --git a/src/components/Transcript/Transcript.scss b/src/components/Transcript/Transcript.scss
@@ -10,12 +10,10 @@
     overflow-y: auto;
 
     p {
-      font-size: small;
       color: $primaryDarker;
     }
 
     #no-transcript {
-      font-size: medium;
       padding: 2em;
     }
   }

diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
@@ -14,6 +14,9 @@ $primaryGreenDimmer: #3b5e5e;
 $primaryGreenDark: #2a5459;
 $primaryGreenDarker: #1a3a3f;
 
+$fontSizeLarge: 20px;
+$fontSizeMedium: 12px;
+
 $danger: #e0101a;
 
 $fontPrimary: 'Open Sans', sans-serif;

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -3,6 +3,7 @@
 [class*='ramp--'] {
   font-family: $fontPrimary;
   color: $primaryDarker;
+  font-size: 16px;
 }
 
 /** Begin - Overrides for VideoJS related styling **/
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,8 @@ @@
     <head>
       <title>Ramp</title>
+      <!-- Allows for text scaling in the demo instance -->
+      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
     </head>
     <body>
@@ Expand Down @@