[Ui]: Remove 'user_menu'; Apply new template for 'auth_login', 'group…

…_list', 'group_item'.
sontdhust · Jul 27, 2016 · 448f093 · 448f093
1 parent 21a99ee
commit 448f093
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 149 deletions.
diff --git a/client/lib/avalon.css b/client/lib/avalon.css
@@ -1,3 +1,33 @@
+/* Override */
+
 footer {
   margin-left: 0px;
 }
+
+body {
+  background: #F7F7F7;
+}
+
+.container {
+  padding: 15px;
+}
+
+/* Modified */
+
+.login_content span {
+  float: left;
+}
+
+/* Custom */
+
+.avalon-logo {
+  height: 40px;
+  width: 40px;
+  margin: -10px 0px 10px;
+}
+
+.avalon-error,
+.avalon-error .form-control {
+  color: #aa0000 !important;
+  border-color: #a94442 !important;
+}
diff --git a/client/main.html b/client/main.html
@@ -1,6 +1,6 @@
 <head>
   <title>Avalon</title>
 </head>
-<body>
+<body class="footer_fixed">
     <div id="app"></div>
 </body>
diff --git a/imports/ui/components/group_item.jsx b/imports/ui/components/group_item.jsx
@@ -1,7 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router';
-import RaisedButton from 'material-ui/RaisedButton';
-import { TableRow, TableRowColumn } from 'material-ui/Table';
 import { Groups } from '../../api/groups/groups.js'; // Constants only
 import { join, leave } from '../../api/groups/methods.js';
 
@@ -42,30 +39,41 @@ export default class GroupItem extends React.Component {
     const joined = group.hasPlayer(Meteor.userId());
     const isPlaying = group.isPlaying();
     const joinable = !joined && !isPlaying;
-    const linkGroupName = (
-      <TableRowColumn>
-        {group.name}
-        {
-          joined ? 
-          <Link to={`/groups/${group._id}`} title={group.name} style={{ marginLeft: '10px' }}>
-            Visit group
-          </Link> : ''
-        }
-      </TableRowColumn>
-    );
-    const buttonJoinLeaveGroup = !!Meteor.userId() && (joined || playersCount < Groups.MAX_PLAYERS_COUNT) && !isPlaying ? (
-      <TableRowColumn>
-        <RaisedButton primary={joinable} secondary={!joinable} label={joinable ? 'Join' : 'Leave'} onClick={joinable ? this.joinGroup : this.leaveGroup}></RaisedButton>
-      </TableRowColumn>
-    ) : (<TableRowColumn></TableRowColumn>);
     return (
-      <TableRow selectable={false}>
-        {linkGroupName}
-        <TableRowColumn>{group.getOwner().username}</TableRowColumn>
-        <TableRowColumn>{playersCount}</TableRowColumn>
-        <TableRowColumn>{group.isPlaying() ? 'Playing' : playersCount >= Groups.MIN_PLAYERS_COUNT ? 'Ready' : 'Waiting for players'}</TableRowColumn>
-        {buttonJoinLeaveGroup}
-      </TableRow>
+      <tr>
+        <td>
+          <a>{group.name}</a>
+          <br/>
+          <small>Owner: {group.getOwner().username}</small>
+        </td>
+        <td>
+          <ul className="list-inline">
+            {group.getPlayers().map(p =>
+              <li key={p.user._id}><img src="images/avatar.png" className="avatar" alt="Avatar"/></li>
+            )}
+          </ul>
+        </td>
+        <td>
+          {
+            group.isPlaying() ?
+              <span className="label label-default">Playing</span> :
+              playersCount >= Groups.MIN_PLAYERS_COUNT ? 
+                <span className="label label-warning">Ready</span> :
+                <span className="label label-primary">Waiting for players</span>
+          }
+        </td>
+        <td>
+          {
+            !!Meteor.userId() && (joined || playersCount < Groups.MAX_PLAYERS_COUNT) && !isPlaying ?
+              joinable ?
+                <a className="btn btn-sm btn-success" onClick={this.joinGroup}><i className="fa fa-sign-in"></i> Join </a> :
+                <a className="btn btn-sm btn-danger" onClick={this.leaveGroup}><i className="fa fa-sign-out"></i> Leave </a> : ''
+          }
+          {
+            joined ? <a href={`/groups/${group._id}`} className="btn btn-sm btn-info" ><i className="fa fa-group"></i> Go to </a> : ''
+          }
+        </td>
+      </tr>
     );
   }
 

