From 40e3a86fe60309e2ebbb5ebe2cbcf486002bd93b Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 10 Aug 2017 13:31:48 -0400
Subject: [PATCH] Refactor to use only MediaQuery component
---
src/components/gui/gui.jsx | 55 +++++++++-------------
src/components/sprite-info/sprite-info.css | 6 ---
src/components/sprite-info/sprite-info.jsx | 30 +++++++-----
src/lib/layout-constants.js | 7 +++
4 files changed, 47 insertions(+), 51 deletions(-)
create mode 100644 src/lib/layout-constants.js
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 839cc603c..1e7fe027e 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -17,16 +17,9 @@ import StopAll from '../../containers/stop-all.jsx';
import Box from '../box/box.jsx';
import MenuBar from '../menu-bar/menu-bar.jsx';
+import layout from '../../lib/layout-constants.js';
import styles from './gui.css';
-const layout = {
- fullStageWidth: 480,
- fullStageHeight: 360,
- smallerStageWidth: 480 * 0.85,
- smallerStageHeight: 360 * 0.85,
- fullSizeMinWidth: 1096
-};
-
const GUIComponent = props => {
const {
basePath,
@@ -95,31 +88,27 @@ const GUIComponent = props => {
</Tabs>
</Box>
- <MediaQuery minWidth={layout.fullSizeMinWidth}>
- {isFullSize => (
- <Box className={styles.stageAndTargetWrapper}>
- <Box className={styles.stageMenuWrapper}>
- <GreenFlag vm={vm} />
- <StopAll vm={vm} />
- </Box>
-
- <Box className={styles.stageWrapper}>
- <Stage
- height={isFullSize ? layout.fullStageHeight : layout.smallerStageHeight}
- shrink={0}
- vm={vm}
- width={isFullSize ? layout.fullStageWidth : layout.smallerStageWidth}
- />
- </Box>
-
- <Box className={styles.targetWrapper}>
- <TargetPane
- vm={vm}
- />
- </Box>
- </Box>
- )}
- </MediaQuery>
+ <Box className={styles.stageAndTargetWrapper}>
+ <Box className={styles.stageMenuWrapper}>
+ <GreenFlag vm={vm} />
+ <StopAll vm={vm} />
+ </Box>
+ <Box className={styles.stageWrapper}>
+ <MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => (
+ <Stage
+ height={isFullSize ? layout.fullStageHeight : layout.smallerStageHeight}
+ shrink={0}
+ vm={vm}
+ width={isFullSize ? layout.fullStageWidth : layout.smallerStageWidth}
+ />
+ )}</MediaQuery>
+ </Box>
+ <Box className={styles.targetWrapper}>
+ <TargetPane
+ vm={vm}
+ />
+ </Box>
+ </Box>
</Box>
</Box>
</Box>
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index 5e681d66d..e6a758d1c 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -79,9 +79,3 @@
user-select: none;
outline: none;
}
-
-@media only screen and (max-width: 1096px) {
- .non-essential {
- display: none;
- }
-}
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index b1006f0d6..8b3f212d9 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -1,12 +1,14 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
+import MediaQuery from 'react-responsive';
import Box from '../box/box.jsx';
import Label from '../forms/label.jsx';
import Input from '../forms/input.jsx';
import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
+import layout from '../../lib/layout-constants.js';
import styles from './sprite-info.css';
import xIcon from './icon--x.svg';
@@ -49,12 +51,14 @@ class SpriteInfo extends React.Component {
</div>
<div className={styles.group}>
- <div className={classNames(styles.iconWrapper, styles.nonEssential)}>
- <img
- className={classNames(styles.xIcon, styles.icon)}
- src={xIcon}
- />
- </div>
+ <MediaQuery minWidth={layout.fullSizeMinWidth}>
+ <div className={styles.iconWrapper}>
+ <img
+ className={classNames(styles.xIcon, styles.icon)}
+ src={xIcon}
+ />
+ </div>
+ </MediaQuery>
<Label text="x">
<BufferedInput
small
@@ -69,12 +73,14 @@ class SpriteInfo extends React.Component {
</div>
<div className={styles.group}>
- <div className={classNames(styles.iconWrapper, styles.nonEssential)}>
- <img
- className={classNames(styles.yIcon, styles.icon)}
- src={yIcon}
- />
- </div>
+ <MediaQuery minWidth={layout.fullSizeMinWidth}>
+ <div className={styles.iconWrapper}>
+ <img
+ className={classNames(styles.yIcon, styles.icon)}
+ src={yIcon}
+ />
+ </div>
+ </MediaQuery>
<Label text="y">
<BufferedInput
small
diff --git a/src/lib/layout-constants.js b/src/lib/layout-constants.js
new file mode 100644
index 000000000..672c8013f
--- /dev/null
+++ b/src/lib/layout-constants.js
@@ -0,0 +1,7 @@
+export default {
+ fullStageWidth: 480,
+ fullStageHeight: 360,
+ smallerStageWidth: 480 * 0.85,
+ smallerStageHeight: 360 * 0.85,
+ fullSizeMinWidth: 1096
+};
--
GitLab