fix: adjust vertical padding for scrolling layouts

triplecanopy · Sep 13, 2022 · ff2a158 · ff2a158
1 parent 75bc577
commit ff2a158
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/packages/b-ber-reader-react/src/components/Layout.jsx b/packages/b-ber-reader-react/src/components/Layout.jsx
@@ -12,7 +12,11 @@ import browser from '../lib/browser'
 import withObservers from '../lib/with-observers'
 import withDimensions from '../lib/with-dimensions'
 import ReaderContext from '../lib/reader-context'
-import { RESIZE_DEBOUNCE_TIMER, layouts } from '../constants'
+import {
+  RESIZE_DEBOUNCE_TIMER,
+  breakpoints,
+  MEDIA_QUERY_MOBILE,
+} from '../constants'
 
 function Leaves({ layout, leafLeftStyles, leafRightStyles }) {
   return Viewport.isVerticallyScrolling({ layout }) ? null : (
@@ -106,16 +110,30 @@ class Layout extends React.Component {
     } = this.props.viewerSettings
 
     const { margin, border, boxSizing, columnFill, transform } = this.state
+    const { layout } = this.props
+
+    // Override padding top/bottom if the project has been configured
+    // to scroll vertically, since the padding from the media queries
+    // is no longer appropriate
+    let nextPaddingTop = paddingTop
+    let nextPaddingBottom = paddingBottom
+
+    if (Viewport.isVerticalScrollConfigured(layout)) {
+      // Get padding from mobile entry in breakpoint map
+      const breakpoint = breakpoints.get(MEDIA_QUERY_MOBILE)
+
+      nextPaddingTop = breakpoint.paddingTop
+      nextPaddingBottom = breakpoint.paddingBottom
+    }
 
     return {
       width,
       height,
       columnGap,
-      paddingTop,
+      paddingTop: nextPaddingTop,
       paddingLeft,
       paddingRight,
-      paddingBottom,
-
+      paddingBottom: nextPaddingBottom,
       margin,
       border,
       boxSizing,

diff --git a/packages/b-ber-reader-react/src/constants/index.js b/packages/b-ber-reader-react/src/constants/index.js
@@ -48,10 +48,10 @@ export const MEDIA_QUERY_SLIDING   = 'only screen and (min-width: 1140px) and (m
 
 /**
  *
- * Horizontal Spacing
+ * Breakpoints
  *
  */
-export const horizontalBreakpoints = new Map([
+export const breakpoints = new Map([
   [
     MEDIA_QUERY_MOBILE,
     {

diff --git a/packages/b-ber-reader-react/src/helpers/Viewport.js b/packages/b-ber-reader-react/src/helpers/Viewport.js
@@ -1,6 +1,6 @@
 import {
   layouts,
-  horizontalBreakpoints,
+  breakpoints,
   MEDIA_QUERY_DESKTOP_MD,
   MEDIA_QUERY_MIN_SCROLLING_ASPECT_RATIO,
   MEDIA_QUERY_MOBILE,
@@ -30,8 +30,10 @@ class Viewport {
     )
   }
 
+  static isVerticalScrollConfigured = layout => layout === layouts.SCROLL
+
   static isVerticallyScrolling = ({ layout }) =>
-    Viewport.isSingleColumn() || layout === layouts.SCROLL
+    Viewport.isSingleColumn() || Viewport.isVerticalScrollConfigured(layout)
 
   static isTouch = () =>
     'ontouchstart' in window /* iOS and Android */ ||
@@ -93,10 +95,10 @@ class Viewport {
   // Returns CSS to be applied to use to calculate various frame dimensions
   static getCss = () => {
     let mediaQuery = MEDIA_QUERY_DESKTOP_MD
-    let css = horizontalBreakpoints.get(mediaQuery)
+    let css = breakpoints.get(mediaQuery)
 
     // eslint-disable-next-line no-unused-vars
-    for (const [query, styles] of horizontalBreakpoints) {
+    for (const [query, styles] of breakpoints) {
       if (window.matchMedia(query).matches) {
         css = { ...styles }
         mediaQuery = query