diff options
| -rw-r--r-- | src/views/LandscapeWarning.js | 21 |
1 files changed, 14 insertions, 7 deletions
diff --git a/src/views/LandscapeWarning.js b/src/views/LandscapeWarning.js index 1c8e61c..9031eb9 100644 --- a/src/views/LandscapeWarning.js +++ b/src/views/LandscapeWarning.js @@ -4,7 +4,7 @@ import React, { Component } from "react"; -import { isMobile, isiPhone } from "../utils/index.js"; +import { isMobile, isiPhone, isDesktop } from "../utils/index.js"; const PhoneIcon = ( <svg @@ -30,17 +30,15 @@ export default class LandscapeWarning extends Component { constructor(props) { super(props); this.state = { - landscape: !isMobile || window.innerWidth > window.innerHeight, + landscape: window.innerWidth > window.innerHeight, }; this.handleResize = this.handleResize.bind(this); - if (isMobile) { - window.addEventListener("resize", this.handleResize); - setTimeout(this.handleResize, 100); - } + window.addEventListener("resize", this.handleResize); + setTimeout(this.handleResize, 100); } handleResize() { - const landscape = !isMobile || window.innerWidth > window.innerHeight; + const landscape = window.innerWidth > window.innerHeight; if (landscape !== this.state.landscape) { this.setState({ landscape }); } @@ -49,6 +47,15 @@ export default class LandscapeWarning extends Component { render() { const { landscape } = this.state; if (landscape) return null; + if (isDesktop) { + return ( + <div className="landscape-warning"> + <div className="landscape-message"> + {"← Please make your window wider →"} + </div> + </div> + ); + } return ( <div className="landscape-warning"> {RotateIcon} |