aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/App.js25
-rw-r--r--vnext/src/components/MessageInput.js2
-rw-r--r--vnext/src/components/Settings.js2
-rw-r--r--vnext/src/style/main.css6
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;