Off-canvas tablist

client/src/css/style.css

@@ -39,6 +39,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 	background: #222;
 	color: #FFF;
 	font-family: Montserrat, sans-serif;
+	transition: transform .2s;
 }
 
 .tab-container {
@@ -114,17 +115,31 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 	background: #1D1D1D;
 }
 
+.main-container {
+	position: fixed;
+	left: 200px;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	transition: left .2s, transform .2s;
+}
+
 .connect {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	position: fixed;
+	position: absolute;
 	top: 0;
-	left: 200px;
-	right: 0;
+	width: 100%;
 	bottom: 0;
 }
 
+.connect .navicon {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
 .connect-form h1 {
 	font: 32px Montserrat, sans-serif;
 	margin-bottom: 15px;
@@ -185,12 +200,11 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 
 .chat-title-bar {
 	font-family: Montserrat, sans-serif;
-	position: fixed;
-	left: 200px;
+	position: absolute;
+	left: 0;
 	top: 0;
 	right: 0;
 	height: 50px;
-	padding-left: 15px;
 	line-height: 50px;
 	border-bottom: 1px solid #DDD;
 	display: flex;
@@ -201,6 +215,14 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 	right: 200px;
 }
 
+.navicon {
+	display: none;
+	padding: 0 15px;
+	line-height: 50px;
+	font-size: 20px;
+	cursor: pointer;
+}
+
 .chat-title-bar i {
 	padding: 0 15px;
 	cursor: pointer;
@@ -223,6 +245,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .chat-title {
+	margin-left: 15px;
 	font-size: 24px;
 	white-space: nowrap;
 }
@@ -254,7 +277,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .userlist-bar {
-	position: fixed;
+	position: absolute;
 	top: 0;
 	right: 0;
 	width: 200px;
@@ -273,7 +296,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 
 .search {
 	display: none;
-	position: fixed;
+	position: absolute;
 	left: 200px;
 	top: 50px;
 	bottom: 50px;
@@ -302,8 +325,8 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .messagebox {
-	position: fixed;
-	left: 200px;
+	position: absolute;
+	left: 0;
 	top: 50px;
 	bottom: 50px;
 	right: 0;
@@ -341,9 +364,9 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .message-input-wrap {
-	position: fixed;
-	left: 200px;
-	bottom: 0px;
+	position: absolute;
+	left: 0;
+	bottom: 0;
 	right: 0;
 	height: 50px;
 	z-index: 1;
@@ -357,7 +380,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .userlist {
-	position: fixed;
+	position: absolute;
 	top: 50px;
 	bottom: 50px;
 	right: 0;
@@ -378,3 +401,31 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 .userlist p:hover {
 	background: #DDD;
 }
+
+@media (max-width: 600px) {
+	.tablist {
+		width: 200px;
+		transform: translateX(-200px);
+	}
+
+	.main-container {
+		transform: translateX(0);
+		left: 0;
+	}
+
+	.navicon {
+		display: inline-block;
+	}
+
+	.main-container.off-canvas {
+		transform: translateX(200px);
+	}
+
+	.tablist.off-canvas {
+		transform: translateX(0);
+	}
+
+	.chat-title {
+		margin-left: 0;
+	}
+}

client/src/js/actions/tab.js

@@ -1,7 +1,9 @@
 var Reflux = require('reflux');
 
 var tabActions = Reflux.createActions([
-	'select'
+	'select',
+	'hideMenu',
+	'toggleMenu'
 ]);
 
 module.exports = tabActions;

client/src/js/components/App.jsx

@@ -6,15 +6,24 @@ var Navigation = Router.Navigation;
 
 var TabList = require('./TabList.jsx');
 var routeActions = require('../actions/route');
+var tabActions = require('../actions/tab');
 var PureMixin = require('../mixins/pure');
 
 var App = React.createClass({
 	mixins: [
 		PureMixin,
 		Navigation,
-		Reflux.listenTo(routeActions.navigate, 'navigate')
+		Reflux.listenTo(routeActions.navigate, 'navigate'),
+		Reflux.listenTo(tabActions.hideMenu, 'hideMenu'),
+		Reflux.listenTo(tabActions.toggleMenu, 'toggleMenu')
 	],
 
+	getInitialState() {
+		return {
+			menuToggled: false
+		};
+	},
+
 	navigate(path, replace) {
 		if (!replace) {
 			this.transitionTo(path);
@@ -23,11 +32,23 @@ var App = React.createClass({
 		}
 	},
 
+	hideMenu() {
+		this.setState({ menuToggled: false });
+	},
+
+	toggleMenu() {
+		this.setState({ menuToggled: !this.state.menuToggled });
+	},
+
 	render() {
+		var mainClass = this.state.menuToggled ? 'main-container off-canvas' : 'main-container';
+
 		return (
 			<div>
-				<TabList />
-				<RouteHandler />
+				<TabList menuToggled={this.state.menuToggled} />
+				<div className={mainClass}>
+					<RouteHandler />
+				</div>
 			</div>
 		);
 	}

client/src/js/components/ChatTitle.jsx

@@ -2,6 +2,7 @@ var React = require('react');
 var Reflux = require('reflux');
 var Autolinker = require('autolinker');
 
+var Navicon = require('./Navicon.jsx');
 var channelStore = require('../stores/channel');
 var selectedTabStore = require('../stores/selectedTab');
 var serverActions = require('../actions/server');
@@ -65,6 +66,7 @@ var ChatTitle = React.createClass({
         return (
             <div>
                 <div className="chat-title-bar">
+                    <Navicon />
                     <span className="chat-title">{tab.name}</span>
                     <div className="chat-topic-wrap">
                         <span className="chat-topic" dangerouslySetInnerHTML={{ __html: topic }}></span>

client/src/js/components/Connect.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
 var _ = require('lodash');
 
+var Navicon = require('./Navicon.jsx');
 var serverActions = require('../actions/server');
 var channelActions = require('../actions/channel');
 var PureMixin = require('../mixins/pure');
@@ -59,6 +60,7 @@ var Connect = React.createClass({
 
 		return (
 			<div className="connect">
+				<Navicon />
 				<form ref="form" className="connect-form" onSubmit={this.handleSubmit}>
 					<h1>Connect</h1>
 					<input name="name" type="text" placeholder="Name" defaultValue="Freenode" />

client/src/js/components/MessageInput.jsx

@@ -5,14 +5,12 @@ var inputHistoryStore = require('../stores/inputHistory');
 var selectedTabStore = require('../stores/selectedTab');
 var messageActions = require('../actions/message');
 var inputHistoryActions = require('../actions/inputHistory');
-var tabActions = require('../actions/tab');
 var PureMixin = require('../mixins/pure');
 
 var MessageInput = React.createClass({
 	mixins: [
 		PureMixin,
-		Reflux.connect(inputHistoryStore, 'history'),
-		Reflux.listenTo(tabActions.select, 'tabSelected')
+		Reflux.connect(inputHistoryStore, 'history')
 	],
 
 	getInitialState() {
@@ -21,14 +19,6 @@ var MessageInput = React.createClass({
 		};
 	},
 
-	componentDidMount() {
-		this.refs.input.getDOMNode().focus();
-	},
-
-	tabSelected() {
-		this.refs.input.getDOMNode().focus();
-	},
-
 	handleKey(e) {
 		if (e.which === 13 && e.target.value) {
 			var tab = selectedTabStore.getState();

client/src/js/components/Navicon.jsx

@@ -0,0 +1,13 @@
+var React = require('react');
+
+var tabActions = require('../actions/tab');
+
+var Navicon = React.createClass({
+	render() {
+		return (
+			<i className="icon-menu navicon" onClick={tabActions.toggleMenu}></i>
+		);
+	}
+});
+
+module.exports = Navicon;

client/src/js/components/Settings.jsx

@@ -1,10 +1,12 @@
 var React = require('react');
 
+var Navicon = require('./Navicon.jsx');
+
 var Settings = React.createClass({
 	render() {
 		return (
 			<div>
-				<h1>Settings</h1>
+				<Navicon />
 			</div>
 		);
 	}

client/src/js/components/TabList.jsx

@@ -25,6 +25,7 @@ var TabList = React.createClass({
 	},
 
 	render() {
+		var className = this.props.menuToggled ? 'tablist off-canvas' : 'tablist';
 		var tabs = [];
 
 		this.state.channels.forEach((server, address) => {
@@ -63,7 +64,7 @@ var TabList = React.createClass({
 		});
 
 		return (
-			<div className="tablist">
+			<div className={className}>
 				<button className="button-connect" onClick={this.handleConnectClick}>Connect</button>
 				<div className="tab-container">{tabs}</div>
 				<div className="side-buttons">

client/src/js/stores/selectedTab.js

@@ -159,6 +159,8 @@ var selectedTabStore = Reflux.createStore({
 selectedTabStore.listen(tab => {
 	var channel = tab.channel;
 
+	actions.hideMenu();
+
 	if (tab.server) {
 		if (channel) {
 			while (channel[0] === '#') {