diff options
| -rw-r--r-- | vnext/src/App.js | 25 | ||||
| -rw-r--r-- | vnext/src/components/MessageInput.js | 2 | ||||
| -rw-r--r-- | vnext/src/components/Settings.js | 2 | ||||
| -rw-r--r-- | vnext/src/style/main.css | 6 |
4 files changed, 19 insertions, 16 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 835d3b9f..af364fe2 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -91,13 +91,16 @@ export default class App extends React.Component { history.push(location); } toggleSidebar = () => { - let width = this.sidebar.current.style.width; - this.sidebar.current.style.width = width === '248px' ? '0' : '248px'; - let leftMargin = this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit'; - this.setState({ - appMarginLeft: leftMargin - }); - app.style.marginLeft = leftMargin; + const isMobile = window.matchMedia('width < 62.5rem'); + if (isMobile.matches) { + let width = this.sidebar.current.style.width; + this.sidebar.current.style.width = width === '248px' ? '0' : '248px'; + let leftMargin = this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit'; + this.setState({ + appMarginLeft: leftMargin + }); + app.style.marginLeft = leftMargin; + } } render() { const user = this.state.visitor; @@ -171,19 +174,19 @@ export default class App extends React.Component { user.uid > 0 && <aside id="sidebar" ref={this.sidebar}> <Avatar user={user} /> - <Link to="/?show=my"> + <Link to="/?show=my" onClick={this.toggleSidebar}> <Icon name="ei-clock" size="s" /> <span className="desktop">My feed</span> </Link> - <Link to="/pm"> + <Link to="/pm" onClick={this.toggleSidebar}> <Icon name="ei-envelope" size="s" /> <span className="desktop">Messages</span> </Link> - <Link to="/?show=discuss"> + <Link to="/?show=discuss" onClick={this.toggleSidebar}> <Icon name="ei-bell" size="s" /> <span className="desktop">Discussions</span> </Link> - <Link to="/settings" rel="nofollow"> + <Link to="/settings" rel="nofollow" onClick={this.toggleSidebar}> <Icon name="ei-gear" size="s" /> <span className="desktop">Settings</span> </Link> diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js index 66e6ca02..5766f2ac 100644 --- a/vnext/src/components/MessageInput.js +++ b/vnext/src/components/MessageInput.js @@ -49,7 +49,7 @@ export default class MessageInput extends React.Component { } componentDidMount() { - const isMobile = window.matchMedia('only screen and (max-width: 850px)'); + const isMobile = window.matchMedia('only screen and (width <62.5rem)'); if (!isMobile.matches) { this.textarea.current.focus(); } diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js index 9c15f562..ea632073 100644 --- a/vnext/src/components/Settings.js +++ b/vnext/src/components/Settings.js @@ -143,7 +143,7 @@ export default class Settings extends React.Component { <p> { me.jids.map(jid => - <React.Fragment key="jid"> + <React.Fragment key={jid}> <label><input type="radio" name="delete" value={jid} />{jid}</label><br /> </React.Fragment> ) diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 187173b0..b35b2e2d 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -81,14 +81,14 @@ hr { grid-template-areas: "header" "content" "footer"; grid-template-columns: 1fr; grid-template-rows: min-content minmax(1fr, min-content) min-content; - transition: margin-left 0.4s; + transition: margin-left 0.2s; } #header { grid-area: header; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.28); - transition: transform 0.4s; + transition: transform 0.2s; overflow-x: hidden; } .header--hidden { @@ -105,7 +105,7 @@ hr { #sidebar { color: #222; - transition: width 0.4s; + transition: width 0.2s; position: fixed; width: 0; top: 0; |