Added ScreenSize AppExtras with screen store

This is needed for saving the width & height of the screen on resize

src/AppExtras/ScreenSize/ScreenSize.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable no-extend-native */
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { setScreen } from '@eeacms/volto-block-style/actions';
+
+const pixelToNumber = (pixel) => {
+  return parseInt(pixel.replace('px', ''));
+};
+
+Number.prototype.toPixel = function toPixel() {
+  return `${this}px`;
+};
+
+const ScreenSize = (props) => {
+  const updateScreen = () => {
+    const screenHeight =
+      window.innerHeight ||
+      document.documentElement.clientHeight ||
+      document.body.clientHeight ||
+      0;
+    const screenWidth =
+      window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth ||
+      0;
+    const headerWrapper = document.querySelector(
+      '.header-wrapper:not(.mobile)',
+    );
+    const contentArea = document.querySelector('.ui.segment.content-area');
+    const toolbar = document.querySelector('#toolbar .toolbar.expanded');
+    const firstHeading = document.querySelector('.documentFirstHeading');
+    const headerWrapperStyle = headerWrapper
+      ? window.getComputedStyle(headerWrapper)
+      : {};
+    const contentAreaStyle =
+      contentArea && !firstHeading
+        ? window.getComputedStyle(contentArea)
+        : { marginTop: '0px', paddingTop: '0px' };
+
+    const offsetHeight =
+      (headerWrapperStyle.display !== 'none'
+        ? headerWrapper?.offsetHeight || 0
+        : 0) +
+      (pixelToNumber(contentAreaStyle.marginTop) +
+        pixelToNumber(contentAreaStyle.paddingTop) || 0) +
+      ((toolbar?.offsetHeight || 0) < screenHeight
+        ? toolbar?.offsetHeight || 0
+        : 0);
+    const newScreen = {
+      screenHeight,
+      screenWidth,
+      offsetHeight,
+    };
+
+    props.setScreen({ ...props.screen, ...newScreen });
+  };
+
+  React.useEffect(() => {
+    if (__CLIENT__) {
+      updateScreen();
+      window.addEventListener('resize', updateScreen);
+    }
+    return () => {
+      if (__CLIENT__) {
+        window.removeEventListener('resize', updateScreen);
+      }
+    };
+    /* eslint-disable-next-line */
+  }, []);
+
+  return '';
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      screen: state.screen,
+    }),
+    { setScreen },
+  ),
+)(ScreenSize);

src/AppExtras/ScreenSize/index.js

@@ -0,0 +1,3 @@
+import ScreenSize from './ScreenSize';
+
+export default ScreenSize;

src/AppExtras/index.js

@@ -0,0 +1,13 @@
+import ScreenSize from './ScreenSize';
+
+export default (config) => {
+  config.settings.appExtras = [
+    ...(config.settings.appExtras || []),
+    {
+      match: '/**',
+      component: ScreenSize,
+    },
+  ];
+
+  return config;
+};

src/StyleWrapper/StyleWrapperView.jsx

@@ -1,18 +1,22 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
-import {
-  withCachedImages,
-  withScreenHeight,
-} from '@eeacms/volto-block-style/hocs';
+import { withCachedImages } from '@eeacms/volto-block-style/hocs';
 
 export function getInlineStyles(data, props = {}) {
   return {
     ...(data.backgroundColor ? { backgroundColor: data.backgroundColor } : {}),
     ...(data.textColor ? { color: data.textColor } : {}),
     ...(data.textAlign ? { textAlign: data.textAlign } : {}),
     ...(data.fontSize ? { fontSize: data.fontSize } : {}),
-    ...(data.isScreenHeight ? { minHeight: props.screenHeight } : {}),
+    ...(data.isScreenHeight && props.screen.screenHeight
+      ? {
+          minHeight: (
+            props.screen.screenHeight - props.screen.offsetHeight
+          ).toPixel(),
+        }
+      : {}),
     // fill in more
   };
 }
@@ -39,6 +43,7 @@ const StyleWrapperView = (props) => {
   const style = getStyle(style_name);
   const inlineStyles = getInlineStyles(styleData, props);
   const styled =
+    props.styled ||
     Object.keys(inlineStyles).length > 0 ||
     backgroundImage ||
     style ||
@@ -108,7 +113,9 @@ const StyleWrapperView = (props) => {
   );
 };
 
-export default withScreenHeight(
+export default connect((state, props) => ({
+  screen: state.screen,
+}))(
   withCachedImages(StyleWrapperView, {
     getImage: (props) => props.styleData.backgroundImage || null,
   }),

src/actions/index.js

@@ -0,0 +1 @@
+export * from './screen';

src/actions/screen.js

@@ -0,0 +1,6 @@
+export const setScreen = (screen = {}) => {
+  return {
+    type: 'SET_SCREEN',
+    screen,
+  };
+};

src/hocs/index.js

@@ -1,4 +1,3 @@
 import withCachedImages from './withCachedImages';
-import withScreenHeight from './withScreenHeight';
 
-export { withCachedImages, withScreenHeight };
+export { withCachedImages };

src/index.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import installAppExtras from './AppExtras';
+import installReducers from './reducers';
 import {
   BlockStyleWrapperEdit,
   BlockStyleWrapperView,
@@ -57,7 +59,10 @@ const applyConfig = (config) => {
     config.settings.layoutOnlyBlockStyles = false;
   }
 
-  return config;
+  return [installAppExtras, installReducers].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
 };
 
 export default applyConfig;

src/reducers/index.js

@@ -0,0 +1,7 @@
+import screen from './screen';
+
+export default (config) => {
+  config.addonReducers = { ...(config.addonReducers || {}), screen };
+
+  return config;
+};

src/reducers/screen.js

@@ -0,0 +1,14 @@
+const initialState = {};
+
+export default function screen(state = initialState, action = {}) {
+  switch (action.type) {
+    case 'SET_SCREEN':
+      return {
+        ...state,
+        ...action.screen,
+      };
+
+    default:
+      return state;
+  }
+}

src/styles.less

@@ -86,7 +86,7 @@
   img.bg {
     /* Set up positioning */
     position: absolute;
-    z-index: -1;
+    z-index: 0;
     top: 0;
     left: 0;
     /* Set up proportionate scaling */