ScCN/scratch-gui
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor to use only MediaQuery component

Browse Source
This commit is contained in:
Paul Kaplan committed 2017-08-10 13:31:48 -04:00
1 parent 39a81d744e
commit 40e3a86fe6
4 files changed
+47 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/gui/gui.jsx
+22 -33
View File
@@ -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>
src/components/sprite-info/sprite-info.css
-6
View File
@@ -79,9 +79,3 @@
user-select: none;
outline: none;
}
@media only screen and (max-width: 1096px) {
.non-essential {
display: none;
}
}
src/components/sprite-info/sprite-info.jsx
+18 -12
View File
@@ -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
src/lib/layout-constants.js
+7
View File
@@ -0,0 +1,7 @@
export default {
fullStageWidth: 480,
fullStageHeight: 360,
smallerStageWidth: 480 * 0.85,
smallerStageHeight: 360 * 0.85,
fullSizeMinWidth: 1096
};