Added gather skeleton

lib/react/app.jsx

@@ -237,6 +237,30 @@ var MessageBar = React.createClass({
 	}
 });
 
+var Gather = React.createClass({
+	joinGather: function (e) {
+		e.preventDefault();
+		alert("Joined gather!");
+	},
+	render: function () {
+		return (
+			<div className="panel panel-default">
+				<div className="panel-heading">
+					Current Gather
+				</div>
+				<div className="panel-body">
+				</div>
+				<div className="panel-footer">
+					<button 
+						onClick={this.joinGather} 
+						className="btn btn-primary" 
+						ref="joinbutton">Join Gather</button>
+				</div>
+			</div>
+		);
+	}
+});
+
 var socket;
 
 function initialiseComponents () {
@@ -254,6 +278,7 @@ function initialiseComponents () {
 
 	React.render(<UserMenu count={0} users={[]} />, document.getElementById('side-menu'));
 	React.render(<Chatroom history={[]}/>, document.getElementById('chatroom'));
+	React.render(<Gather history={[]}/>, document.getElementById('gathers'));
 };
 
 initialiseComponents();

public/css/app.css

@@ -1,4 +1,8 @@
 
+#gathers {
+	margin-top: 20px;
+}
+
 #chatroom {
 	margin-top: 20px;
 }

views/index.hbs

@@ -5,11 +5,8 @@
 			</div>
     </div>
 		<div class="row">
-			<div class="col-lg-6">
+			<div class="col-lg-6" id="gathers"></div>	
-				<h3 class="page-header">Current Gather</h3>
+			<div class="col-lg-6" id="chatroom"></div>
-			</div>	
-			<div class="col-lg-6" id="chatroom">
-			</div>
 		</div>
 	</div>
 </div>