feat(reader-react): adds responsive font sizing

triplecanopy · Jun 10, 2022 · 22e6961 · 22e6961
1 parent 2f760f0
commit 22e6961
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 19 deletions.
diff --git a/packages/b-ber-reader-react/src/components/Frame.jsx b/packages/b-ber-reader-react/src/components/Frame.jsx
@@ -41,8 +41,6 @@ class Frame extends React.Component {
   }
 
   style() {
-    const { fontSize } = this.props.viewerSettings
-
     let style = {
       position: 'absolute',
       top: 0,
@@ -52,30 +50,20 @@ class Frame extends React.Component {
       margin: 0,
       padding: 0,
       border: 0,
-      fontSize,
     }
 
     if (Viewport.isVerticallyScrolling(this.props)) {
       // Mobile
-      style = {
-        ...style,
-        WebkitOverflowScrolling: 'touch',
-        overflowY: 'auto',
-        overflowX: 'hidden',
-      }
+      style.WebkitOverflowScrolling = 'touch'
+      style.overflowY = 'auto'
+      style.overflowX = 'hidden'
     } else {
       // Desktop
-      style = {
-        ...style,
-        overflow: 'hidden',
-      }
+      style.overflow = 'hidden'
     }
 
     if (isPlainObject(this.props.style)) {
-      style = {
-        ...style,
-        ...this.props.style,
-      }
+      style = { ...style, ...this.props.style }
     }
 
     return style

diff --git a/packages/b-ber-reader-react/src/components/Layout.jsx b/packages/b-ber-reader-react/src/components/Layout.jsx
@@ -102,6 +102,7 @@ class Layout extends React.Component {
       paddingLeft,
       paddingRight,
       paddingBottom,
+      fontSize,
     } = this.props.viewerSettings
 
     const { margin, border, boxSizing, columnFill, transform } = this.state
@@ -121,6 +122,7 @@ class Layout extends React.Component {
       columns,
       columnFill,
       transform,
+      fontSize,
     }
   }
 

diff --git a/packages/b-ber-reader-react/src/constants/index.js b/packages/b-ber-reader-react/src/constants/index.js
@@ -55,6 +55,7 @@ export const horizontalBreakpoints = new Map([
       paddingRight: '15px',
       paddingTop: 0,
       paddingBottom: '80px', // Offset for bottom nav
+      fontSize: 'clamp(130%, 1.5vw, 160%)',
     },
   ],
   [
@@ -68,6 +69,7 @@ export const horizontalBreakpoints = new Map([
       paddingRight: 0,
       paddingTop: 0,
       paddingBottom: '80px', // Offset for bottom nav
+      fontSize: 'clamp(130%, 1.5vw, 160%)',
     },
   ],
   [
@@ -81,6 +83,7 @@ export const horizontalBreakpoints = new Map([
       paddingRight: 0,
       paddingTop: 0,
       paddingBottom: 0,
+      fontSize: '137%', // 21.92px
     },
   ],
   [
@@ -94,6 +97,7 @@ export const horizontalBreakpoints = new Map([
       paddingRight: 0,
       paddingTop: 0,
       paddingBottom: 0,
+      fontSize: '137%', // 21.92px
     },
   ],
   [
@@ -107,6 +111,7 @@ export const horizontalBreakpoints = new Map([
       paddingRight: 0,
       paddingTop: 0,
       paddingBottom: 0,
+      fontSize: '155%', // 24.8px
     },
   ],
   [
@@ -120,6 +125,7 @@ export const horizontalBreakpoints = new Map([
       paddingRight: 0,
       paddingTop: 0,
       paddingBottom: 0,
+      fontSize: '195%', // 31.2px
     },
   ],
 ])
diff --git a/packages/b-ber-reader-react/src/helpers/Viewport.js b/packages/b-ber-reader-react/src/helpers/Viewport.js
@@ -107,6 +107,7 @@ class Viewport {
       paddingRight,
       paddingTop,
       paddingBottom,
+      fontSize,
     } = css
 
     const horizontalPadding = Viewport.getHorizontalSpacing(maxWidth)
@@ -118,6 +119,7 @@ class Viewport {
       paddingTop: verticalPadding + parseInt(paddingTop, 10),
       paddingBottom: verticalPadding + parseInt(paddingBottom, 10),
       columnGap: parseInt(columnGap, 10),
+      fontSize,
       columns,
     }
 

diff --git a/packages/b-ber-reader-react/src/models/ViewerSettings.js b/packages/b-ber-reader-react/src/models/ViewerSettings.js
@@ -35,14 +35,14 @@ class ViewerSettings {
 
     width: 0,
     height: 0,
-    fontSize: '120%', // TODO not working, unused
 
     // Theme settings, transition speed in ms
     theme: themes.DEFAULT,
     transition: transitions.SLIDE,
     transitionSpeed: 400,
     columns: 2,
 
+    fontSize: () => Viewport.styles().fontSize,
     columnGap: () => Viewport.styles().columnGap,
     paddingLeft: () => Viewport.styles().paddingLeft,
     paddingRight: () => Viewport.styles().paddingRight,
@@ -171,7 +171,7 @@ class ViewerSettings {
   }
 
   get fontSize() {
-    return this.settings.fontSize
+    return valueOf(this.settings.fontSize)
   }
 
   set fontSize(val) {