mirror of https://github.com/ENSL/ensl_gathers.git
Basic layout now works
This commit is contained in:
Chris Blanchard
parent
fce8039e3e
commit
ea4f049cf0
|
|
@ -168,7 +168,9 @@ const App = React.createClass({
|
|||
events: [],
|
||||
updateTitle: updateTitle,
|
||||
showEventsPanel: showEventsPanel,
|
||||
soundController: new SoundController()
|
||||
soundController: new SoundController(),
|
||||
showMessageBox: true,
|
||||
collapseMenu: false
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -284,6 +286,21 @@ const App = React.createClass({
|
|||
socket.emit("gather:refresh");
|
||||
},
|
||||
|
||||
toggleMessageBox(e) {
|
||||
e.preventDefault();
|
||||
console.log("FOO")
|
||||
this.setState({
|
||||
showMessageBox: !this.state.showMessageBox
|
||||
});
|
||||
},
|
||||
|
||||
toggleCollapseMenu(e) {
|
||||
e.preventDefault();
|
||||
this.setState({
|
||||
collapseMenu: !this.state.collapseMenu
|
||||
});
|
||||
},
|
||||
|
||||
render() {
|
||||
const socket = this.props.socket;
|
||||
|
||||
|
|
@ -304,29 +321,99 @@ const App = React.createClass({
|
|||
);
|
||||
}
|
||||
|
||||
let appClass = ["skin-blue", "sidebar-mini", "fixed"];
|
||||
if (this.state.showMessageBox) appClass.push("control-sidebar-open");
|
||||
if (this.state.collapseMenu) appClass.push("sidebar-collapse");
|
||||
|
||||
return (
|
||||
<div className="wrapper">
|
||||
<div className={appClass.join(" ")}>
|
||||
<header className="main-header">
|
||||
<a href="/" className="logo">
|
||||
<span className="logo-mini">NSL Gathers</span>
|
||||
<span className="logo-lg">NSL Gathers</span>
|
||||
</a>
|
||||
<nav className="navbar navbar-static-top" role="navigation">
|
||||
<a href="#" className="sidebar-toggle" data-toggle="offcanvas" role="button">
|
||||
<a href="#" className="sidebar-toggle" onClick={this.toggleCollapseMenu} role="button">
|
||||
<span className="sr-only">Toggle navigation</span>
|
||||
</a>
|
||||
<div className="navbar-custom-menu">
|
||||
<ul className="nav navbar-nav">
|
||||
<li className="dropdown messages-menu">
|
||||
<a href="#" className="dropdown-toggle" data-toggle="dropdown">
|
||||
<i className="fa fa-envelope-o"></i>
|
||||
<a href="#">
|
||||
<i className="fa fa-headphones"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li className="dropdown messages-menu">
|
||||
<a href="#">
|
||||
<i className="fa fa-newspaper-o"></i>
|
||||
<span className="label label-success">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onClick={this.toggleMessageBox}><i className="fa fa-comment"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<aside className="main-sidebar">
|
||||
<section className="sidebar" style={{height: "auto"}}>
|
||||
<div className="user-panel">
|
||||
<div className="pull-left image">
|
||||
<img src="http://www.ensl.org/images/icons/noavatar.png" className="img-circle" alt="User Image" />
|
||||
</div>
|
||||
<div className="pull-left info">
|
||||
<p>User Name</p>
|
||||
<a href="#"><i className="fa fa-circle text-success"></i> Online</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="sidebar-menu">
|
||||
<li className="header">MAIN NAVIGATION</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fa fa-dashboard"></i> <span>Online</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fa fa-dashboard"></i> <span>Teamspeak</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fa fa-dashboard"></i> <span>Info</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
<div className="content-wrapper" style={{"minHeight": "916px"}}>
|
||||
<section className="content-header">
|
||||
<h1>Gathers<small>beta</small></h1>
|
||||
</section>
|
||||
<section className="content">
|
||||
<p>Foo</p>
|
||||
</section>
|
||||
</div>
|
||||
<aside className="control-sidebar control-sidebar-dark" style={{"position": "fixed", "height": "auto"}}>
|
||||
<div>
|
||||
<div>
|
||||
<h3 className="control-sidebar-heading">Recent Activity</h3>
|
||||
<ul className="control-sidebar-menu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="menu-icon fa fa-birthday-cake bg-red"></i>
|
||||
<div className="menu-info">
|
||||
<h4 className="control-sidebar-subheading">Langdon's Birthday</h4>
|
||||
<p>Will be 23 on April 24th</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div className="control-sidebar-bg" style={{"position":"fixed", "height":"auto"}}></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -345,7 +432,7 @@ const App = React.createClass({
|
|||
<TeamSpeakButton />
|
||||
<ul className="nav navbar-top-links navbar-right">
|
||||
<li className="dropdown">
|
||||
<a className="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<a href="#">
|
||||
Info <i className="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul className="dropdown-menu">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
/*
|
||||
* Skin: Blue
|
||||
* ----------
|
||||
*/
|
||||
.skin-blue .main-header .navbar {
|
||||
background-color: #3c8dbc;
|
||||
}
|
||||
.skin-blue .main-header .navbar .nav > li > a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.skin-blue .main-header .navbar .nav > li > a:hover,
|
||||
.skin-blue .main-header .navbar .nav > li > a:active,
|
||||
.skin-blue .main-header .navbar .nav > li > a:focus,
|
||||
.skin-blue .main-header .navbar .nav .open > a,
|
||||
.skin-blue .main-header .navbar .nav .open > a:hover,
|
||||
.skin-blue .main-header .navbar .nav .open > a:focus,
|
||||
.skin-blue .main-header .navbar .nav > .active > a {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #f6f6f6;
|
||||
}
|
||||
.skin-blue .main-header .navbar .sidebar-toggle {
|
||||
color: #ffffff;
|
||||
}
|
||||
.skin-blue .main-header .navbar .sidebar-toggle:hover {
|
||||
color: #f6f6f6;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.skin-blue .main-header .navbar .sidebar-toggle {
|
||||
color: #fff;
|
||||
}
|
||||
.skin-blue .main-header .navbar .sidebar-toggle:hover {
|
||||
background-color: #367fa9;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.skin-blue .main-header .navbar .dropdown-menu li.divider {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.skin-blue .main-header .navbar .dropdown-menu li a {
|
||||
color: #fff;
|
||||
}
|
||||
.skin-blue .main-header .navbar .dropdown-menu li a:hover {
|
||||
background: #367fa9;
|
||||
}
|
||||
}
|
||||
.skin-blue .main-header .logo {
|
||||
background-color: #367fa9;
|
||||
color: #ffffff;
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
.skin-blue .main-header .logo:hover {
|
||||
background-color: #357ca5;
|
||||
}
|
||||
.skin-blue .main-header li.user-header {
|
||||
background-color: #3c8dbc;
|
||||
}
|
||||
.skin-blue .content-header {
|
||||
background: transparent;
|
||||
}
|
||||
.skin-blue .wrapper,
|
||||
.skin-blue .main-sidebar,
|
||||
.skin-blue .left-side {
|
||||
background-color: #222d32;
|
||||
}
|
||||
.skin-blue .user-panel > .info,
|
||||
.skin-blue .user-panel > .info > a {
|
||||
color: #fff;
|
||||
}
|
||||
.skin-blue .sidebar-menu > li.header {
|
||||
color: #4b646f;
|
||||
background: #1a2226;
|
||||
}
|
||||
.skin-blue .sidebar-menu > li > a {
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.skin-blue .sidebar-menu > li:hover > a,
|
||||
.skin-blue .sidebar-menu > li.active > a {
|
||||
color: #ffffff;
|
||||
background: #1e282c;
|
||||
border-left-color: #3c8dbc;
|
||||
}
|
||||
.skin-blue .sidebar-menu > li > .treeview-menu {
|
||||
margin: 0 1px;
|
||||
background: #2c3b41;
|
||||
}
|
||||
.skin-blue .sidebar a {
|
||||
color: #b8c7ce;
|
||||
}
|
||||
.skin-blue .sidebar a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.skin-blue .treeview-menu > li > a {
|
||||
color: #8aa4af;
|
||||
}
|
||||
.skin-blue .treeview-menu > li.active > a,
|
||||
.skin-blue .treeview-menu > li > a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.skin-blue .sidebar-form {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #374850;
|
||||
margin: 10px 10px;
|
||||
}
|
||||
.skin-blue .sidebar-form input[type="text"],
|
||||
.skin-blue .sidebar-form .btn {
|
||||
box-shadow: none;
|
||||
background-color: #374850;
|
||||
border: 1px solid transparent;
|
||||
height: 35px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.skin-blue .sidebar-form input[type="text"] {
|
||||
color: #666;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
.skin-blue .sidebar-form input[type="text"]:focus,
|
||||
.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
}
|
||||
.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.skin-blue .sidebar-form .btn {
|
||||
color: #999;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.skin-blue.layout-top-nav .main-header > .logo {
|
||||
background-color: #3c8dbc;
|
||||
color: #ffffff;
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
.skin-blue.layout-top-nav .main-header > .logo:hover {
|
||||
background-color: #3b8ab8;
|
||||
}
|
||||
|
|
@ -96,7 +96,6 @@ body {
|
|||
.content-wrapper,
|
||||
.right-side {
|
||||
min-height: 100%;
|
||||
background-color: #ecf0f5;
|
||||
z-index: 800;
|
||||
}
|
||||
.main-footer {
|
||||
|
|
|
|||
144
public/app.css
144
public/app.css
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
207
public/app.js
207
public/app.js
|
|
@ -1660,7 +1660,9 @@ var App = React.createClass({
|
|||
events: [],
|
||||
updateTitle: updateTitle,
|
||||
showEventsPanel: showEventsPanel,
|
||||
soundController: new SoundController()
|
||||
soundController: new SoundController(),
|
||||
showMessageBox: true,
|
||||
collapseMenu: false
|
||||
};
|
||||
},
|
||||
updateTitle: function updateTitle() {
|
||||
|
|
@ -1768,6 +1770,19 @@ var App = React.createClass({
|
|||
socket.emit("message:refresh");
|
||||
socket.emit("gather:refresh");
|
||||
},
|
||||
toggleMessageBox: function toggleMessageBox(e) {
|
||||
e.preventDefault();
|
||||
console.log("FOO");
|
||||
this.setState({
|
||||
showMessageBox: !this.state.showMessageBox
|
||||
});
|
||||
},
|
||||
toggleCollapseMenu: function toggleCollapseMenu(e) {
|
||||
e.preventDefault();
|
||||
this.setState({
|
||||
collapseMenu: !this.state.collapseMenu
|
||||
});
|
||||
},
|
||||
render: function render() {
|
||||
var socket = this.props.socket;
|
||||
|
||||
|
|
@ -1790,9 +1805,13 @@ var App = React.createClass({
|
|||
);
|
||||
}
|
||||
|
||||
var appClass = ["skin-blue", "sidebar-mini", "fixed"];
|
||||
if (this.state.showMessageBox) appClass.push("control-sidebar-open");
|
||||
if (this.state.collapseMenu) appClass.push("sidebar-collapse");
|
||||
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ className: "wrapper" },
|
||||
{ className: appClass.join(" ") },
|
||||
React.createElement(
|
||||
"header",
|
||||
{ className: "main-header" },
|
||||
|
|
@ -1815,7 +1834,7 @@ var App = React.createClass({
|
|||
{ className: "navbar navbar-static-top", role: "navigation" },
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#", className: "sidebar-toggle", "data-toggle": "offcanvas", role: "button" },
|
||||
{ href: "#", className: "sidebar-toggle", onClick: this.toggleCollapseMenu, role: "button" },
|
||||
React.createElement(
|
||||
"span",
|
||||
{ className: "sr-only" },
|
||||
|
|
@ -1833,19 +1852,195 @@ var App = React.createClass({
|
|||
{ className: "dropdown messages-menu" },
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#", className: "dropdown-toggle", "data-toggle": "dropdown" },
|
||||
React.createElement("i", { className: "fa fa-envelope-o" }),
|
||||
{ href: "#" },
|
||||
React.createElement("i", { className: "fa fa-headphones" })
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
{ className: "dropdown messages-menu" },
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
React.createElement("i", { className: "fa fa-newspaper-o" }),
|
||||
React.createElement(
|
||||
"span",
|
||||
{ className: "label label-success" },
|
||||
"4"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#", onClick: this.toggleMessageBox },
|
||||
React.createElement("i", { className: "fa fa-comment" })
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"aside",
|
||||
{ className: "main-sidebar" },
|
||||
React.createElement(
|
||||
"section",
|
||||
{ className: "sidebar", style: { height: "auto" } },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "user-panel" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "pull-left image" },
|
||||
React.createElement("img", { src: "http://www.ensl.org/images/icons/noavatar.png", className: "img-circle", alt: "User Image" })
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "pull-left info" },
|
||||
React.createElement(
|
||||
"p",
|
||||
null,
|
||||
"User Name"
|
||||
),
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
React.createElement("i", { className: "fa fa-circle text-success" }),
|
||||
" Online"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"ul",
|
||||
{ className: "sidebar-menu" },
|
||||
React.createElement(
|
||||
"li",
|
||||
{ className: "header" },
|
||||
"MAIN NAVIGATION"
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
React.createElement("i", { className: "fa fa-dashboard" }),
|
||||
" ",
|
||||
React.createElement(
|
||||
"span",
|
||||
null,
|
||||
"Online"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
React.createElement("i", { className: "fa fa-dashboard" }),
|
||||
" ",
|
||||
React.createElement(
|
||||
"span",
|
||||
null,
|
||||
"Teamspeak"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
React.createElement("i", { className: "fa fa-dashboard" }),
|
||||
" ",
|
||||
React.createElement(
|
||||
"span",
|
||||
null,
|
||||
"Info"
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "content-wrapper", style: { "minHeight": "916px" } },
|
||||
React.createElement(
|
||||
"section",
|
||||
{ className: "content-header" },
|
||||
React.createElement(
|
||||
"h1",
|
||||
null,
|
||||
"Gathers",
|
||||
React.createElement(
|
||||
"small",
|
||||
null,
|
||||
"beta"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"section",
|
||||
{ className: "content" },
|
||||
React.createElement(
|
||||
"p",
|
||||
null,
|
||||
"Foo"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"aside",
|
||||
{ className: "control-sidebar control-sidebar-dark", style: { "position": "fixed", "height": "auto" } },
|
||||
React.createElement(
|
||||
"div",
|
||||
null,
|
||||
React.createElement(
|
||||
"div",
|
||||
null,
|
||||
React.createElement(
|
||||
"h3",
|
||||
{ className: "control-sidebar-heading" },
|
||||
"Recent Activity"
|
||||
),
|
||||
React.createElement(
|
||||
"ul",
|
||||
{ className: "control-sidebar-menu" },
|
||||
React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"a",
|
||||
{ href: "#" },
|
||||
React.createElement("i", { className: "menu-icon fa fa-birthday-cake bg-red" }),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "menu-info" },
|
||||
React.createElement(
|
||||
"h4",
|
||||
{ className: "control-sidebar-subheading" },
|
||||
"Langdon's Birthday"
|
||||
),
|
||||
React.createElement(
|
||||
"p",
|
||||
null,
|
||||
"Will be 23 on April 24th"
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement("div", { className: "control-sidebar-bg", style: { "position": "fixed", "height": "auto" } })
|
||||
);
|
||||
|
||||
return React.createElement(
|
||||
|
|
@ -1889,7 +2084,7 @@ var App = React.createClass({
|
|||
{ className: "dropdown" },
|
||||
React.createElement(
|
||||
"a",
|
||||
{ className: "dropdown-toggle", "data-toggle": "dropdown", href: "#" },
|
||||
{ href: "#" },
|
||||
"Info ",
|
||||
React.createElement("i", { className: "fa fa-caret-down" })
|
||||
),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +1,2 @@
|
|||
<div id="wrapper"></div>
|
||||
<div id="app-body"></div>
|
||||
{{>foot}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<html>
|
||||
{{>head}}
|
||||
<body clas="hold-transition skin-blue sidebar-mini" id="app-body">
|
||||
<body>
|
||||
{{{ body }}}
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue