From 0a741b1083cd7d1eaa482cab9284e421e03c061d Mon Sep 17 00:00:00 2001
From: Moran T <morant@brainpop.com>
Date: Tue, 27 Feb 2018 15:11:52 +0200
Subject: [PATCH] Adding constraint on min height for large stage
Should help with smaller screen sizes, where the ratio is different (like some chromebooks)
---
src/components/gui/gui.jsx | 25 +++++++++++++---------
src/components/sprite-info/sprite-info.jsx | 15 ++++++++++---
src/lib/layout-constants.js | 1 +
3 files changed, 28 insertions(+), 13 deletions(-)
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 5c7a378dc..c2d025dd7 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -144,16 +144,21 @@ const GUIComponent = props => {
</Box>
<Box className={styles.stageWrapper}>
{/* eslint-disable arrow-body-style */}
- <MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => {
- return isRendererSupported ? (
- <Stage
- height={isFullSize ? layout.fullStageHeight : layout.smallerStageHeight}
- shrink={0}
- vm={vm}
- width={isFullSize ? layout.fullStageWidth : layout.smallerStageWidth}
- />
- ) : null;
- }}</MediaQuery>
+ <MediaQuery
+ minHeight={layout.fullSizeMinHeight}
+ minWidth={layout.fullSizeMinWidth}
+ >
+ {isFullSize => {
+ return isRendererSupported ? (
+ <Stage
+ height={isFullSize ? layout.fullStageHeight : layout.smallerStageHeight}
+ shrink={0}
+ vm={vm}
+ width={isFullSize ? layout.fullStageWidth : layout.smallerStageWidth}
+ />
+ ) : null;
+ }}
+ </MediaQuery>
{/* eslint-enable arrow-body-style */}
</Box>
<Box className={styles.targetWrapper}>
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index 7d0acf952..32044e59d 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -51,7 +51,10 @@ class SpriteInfo extends React.Component {
</div>
<div className={styles.group}>
- <MediaQuery minWidth={layout.fullSizeMinWidth}>
+ <MediaQuery
+ minHeight={layout.fullSizeMinHeight}
+ minWidth={layout.fullSizeMinWidth}
+ >
<div className={styles.iconWrapper}>
<img
aria-hidden="true"
@@ -74,7 +77,10 @@ class SpriteInfo extends React.Component {
</div>
<div className={styles.group}>
- <MediaQuery minWidth={layout.fullSizeMinWidth}>
+ <MediaQuery
+ minHeight={layout.fullSizeMinHeight}
+ minWidth={layout.fullSizeMinWidth}
+ >
<div className={styles.iconWrapper}>
<img
aria-hidden="true"
@@ -99,7 +105,10 @@ class SpriteInfo extends React.Component {
<div className={classNames(styles.row, styles.rowSecondary)}>
<div className={styles.group}>
- <MediaQuery minWidth={layout.fullSizeMinWidth}>
+ <MediaQuery
+ minHeight={layout.fullSizeMinHeight}
+ minWidth={layout.fullSizeMinWidth}
+ >
<Label
secondary
text="Show"
diff --git a/src/lib/layout-constants.js b/src/lib/layout-constants.js
index 67c2ae44c..9c874613f 100644
--- a/src/lib/layout-constants.js
+++ b/src/lib/layout-constants.js
@@ -4,5 +4,6 @@ export default {
smallerStageWidth: 480 * 0.85,
smallerStageHeight: 360 * 0.85,
fullSizeMinWidth: 1096,
+ fullSizeMinHeight: 821, // Adding 7% to 768.
fullSizePaintMinWidth: 1250
};
--
GitLab