Move gather menu to sidebar and rearrange

app/javascripts/components/gather.js

@@ -703,9 +703,9 @@ const GatherMenu = exports.GatherMenu = React.createClass({
 	},
 
 	itemClass(gather) {
-		let className = ["list-group-item", "pointer"];
+		let className = ["treeview"];
 		if (gather.type === this.props.currentGather) {
-			className.push("list-group-item-success");
+			className.push("active");
 		}
 		return className.join(" ");
 	},
@@ -723,23 +723,23 @@ const GatherMenu = exports.GatherMenu = React.createClass({
 
 	render() {
 		return (
-			<div className="panel panel-primary add-bottom">
-				<div className="panel-heading">Gather Menu</div>
-				<ul className="list-group">
-					{
-						this.gatherPoolArray().map(gather => {
-							return (
-								<li onClick={this.onClick(gather)} className={this.itemClass(gather)}
-									key={gather.type}>
-									<strong>{gather.name} ({gather.gatherers.length}/{gather.teamSize * 2})</strong>
+			<ul className="sidebar-menu">
+				<li className="header">Gather Formats</li>
+				{
+					this.gatherPoolArray().map(gather => {
+						return (
+							<li className={this.itemClass(gather)}
+								key={gather.type}>
+								<a href="#" onClick={this.onClick(gather)}>
+									<strong>{gather.name}</strong> ({gather.gatherers.length}/{gather.teamSize * 2})
 									<br />
-									{gather.description}
-								</li>
-							);
-						})
-					}
-				</ul>
-			</div>
+									<small>{gather.description}</small>
+								</a>
+							</li>
+						);
+					})
+				}
+			</ul>
 		);
 	}
 });

app/javascripts/components/gatherArchive.js

@@ -23,7 +23,7 @@ const ArchivedGathers = exports.ArchivedGathers = React.createClass({
 			});
 
 		return (
-			<div className="panel panel-primary archived-gather-panel">
+			<div className="panel panel-primary">
 				<div className="panel-heading">Archived Gathers</div>
 				<div className="panel-body">
 					{archive}

app/javascripts/components/main.js

@@ -473,6 +473,15 @@ const GatherPage = React.createClass({
 								{connectionStatus}
 							</div>
 						</div>
+						<GatherMenu 
+							gatherPool={this.state.gatherPool}
+							currentGather={this.state.currentGather}
+							gatherSelectedCallback={this.onGatherSelected} />
+						<ul className="sidebar-menu">
+							<li className="header">Information</li>
+							<TeamSpeakButton />
+							<InfoButton />
+						</ul>
 						<ul className="sidebar-menu">
 							<li className="header">
 								<span className="badge">{this.state.users.length}</span> Players Online
@@ -480,17 +489,12 @@ const GatherPage = React.createClass({
 						</ul>
 						<UserMenu users={this.state.users} user={this.state.user} 
 							socket={socket} mountModal={this.mountModal}/>
-						<ul className="sidebar-menu">
-							<li className="header">Information</li>
-							<TeamSpeakButton />
-							<InfoButton />
-						</ul>
 					</section>
 				</aside>
 				<div className="content-wrapper" style={{"minHeight": "916px"}}>
 					<section className="content">
 						<div className="row">
-							<div className="col-lg-8">
+							<div className="col-lg-8 col-md-12 col-sm-12">
 								<Gather 
 									socket={socket}
 									maps={this.state.maps}
@@ -499,18 +503,12 @@ const GatherPage = React.createClass({
 									servers={this.state.servers}
 									thisGatherer={this.thisGatherer()}
 									soundController={this.state.soundController} />
-							</div>
-							<div className="col-lg-4 col-md-12 col-sm-12">
-								<GatherMenu 
-									gatherPool={this.state.gatherPool}
-									currentGather={this.state.currentGather}
-									gatherSelectedCallback={this.onGatherSelected} />
-								{eventsPanel}
+									{eventsPanel}
 							</div>
 						</div>
 						<hr />
 						<div className="row">
-							<div className="col-lg-12 col-md-12 col-sm-12">
+							<div className="col-lg-8 col-md-12 col-sm-12">
 								<ArchivedGathers archive={this.state.archive}
 									maps={this.state.maps}
 									servers={this.state.servers} />

app/javascripts/components/message.js

@@ -203,7 +203,7 @@ const Chatroom = exports.Chatroom = React.createClass({
 		let node = ReactDOM.findDOMNode(this.refs.messageContainer);
 		node.addEventListener('scroll', this.scrollListener);
 
-		this.scrollToBottom();
+		$(window).on("load", this.scrollToBottom);
 	},
 
 	componentWillUnmount() {
@@ -250,7 +250,6 @@ const Chatroom = exports.Chatroom = React.createClass({
 		if (prevProps.messages.length < this.props.messages.length) {
 			this.scrollToBottom();
 		}
-		console.log(this.props.containerHeight);
 	},
 
 	scrollToBottom() {
@@ -456,12 +455,13 @@ const MessageBar = React.createClass({
 			</div>;
 		}
 		return (
+
 			<form onSubmit={this.handleSubmit} autoComplete="off">
 				<div className="input-group">
 					<input 
-						id="btn-input" 
+						id="message-input" 
 						type="text" 
-						className="form-control" 
+						className="form-control message-input" 
 						ref="content"
 						onChange={this.handleInputChange}
 						autoComplete="off"

app/javascripts/components/user.js

@@ -189,7 +189,7 @@ const UserMenu = exports.UserMenu = React.createClass({
 				mountModal={this.props.mountModal} />
 		});
 		return (
-			<div className="user-panel">
+			<div>
 				<ul className="users-list-group" id="user-list">
 					{users}
 				</ul>

app/stylesheets/app.css

@@ -33,6 +33,16 @@ html, body {
 	padding-right: 20px;
 }
 
+#message-input {
+	border: 1px solid #367fa9 !important;
+	-webkit-border-top-left-radius: 3px;
+	-webkit-border-bottom-left-radius: 3px;
+	-moz-border-radius-topleft: 3px;
+	-moz-border-radius-bottomleft: 3px;
+	border-top-left-radius: 3px;
+	border-bottom-left-radius: 3px;
+}
+
 .signin {
 	margin: 0px 10px;
 }
@@ -71,11 +81,6 @@ html, body {
 
 /*Gather Styles*/
 
-.archived-gather-panel {
-	max-width: 1140px;
-	margin: 0 auto;
-}
-
 .vote-button {
 	min-width: 60px;
 }
@@ -246,16 +251,15 @@ html, body {
 
 .users-list-group {
   padding: 10px 0;
-  max-height: 200px;
-  overflow-y: scroll;
 }
+
 .users-list-group-item {
   position: relative;
   display: block;
-  padding: 5px 10px;
+  padding: 5px 15px 0px 15px;
   margin-bottom: -1px;
   /*background-color: #073642;*/
-  border: 1px solid #586e75;
+  // border: 1px solid #586e75;
 }
 .users-list-group-item:first-child {
   border-top-right-radius: 3px;