mirror of https://github.com/ENSL/ensl_gathers.git
Move gather menu to sidebar and rearrange
This commit is contained in:
parent
718a1e1a7e
commit
25cfff6b64
|
@ -703,9 +703,9 @@ const GatherMenu = exports.GatherMenu = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
itemClass(gather) {
|
itemClass(gather) {
|
||||||
let className = ["list-group-item", "pointer"];
|
let className = ["treeview"];
|
||||||
if (gather.type === this.props.currentGather) {
|
if (gather.type === this.props.currentGather) {
|
||||||
className.push("list-group-item-success");
|
className.push("active");
|
||||||
}
|
}
|
||||||
return className.join(" ");
|
return className.join(" ");
|
||||||
},
|
},
|
||||||
|
@ -723,23 +723,23 @@ const GatherMenu = exports.GatherMenu = React.createClass({
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="panel panel-primary add-bottom">
|
<ul className="sidebar-menu">
|
||||||
<div className="panel-heading">Gather Menu</div>
|
<li className="header">Gather Formats</li>
|
||||||
<ul className="list-group">
|
{
|
||||||
{
|
this.gatherPoolArray().map(gather => {
|
||||||
this.gatherPoolArray().map(gather => {
|
return (
|
||||||
return (
|
<li className={this.itemClass(gather)}
|
||||||
<li onClick={this.onClick(gather)} className={this.itemClass(gather)}
|
key={gather.type}>
|
||||||
key={gather.type}>
|
<a href="#" onClick={this.onClick(gather)}>
|
||||||
<strong>{gather.name} ({gather.gatherers.length}/{gather.teamSize * 2})</strong>
|
<strong>{gather.name}</strong> ({gather.gatherers.length}/{gather.teamSize * 2})
|
||||||
<br />
|
<br />
|
||||||
{gather.description}
|
<small>{gather.description}</small>
|
||||||
</li>
|
</a>
|
||||||
);
|
</li>
|
||||||
})
|
);
|
||||||
}
|
})
|
||||||
</ul>
|
}
|
||||||
</div>
|
</ul>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -23,7 +23,7 @@ const ArchivedGathers = exports.ArchivedGathers = React.createClass({
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="panel panel-primary archived-gather-panel">
|
<div className="panel panel-primary">
|
||||||
<div className="panel-heading">Archived Gathers</div>
|
<div className="panel-heading">Archived Gathers</div>
|
||||||
<div className="panel-body">
|
<div className="panel-body">
|
||||||
{archive}
|
{archive}
|
||||||
|
|
|
@ -473,6 +473,15 @@ const GatherPage = React.createClass({
|
||||||
{connectionStatus}
|
{connectionStatus}
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<ul className="sidebar-menu">
|
||||||
<li className="header">
|
<li className="header">
|
||||||
<span className="badge">{this.state.users.length}</span> Players Online
|
<span className="badge">{this.state.users.length}</span> Players Online
|
||||||
|
@ -480,17 +489,12 @@ const GatherPage = React.createClass({
|
||||||
</ul>
|
</ul>
|
||||||
<UserMenu users={this.state.users} user={this.state.user}
|
<UserMenu users={this.state.users} user={this.state.user}
|
||||||
socket={socket} mountModal={this.mountModal}/>
|
socket={socket} mountModal={this.mountModal}/>
|
||||||
<ul className="sidebar-menu">
|
|
||||||
<li className="header">Information</li>
|
|
||||||
<TeamSpeakButton />
|
|
||||||
<InfoButton />
|
|
||||||
</ul>
|
|
||||||
</section>
|
</section>
|
||||||
</aside>
|
</aside>
|
||||||
<div className="content-wrapper" style={{"minHeight": "916px"}}>
|
<div className="content-wrapper" style={{"minHeight": "916px"}}>
|
||||||
<section className="content">
|
<section className="content">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-lg-8">
|
<div className="col-lg-8 col-md-12 col-sm-12">
|
||||||
<Gather
|
<Gather
|
||||||
socket={socket}
|
socket={socket}
|
||||||
maps={this.state.maps}
|
maps={this.state.maps}
|
||||||
|
@ -499,18 +503,12 @@ const GatherPage = React.createClass({
|
||||||
servers={this.state.servers}
|
servers={this.state.servers}
|
||||||
thisGatherer={this.thisGatherer()}
|
thisGatherer={this.thisGatherer()}
|
||||||
soundController={this.state.soundController} />
|
soundController={this.state.soundController} />
|
||||||
</div>
|
{eventsPanel}
|
||||||
<div className="col-lg-4 col-md-12 col-sm-12">
|
|
||||||
<GatherMenu
|
|
||||||
gatherPool={this.state.gatherPool}
|
|
||||||
currentGather={this.state.currentGather}
|
|
||||||
gatherSelectedCallback={this.onGatherSelected} />
|
|
||||||
{eventsPanel}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div className="row">
|
<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}
|
<ArchivedGathers archive={this.state.archive}
|
||||||
maps={this.state.maps}
|
maps={this.state.maps}
|
||||||
servers={this.state.servers} />
|
servers={this.state.servers} />
|
||||||
|
|
|
@ -203,7 +203,7 @@ const Chatroom = exports.Chatroom = React.createClass({
|
||||||
let node = ReactDOM.findDOMNode(this.refs.messageContainer);
|
let node = ReactDOM.findDOMNode(this.refs.messageContainer);
|
||||||
node.addEventListener('scroll', this.scrollListener);
|
node.addEventListener('scroll', this.scrollListener);
|
||||||
|
|
||||||
this.scrollToBottom();
|
$(window).on("load", this.scrollToBottom);
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
@ -250,7 +250,6 @@ const Chatroom = exports.Chatroom = React.createClass({
|
||||||
if (prevProps.messages.length < this.props.messages.length) {
|
if (prevProps.messages.length < this.props.messages.length) {
|
||||||
this.scrollToBottom();
|
this.scrollToBottom();
|
||||||
}
|
}
|
||||||
console.log(this.props.containerHeight);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
scrollToBottom() {
|
scrollToBottom() {
|
||||||
|
@ -456,12 +455,13 @@ const MessageBar = React.createClass({
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<form onSubmit={this.handleSubmit} autoComplete="off">
|
<form onSubmit={this.handleSubmit} autoComplete="off">
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<input
|
<input
|
||||||
id="btn-input"
|
id="message-input"
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control message-input"
|
||||||
ref="content"
|
ref="content"
|
||||||
onChange={this.handleInputChange}
|
onChange={this.handleInputChange}
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
|
|
|
@ -189,7 +189,7 @@ const UserMenu = exports.UserMenu = React.createClass({
|
||||||
mountModal={this.props.mountModal} />
|
mountModal={this.props.mountModal} />
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<div className="user-panel">
|
<div>
|
||||||
<ul className="users-list-group" id="user-list">
|
<ul className="users-list-group" id="user-list">
|
||||||
{users}
|
{users}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -33,6 +33,16 @@ html, body {
|
||||||
padding-right: 20px;
|
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 {
|
.signin {
|
||||||
margin: 0px 10px;
|
margin: 0px 10px;
|
||||||
}
|
}
|
||||||
|
@ -71,11 +81,6 @@ html, body {
|
||||||
|
|
||||||
/*Gather Styles*/
|
/*Gather Styles*/
|
||||||
|
|
||||||
.archived-gather-panel {
|
|
||||||
max-width: 1140px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vote-button {
|
.vote-button {
|
||||||
min-width: 60px;
|
min-width: 60px;
|
||||||
}
|
}
|
||||||
|
@ -246,16 +251,15 @@ html, body {
|
||||||
|
|
||||||
.users-list-group {
|
.users-list-group {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.users-list-group-item {
|
.users-list-group-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 5px 10px;
|
padding: 5px 15px 0px 15px;
|
||||||
margin-bottom: -1px;
|
margin-bottom: -1px;
|
||||||
/*background-color: #073642;*/
|
/*background-color: #073642;*/
|
||||||
border: 1px solid #586e75;
|
// border: 1px solid #586e75;
|
||||||
}
|
}
|
||||||
.users-list-group-item:first-child {
|
.users-list-group-item:first-child {
|
||||||
border-top-right-radius: 3px;
|
border-top-right-radius: 3px;
|
||||||
|
|
Loading…
Reference in New Issue