ensl/ensl_gathers
0
0
Fork 0
mirror of https://github.com/ENSL/ensl_gathers.git synced 2024-11-10 07:11:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

Basic layout now works

Browse source
This commit is contained in:
Chris Blanchard 2016-01-28 12:01:08 +00:00
parent fce8039e3e
commit ea4f049cf0
9 changed files with 584 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
app/javascripts/components/main.js
View file

@ -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="#">
<i className="fa fa-headphones"></i>
</a>
</li>
<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-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 &nbsp;<i className="fa fa-caret-down"></i>
</a>
<ul className="dropdown-menu">

142
app/stylesheets/skin.css Normal file
View file

@ -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;
}

1
app/stylesheets/theme.css
View file

@ -96,7 +96,6 @@ body {
.content-wrapper,
.right-side {
min-height: 100%;
background-color: #ecf0f5;
z-index: 800;
}
.main-footer {

144
public/app.css
View file

File diff suppressed because one or more lines are too long

2
public/app.css.map
View file

File diff suppressed because one or more lines are too long

209
public/app.js
View file

@ -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" })
),

2
public/app.js.map
View file

File diff suppressed because one or more lines are too long

2
views/gather.hbs
View file

@ -1,2 +1,2 @@
<div id="wrapper"></div>
<div id="app-body"></div>
{{>foot}}

2
views/layouts/main.hbs
View file

@ -1,6 +1,6 @@
<html>
{{>head}}
<body clas="hold-transition skin-blue sidebar-mini" id="app-body">
<body>
{{{ body }}}
</body>
</html>