feat: wip media queries

triplecanopy · Apr 13, 2022 · 1114aaf · 1114aaf
1 parent 4b4683e
commit 1114aaf
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 38 deletions.
diff --git a/packages/b-ber-reader-react/src/actions/reader-location.js b/packages/b-ber-reader-react/src/actions/reader-location.js
@@ -148,7 +148,7 @@ export const updateLocation = location => (dispatch, getState) => {
   const prevState = getState()
   const { locationState } = prevState.readerSettings
 
-  console.log('Update location', location)
+  // console.log('Update location', location)
 
   if (locationState === locationStates.QUERY_PARAMS) {
     return dispatch(updateQueryString(location))

diff --git a/packages/b-ber-reader-react/src/components/App.jsx b/packages/b-ber-reader-react/src/components/App.jsx
@@ -74,9 +74,9 @@ class App extends Component {
       console.warn('Could not load books from API', err)
     }
 
-    console.log('---- books', books)
-    console.log('---- bookURL', bookURL)
-    console.log('---- projectURL', projectURL)
+    // console.log('---- books', books)
+    // console.log('---- bookURL', bookURL)
+    // console.log('---- projectURL', projectURL)
 
     this.props.readerSettingsActions.updateSettings({
       books,

diff --git a/packages/b-ber-reader-react/src/constants/index.js b/packages/b-ber-reader-react/src/constants/index.js
@@ -25,10 +25,26 @@ export const messagesTypes = {
   SCROLL_EVENT: 'SCROLL_EVENT',
 }
 
+// Media queries from TC theme. The XL isn't currently used (except for in the
+// `LAYOUT_MAX_WIDTH`), may not be necessary
+//
+//
+// Mobile
+// $mq-xs: "only screen and (max-width: 768px)";
+// Tablet
+// $mq-sm: "only screen and (min-width: 769px) and (max-width: 1140px)";
+// Desktop 1
+// $mq-md: "only screen and (min-width: 1141px) and (max-width: 1440px)";
+// Desktop 2
+// $mq-lg: "only screen and (min-width: 1441px) and (max-width: 1920px)";
+// Desktop 3
+// $mq-xl: "only screen and (min-width: 1921px)";
+
 // Media queries horizontal in px
 export const BREAKPOINT_HORIZONTAL_SMALL = 768
-export const BREAKPOINT_HORIZONTAL_MEDIUM = 960
-export const BREAKPOINT_HORIZONTAL_LARGE = 1290
+export const BREAKPOINT_HORIZONTAL_MEDIUM = 769
+export const BREAKPOINT_HORIZONTAL_LARGE = 1141
+export const BREAKPOINT_HORIZONTAL_X_LARGE = 1441
 
 // Media queries vertical in px
 export const BREAKPOINT_VERTICAL_SMALL = 480
@@ -37,30 +53,34 @@ export const BREAKPOINT_VERTICAL_LARGE = 860
 
 // Max horizontal and vertical dimensions
 export const LAYOUT_MAX_HEIGHT = 480
-export const LAYOUT_MAX_WIDTH = 1440
+export const LAYOUT_MAX_WIDTH = 1921
 
 // Columns
 export const DESKTOP_COLUMN_COUNT = 16
 export const MOBILE_COLUMN_COUNT = 9
 
+// Number of breakpoints
+export const HORIZONTAL_BREAKPOINT_COUNT = 4
+export const VERTICAL_BREAKPOINT_COUNT = 3
+
 // The padding for each of the combinations of the horizontal and vertical
 // values is set by declaring the top, right, bottom, and left values in each
 // of the boxes in the grid below:
 //
-//        Sm. X     Med. X   Lg. X
-//      |---------|--------|--------|
-//      |         |        |        |
-//      |    1    |   2    |   3    | Sm. Y
-//      |         |        |        |
-//      |---------|--------|--------|
-//      |         |        |        |
-//      |    4    |   5    |   6    | Md. Y
-//      |         |        |        |
-//      |---------|--------|--------|
-//      |         |        |        |
-//      |    7    |   8    |   9    | Lg. Y
-//      |         |        |        |
-//      |---------|--------|--------|
+//        Sm. X     Med. X   Lg. X    Xl. X
+//      |---------|--------|--------|--------|
+//      |         |        |        |        |
+//      |    1    |   2    |   3    |   4    | Sm. Y
+//      |         |        |        |        |
+//      |---------|--------|--------|--------|
+//      |         |        |        |        |
+//      |    5    |   6    |   7    |   8    | Md. Y
+//      |         |        |        |        |
+//      |---------|--------|--------|--------|
+//      |         |        |        |        |
+//      |    9    |   10   |   11   |   12   | Lg. Y
+//      |         |        |        |        |
+//      |---------|--------|--------|--------|
 //
 
 // Where box 1 represents the smallest of both horizontal and vertical media
@@ -100,15 +120,16 @@ export const MOBILE_COLUMN_COUNT = 9
 
 // prettier-ignore
 export const VIEWPORT_DIMENSIONS_MATRIX = [
-  ['60px', '30px', '60px', '30px'], [18, 'auto', 15, 'auto'], [22, 'auto', 18, 'auto'], // => box 1: sm x sm | box 2: md x sm | box 3: lg x sm
-  ['60px', '30px', '60px', '30px'], [12, 'auto', 8, 'auto'],  [12, 'auto', 9, 'auto'],  // => box 4: sm x md | box 5: md x md | box 6: lg x md
-  ['60px', '30px', '60px', '30px'], [11, 'auto', 8, 'auto'],  [11, 'auto', 8, 'auto'],  // => box 7: sm x lg | box 8: md x lg | box 9: lg x lg
+  ['60px', '30px', '60px', '30px'], [18, 'auto', 15, 'auto'], [22, 'auto', 18, 'auto'], [22, 'auto', 18, 'auto'], // => sm x sm | md x sm | lg x sm | xl x sm
+  ['60px', '30px', '60px', '30px'], [12, 'auto', 8, 'auto'],  [12, 'auto', 9, 'auto'],  [12, 'auto', 9, 'auto'],  // => sm x md | md x md | lg x md | xl x md
+  ['60px', '30px', '60px', '30px'], [11, 'auto', 8, 'auto'],  [11, 'auto', 8, 'auto'],  [11, 'auto', 8, 'auto']   // => sm x lg | md x lg | lg x lg | xl x lg
 ]
 
 // Used in DocumentPreProcessor for appended stylesheets
+// prettier-ignore
 export const MEDIA_QUERY_SMALL = `only screen and (min-width: ${BREAKPOINT_HORIZONTAL_SMALL}px)`
-export const MEDIA_QUERY_LARGE = `only screen and (max-width: ${BREAKPOINT_HORIZONTAL_SMALL +
-  1}px)`
+// prettier-ignore
+export const MEDIA_QUERY_LARGE = `only screen and (max-width: ${BREAKPOINT_HORIZONTAL_SMALL +  1}px)`
 
 export const MEDIA_PLAYBACK_RATES = {
   SLOW: 0.5,

diff --git a/packages/b-ber-reader-react/src/helpers/Viewport.js b/packages/b-ber-reader-react/src/helpers/Viewport.js
@@ -2,14 +2,18 @@ import head from 'lodash/head'
 
 import {
   BREAKPOINT_HORIZONTAL_SMALL,
+  BREAKPOINT_HORIZONTAL_MEDIUM,
   BREAKPOINT_HORIZONTAL_LARGE,
+  BREAKPOINT_HORIZONTAL_X_LARGE,
   BREAKPOINT_VERTICAL_SMALL,
   BREAKPOINT_VERTICAL_LARGE,
   LAYOUT_MAX_HEIGHT,
   LAYOUT_MAX_WIDTH,
   VIEWPORT_DIMENSIONS_MATRIX,
   DESKTOP_COLUMN_COUNT,
   MOBILE_COLUMN_COUNT,
+  HORIZONTAL_BREAKPOINT_COUNT,
+  VERTICAL_BREAKPOINT_COUNT,
 } from '../constants'
 
 import { isNumeric } from './Types'
@@ -20,11 +24,15 @@ class Viewport {
     window.innerWidth <= BREAKPOINT_HORIZONTAL_SMALL
 
   static horizontalMedium = () =>
-    window.innerWidth > BREAKPOINT_HORIZONTAL_SMALL &&
+    window.innerWidth >= BREAKPOINT_HORIZONTAL_MEDIUM &&
     window.innerWidth < BREAKPOINT_HORIZONTAL_LARGE
 
   static horizontalLarge = () =>
-    window.innerWidth >= BREAKPOINT_HORIZONTAL_LARGE
+    window.innerWidth >= BREAKPOINT_HORIZONTAL_LARGE &&
+    window.innerWidth < BREAKPOINT_HORIZONTAL_X_LARGE
+
+  static horizontalXLarge = () =>
+    window.innerWidth >= BREAKPOINT_HORIZONTAL_X_LARGE
 
   // used to get position Y in matrix
   static verticalSmall = () => window.innerHeight <= BREAKPOINT_VERTICAL_SMALL
@@ -44,9 +52,22 @@ class Viewport {
     'ontouchstart' in document.documentElement
 
   static getBreakpointX = () => {
-    if (Viewport.horizontalSmall()) return 0
-    if (Viewport.horizontalMedium()) return 1
-    if (Viewport.horizontalLarge()) return 2
+    if (Viewport.horizontalSmall()) {
+      console.log('Viewport.horizontalSmall')
+      return 0
+    }
+    if (Viewport.horizontalMedium()) {
+      console.log('Viewport.horizontalMedium')
+      return 1
+    }
+    if (Viewport.horizontalLarge()) {
+      console.log('Viewport.horizontalLarge')
+      return 2
+    }
+    if (Viewport.horizontalXLarge()) {
+      console.log('Viewport.horizontalXLarge')
+      return 3
+    }
   }
 
   static getBreakpointY = () => {
@@ -118,6 +139,7 @@ class Viewport {
     top: isNumeric(top)
       ? window.innerHeight * (top / 100)
       : Viewport.getVerticalValueFromString(top),
+
     bottom: isNumeric(bottom)
       ? window.innerHeight * (bottom / 100)
       : Viewport.getVerticalValueFromString(bottom),
@@ -127,19 +149,30 @@ class Viewport {
     left: isNumeric(left)
       ? window.innerWidth * (left / 100)
       : Viewport.getHorizontalValueFromString(left),
+
     right: isNumeric(right)
       ? window.innerWidth * (right / 100)
       : Viewport.getHorizontalValueFromString(right),
   })
 
+  static filterDimensionsX = x => (_, i) =>
+    (i % HORIZONTAL_BREAKPOINT_COUNT) - x === 0
+
+  static filterDimensionsY = y => (_, i) =>
+    (i % VERTICAL_BREAKPOINT_COUNT) - y === 0
+
+  // prettier-ignore
   static getDimensions = ([x, y]) =>
     head(
-      VIEWPORT_DIMENSIONS_MATRIX.filter((_, i) => (i % 3) - x === 0)
-        .filter((_, i) => (i % 3) - y === 0)
-        .map(([top, right, bottom, left]) => ({
-          ...Viewport.getVerticalSpacing(top, bottom),
-          ...Viewport.getHorizontalSpacing(left, right),
-        }))
+      VIEWPORT_DIMENSIONS_MATRIX
+        .filter(Viewport.filterDimensionsX(x))
+        .filter(Viewport.filterDimensionsY(y))
+        .map(
+          ([top, right, bottom, left]) => ({
+            ...Viewport.getVerticalSpacing(top, bottom),
+            ...Viewport.getHorizontalSpacing(left, right),
+          })
+        )
     )
 
   static getDimensionsFromMatrix = () =>

diff --git a/packages/b-ber-reader-react/src/helpers/XMLAdaptor.js b/packages/b-ber-reader-react/src/helpers/XMLAdaptor.js
@@ -354,7 +354,7 @@ class XMLAdaptor {
           const cache = Cache.get(url)
 
           if (useLocalStorageCache && cache?.data) {
-            console.log('Loads CSS from cache %s', url)
+            // console.log('Loads CSS from cache %s', url)
 
             rs({ base, data: cache.data })
             return