diff --git a/imports/ui/components/group_list.jsx b/imports/ui/components/group_list.jsx
@@ -37,25 +37,30 @@ export default class GroupList extends React.Component {
       ); 
     }
     return (
-      <div>
-        {formCreateGroup}
-        <div>
-          <Table>
-            <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
-              <TableRow>
-                <TableHeaderColumn>Name</TableHeaderColumn>
-                <TableHeaderColumn>Owner</TableHeaderColumn>
-                <TableHeaderColumn>Number of players</TableHeaderColumn>
-                <TableHeaderColumn>Status</TableHeaderColumn>
-                <TableHeaderColumn></TableHeaderColumn>
-              </TableRow>
-            </TableHeader>
-            <TableBody displayRowCheckbox={false}>
-              {groups.map(group =>
-                <GroupItem group={group} key={group._id}/>
-              )}
-            </TableBody>
-          </Table>
+      <div className="row">
+        <div className="col-md-12">
+          <div className="x_panel">
+            <div className="x_title">
+              <h2>Groups</h2>
+              <div className="clearfix"></div>
+            </div>
+            <div className="x_content">
+              <p>Simple table with group listing with members, status and options</p>
+              <table className="table table-striped projects">
+                <thead>
+                  <tr>
+                    <th style={{ width: '20%' }}>Group</th>
+                    <th>Players</th>
+                    <th>Status</th>
+                    <th style={{ width: '20%' }}></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {groups.map(g => <GroupItem group={g} key={g._id}/>)}
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
       </div>
     );

diff --git a/imports/ui/components/user_menu.jsx b/imports/ui/components/user_menu.jsx
diff --git a/imports/ui/layouts/app.jsx b/imports/ui/layouts/app.jsx
@@ -1,20 +1,12 @@
 import React from 'react';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
-import AppCanvas from 'material-ui/internal/AppCanvas';
 import Navbar from './navbar';
 import Footer from './footer';
 
