schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix isWidthDown

Browse Source
This commit is contained in:
fbruc03 2023-01-02 12:21:18 +01:00
parent c463237bd7
commit bf9fe05845
7 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -15,8 +15,6 @@
"@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.19", "@fortawesome/react-fontawesome": "^0.1.19",
"@material-ui/core": "^4.12.4",
"@material-ui/lab": "^4.0.0-alpha.61",
"@monaco-editor/react": "^4.3.1", "@monaco-editor/react": "^4.3.1",
"@mui/lab": "^5.0.0-alpha.110", "@mui/lab": "^5.0.0-alpha.110",
"@mui/material": "^5.10.16", "@mui/material": "^5.10.16",

2
src/components/Tutorial/Assessment.js
View File

@ -21,7 +21,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import withStyles from '@mui/styles/withStyles'; import withStyles from '@mui/styles/withStyles';
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import remarkGemoji from "remark-gemoji"; import remarkGemoji from "remark-gemoji";
import { isWidthDown } from "@material-ui/core"; import { isWidthDown } from "../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth

2
src/components/Tutorial/Builder/Hardware.js
View File

@ -16,7 +16,7 @@ import ImageListItemBar from "@mui/material/ImageListItemBar";
import FormHelperText from "@mui/material/FormHelperText"; import FormHelperText from "@mui/material/FormHelperText";
import FormLabel from "@mui/material/FormLabel"; import FormLabel from "@mui/material/FormLabel";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import { isWidthDown } from "@material-ui/core"; import { isWidthDown } from "../../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />; const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;

8
src/components/Tutorial/Hardware.js
View File

@ -15,7 +15,7 @@ import ImageListItemBar from "@mui/material/ImageListItemBar";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExpandAlt } from "@fortawesome/free-solid-svg-icons"; import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
import * as Blockly from "blockly"; import * as Blockly from "blockly";
import { isWidthDown } from "@material-ui/core"; import { isWidthDown } from "../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />; const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
@ -55,9 +55,9 @@ class Hardware extends Component {
}; };
render() { render() {
var cols = isWidthDown("md", this.props.width) var cols = isWidthDown("md", window.innerWidth)
? isWidthDown("sm", this.props.width) ? isWidthDown("sm", window.innerWidth)
? isWidthDown("xs", this.props.width) ? isWidthDown("xs", window.innerWidth)
? 2 ? 2
: 3 : 3
: 4 : 4

2
src/components/Workspace/WorkspaceName.js
View File

@ -16,7 +16,7 @@ import Typography from "@mui/material/Typography";
import { faPen } from "@fortawesome/free-solid-svg-icons"; import { faPen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Blockly from "blockly/core"; import * as Blockly from "blockly/core";
import { isWidthDown } from "@material-ui/core"; import { isWidthDown } from "../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />; const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;

2
src/components/Workspace/WorkspaceStats.js
View File

@ -20,7 +20,7 @@ import {
faEllipsisH, faEllipsisH,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { isWidthDown } from "@material-ui/core"; import { isWidthDown } from "../../helpers/handleBreakpoints";
// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />; const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;

16
src/helpers/handleBreakpoints.js Normal file
View File

@ -0,0 +1,16 @@
export const isWidthDown = (breakpoint, screenWidth) => {
switch (breakpoint) {
case "xs":
return screenWidth < 600;
case "sm":
return screenWidth < 900;
case "md":
return screenWidth < 1200;
case "lg":
return screenWidth < 1536;
case "xl":
return screenWidth >= 1920;
default:
throw new Error("Invalid breakpoint");
}
}