-const App = ({content}) => (
+const App = ({user, content}) => (
   <div>
-    <Navbar user={Meteor.user()}/>
-    <div className="right_col" role="main">
-      <MuiThemeProvider muiTheme={getMuiTheme()}>
-        <AppCanvas>
-          <br/>
-          {content}
-        </AppCanvas>
-      </MuiThemeProvider>
+    <Navbar user={user}/>
+    <div className="container">
+      {content}
     </div>
     <Footer/>
   </div>

diff --git a/imports/ui/layouts/navbar.jsx b/imports/ui/layouts/navbar.jsx
@@ -6,9 +6,9 @@ export default class Navbar extends React.Component {
     this.logout = this.logout.bind(this);
   }
 
-  logout(event) {
-    event.preventDefault();
+  logout() {
     Meteor.logout();
+    // this.context.router.push('/'); // Force redirect to lobby
   }
 
   render() {
@@ -17,20 +17,24 @@ export default class Navbar extends React.Component {
       <div className="top_nav">
         <div className="nav_menu">
           <nav className="" role="navigation">
+            <div className="nav toggle">
+              <a href="/"><img src="images/avatar.png" className="avalon-logo" alt="Logo"/></a>
+            </div>
             <ul className="nav navbar-nav navbar-right">
-            { user ?
-              <li className="">
-                <a href="javascript:;" className="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                  <img src="images/avatar.png" alt=""/>{user.username}
-                </a>
-                <ul className="dropdown-menu dropdown-usermenu pull-right">
-                  <li><a href="javascript:;" onClick={this.logout}><i className="fa fa-sign-out pull-right"></i> Log Out</a></li>
-                </ul>
-              </li> :
-              [
-                <li key="signup"><a href="/signup"><i className="fa fa-sign-in"></i> Signup</a></li>,
-                <li key="login"><a href="/login"><i className="fa fa-user-plus"></i> Login</a></li>
-              ]
+            {
+              user ?
+                <li className="">
+                  <a href="javascript:;" className="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                    <img src="images/avatar.png" alt=""/>{user.username}
+                  </a>
+                  <ul className="dropdown-menu dropdown-usermenu pull-right">
+                    <li><a onClick={this.logout}><i className="fa fa-sign-out pull-right"></i> Log Out</a></li>
+                  </ul>
+                </li> :
+                [
+                  <li key="signup"><a href="/signup"><i className="fa fa-user-plus"></i> Signup</a></li>,
+                  <li key="login"><a href="/login"><i className="fa fa-sign-in"></i> Login</a></li>
+                ]
             }
             </ul>
           </nav>
@@ -45,4 +49,5 @@ Navbar.propTypes = {
 };
 
 Navbar.contextTypes = {
+  router: React.PropTypes.object
 };
diff --git a/imports/ui/pages/auth_login.jsx b/imports/ui/pages/auth_login.jsx
@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
-import TextField from 'material-ui/TextField';
-import RaisedButton from 'material-ui/RaisedButton';
 import App from '../layouts/app';
 
 export default class AuthLogin extends Component {
@@ -12,32 +10,52 @@ export default class AuthLogin extends Component {
   }
 
   render() {
-    const style = {
-      margin: 25,
-    };
     const { errors } = this.state;
     let usernameError = (errors['username'] || errors['reason']);
     let passwordError = (errors['password'] || errors['reason']);
     usernameError = usernameError && (usernameError.toLowerCase().indexOf('user') > -1 ? usernameError : '');
     passwordError = passwordError && (passwordError.toLowerCase().indexOf('password') > -1 ? passwordError : '');
     const content = (
-      <div style={style}>
-        <form onSubmit={this.login}>
-          <TextField hintText="User name" ref="username" name="username" errorText={usernameError} style={style}/>
-          <TextField hintText="Password" ref="password" name="password" errorText={passwordError} type="password" style={style}/>
-          <RaisedButton primary={true} label="Login" type="submit" style={style}/>
-        </form>
-        <RaisedButton primary={true} containerElement={<Link to="/signup"/>} linkButton={true} label="Signup" style={style}/>
-        <RaisedButton primary={true} containerElement={<Link to="/"/>} linkButton={true} label="Home" style={style}/>
+      <div className="login_wrapper">
+        <div className="animate form login_form">
+          <section className="login_content">
+            <form onSubmit={this.login}>
+              <h1>Login</h1>
+              <div className={usernameError ? 'avalon-error' : ''}>
+                <span>{usernameError}</span>
+                <input type="text" className="form-control" placeholder="Username" ref="username" name="username" required=""/>
+              </div>
+              <div className={passwordError ? 'avalon-error' : ''}>
+                <span>{passwordError}</span>
+                <input type="password" className="form-control" placeholder="Password" ref="password" name="password" required=""/>
+              </div>
+              <div>
+                <button type="submit" className="btn btn-default submit" href="index.html">Login</button>
+              </div>
+              <div className="clearfix"></div>
+              <div className="separator">
+                <p className="change_link">New to site?
+                  <a href="/signup" className="to_register"> Create Account </a>
+                </p>
+                <div className="clearfix"></div>
+                <br />
+                <div>
+                  <h1><i className="fa fa-paw"></i> Avalon game</h1>
+                  <p>©2016 All Rights Reserved.</p>
+                </div>
+              </div>
+            </form>
+          </section>
+        </div>
       </div>
     );
     return <App content={content}/>;
   }
 
   login(event) {
     event.preventDefault();
-    const username = this.refs.username.getValue();
-    const password = this.refs.password.getValue();
+    const username = this.refs.username.value;
+    const password = this.refs.password.value;
     const errors = {};
 
     if (!username) {