--- a/client/package.json Wed Aug 29 11:02:36 2018 +0200
+++ b/client/package.json Fri Aug 31 15:14:18 2018 +0200
@@ -5,6 +5,8 @@
"homepage": ".",
"dependencies": {
"@types/react-modal": "^3.2.1",
+ "bootstrap": "^4.1.3",
+ "i18next": "^11.6.0",
"immutable": "^3.8.1",
"jwt-decode": "^2.2.0",
"localforage": "^1.5.0",
@@ -39,8 +41,8 @@
"react-test-renderer": "^15.5.4"
},
"scripts": {
- "build-css": "node-sass-chokidar --include-path ./src --include-path ./src/sass --include-path ./node_modules --include-path ./node_modules/bootstrap-sass/assets/stylesheets src/ -o src/",
- "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./src/sass --include-path ./node_modules --include-path ./node_modules/bootstrap-sass/assets/stylesheets src/ -o src/ --watch --recursive",
+ "build-css": "node-sass-chokidar --include-path ./src --include-path ./src/scss --include-path ./node_modules src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./src/scss --include-path ./node_modules src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
--- a/client/src/App.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/App.js Fri Aug 31 15:14:18 2018 +0200
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
+
// import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
@@ -10,8 +11,8 @@
<Navbar history={this.props.history} />
<div className="container-fluid">
<div className="row">
- <div className="col-md-6 col-md-offset-3 text-center">
- <div class="alert alert-info" role="alert" bsStyle="info" id="home-text"><span id="welcome">Bienvenue sur</span><br/>IRI Notes</div>
+ <div className="col-lg-6 offset-md-3 text-center">
+ <div className="alert alert-info" id="home-text"><span id="welcome">Bienvenue sur</span><br/>IRI Notes</div>
</div>
</div>
</div>
--- a/client/src/App.scss Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/App.scss Fri Aug 31 15:14:18 2018 +0200
@@ -1,4 +1,5 @@
-@import "bootstrap/variables";
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
.App {
text-align: center;
@@ -142,7 +143,7 @@
padding: 20px 10px 20px 80px;
margin-bottom: 10px;
cursor: pointer;
- min-height: ($line-height-computed * 4);
+ // min-height: ($line-height-computed * 4);
border: 1px solid transparent;
&:before {
--- a/client/src/components/CreateGroup.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/CreateGroup.js Fri Aug 31 15:14:18 2018 +0200
@@ -41,7 +41,7 @@
renderErrorMessage(errorMessages, fieldname) {
if (errorMessages && fieldname in errorMessages) {
return errorMessages[fieldname].map((message, key) =>
- <p className="help-block" key={ key }>{ message }</p>
+ <p className="form-text" key={ key }>{ message }</p>
);
}
}
@@ -75,25 +75,25 @@
<Navbar history={this.props.history} />
<div className="container-fluid">
<div className="row">
- <div className="col-md-6 col-md-offset-3">
+ <div className="col-lg-6 offset-md-3">
<div className="panel-login panel panel-default">
- <div className="panel-heading">
- <h4 className="text-uppercase text-center">New Group</h4>
+ <div className="card-header">
+ <h4 className="text-center">Créer un groupe</h4>
<form onSubmit={this.submit}>
<div className="form-group" validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }>
- <label className="control-label">Nom</label>
- <input className="form-control" type="text" onChange={this.handleInputChange} name="name" placeholder="Group name..."/>
+ <label className="col-from-label">Nom</label>
+ <input className="form-control" type="text" onChange={this.handleInputChange} name="name" placeholder="Nom du groupe..."/>
{ this.renderErrorMessage(errorMessages, 'name') }
</div>
<div className="form-group" validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
- <label className="control-label">Password</label>
+ <label className="col-form-label">Description</label>
<input className="form-control" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/>
{ this.renderErrorMessage(errorMessages, 'description') }
</div>
{ this.renderNonFieldErrors(errorMessages) }
<div className="row">
<div className="col-md-6"><button type="submit" className="btn btn-primary btn-lg btn-block" disabled={okDisabled}>Ok</button></div>
- <div className="col-md-6"><button type="button" className="btn btn-default btn-lg btn-block" onClick={this.cancel}>Annuler</button></div>
+ <div className="col-md-6"><button type="button" className="btn btn-secondary btn-lg btn-block" onClick={this.cancel}>Annuler</button></div>
</div>
</form>
</div>
--- a/client/src/components/Login.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Login.js Fri Aug 31 15:14:18 2018 +0200
@@ -3,7 +3,7 @@
import { bindActionCreators } from 'redux';
import '../App.css';
import './Login.css';
-import Navbar from './Navbar';
+// import Navbar from './Navbar';
import * as authActions from '../actions/authActions';
class Login extends Component {
@@ -32,7 +32,6 @@
submit = (e) => {
e.preventDefault();
-
this.login();
}
@@ -44,7 +43,7 @@
renderErrorMessage(errorMessages, fieldname) {
if (errorMessages && errorMessages.has(fieldname)) {
return errorMessages.get(fieldname).map((message, key) =>
- <p className="help-block" key={ key }>{ message }</p>
+ <p className="form-text" key={ key }>{ message }</p>
);
}
}
@@ -64,30 +63,30 @@
render() {
- const errorMessages = this.props.login.get('errorMessages');
+ // const errorMessages = this.props.login.get('errorMessages');
return (
<div>
- <Navbar history={this.props.history} />
+ {/* <Navbar history={this.props.history} /> */}
<div className="container-fluid">
<div className="row">
- <div className="col-md-6 col-md-offset-3">
+ <div className="col-lg-6 offset-md-3">
<div className="panel-login panel panel-default">
- <div className="panel-heading">
- <h4 className="text-center panel-title">IRI Notes</h4>
+ <div className="card-header bg-secondary border-0">
+ <h4 className="text-center card-title">IRI Notes</h4>
<form onSubmit={this.submit}>
- <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
- <label className="control-label">Nom d'utilisateur</label>
- <input className="form-control" type="text" onChange={this.handleInputChange} name="username" />
- { this.renderErrorMessage(errorMessages, 'username') }
+ <div className="form-group" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
+ <label className="col-form-label text-primary">Nom d'utilisateur</label>
+ <input className="form-control bg-danger text-muted" type="text" onChange={this.handleInputChange} name="username" />
+ {/* { this.renderErrorMessage(errorMessages, 'username') } */}
</div>
- <div className="form-group" validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }>
- <label className="control-label">Mot de passe</label>
- <input className="form-control" type="password" onChange={this.handleInputChange} name="password" />
- { this.renderErrorMessage(errorMessages, 'password') }
+ <div className="form-group" /*validationState={ errorMessages && errorMessages.has('password') ? 'error' : null*/ >
+ <label className="col-form-label text-primary">Mot de passe</label>
+ <input className="form-control bg-danger text-muted" type="password" onChange={this.handleInputChange} name="password" />
+ {/* { this.renderErrorMessage(errorMessages, 'password') } */}
</div>
- { this.renderNonFieldErrors(errorMessages) }
- <button type="submit" className="btn btn-primary btn-lg">Se connecter</button>
+ {/* { this.renderNonFieldErrors(errorMessages) } */}
+ <button type="submit" className="btn btn-primary btn-lg text-secondary">Se connecter</button>
</form>
</div>
</div>
--- a/client/src/components/Login.scss Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Login.scss Fri Aug 31 15:14:18 2018 +0200
@@ -3,10 +3,10 @@
font-weight: bolder;
}
-.control-label {
- color: #769FED;
+label.col-form-label.text-primary {
font-size: 16px;
margin-left: 20%;
+ font-weight: bolder;
}
.form-control {
@@ -26,9 +26,3 @@
margin-left: 35%;
margin-top: 7%;
}
-
-.text-center .text-muted {
- color: #769FED;
- font-size: 16px;
- font-weight: bold;
-}
--- a/client/src/components/Navbar.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Navbar.js Fri Aug 31 15:14:18 2018 +0200
@@ -12,14 +12,15 @@
import { groupSetCurrent } from '../actions/groupActions';
import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
+import CreateSession from './CreateSession';
import NavbarLogin from './NavbarLogin';
import NavbarGroup from './NavbarGroup';
const Online = ({ online }) => {
return (
- <li>
- <a>
- <span className="material-icons navs" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
+ <li className="nav-item">
+ <a className="nav-link">
+ <span className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
</a>
</li>
)
@@ -40,8 +41,8 @@
if (isAuthenticated) {
return (
- <li>
- <a title={title} onClick={clickCb} id={id || null}>
+ <li className="nav-item">
+ <a className="nav-link" title={title} onClick={clickCb} id={id || null}>
<span className={classnames}></span> </a>
</li>
);
@@ -62,6 +63,10 @@
this.state = { modalIsOpen: false };
}
+ componentWillMount() {
+ Modal.setAppElement('body');
+}
+
openModal = () => {
this.setState({modalIsOpen: true});
}
@@ -129,24 +134,29 @@
render() {
return (
- <nav className="navbar navbar-inverse navbar-fixed-top">
+ <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
<div className="container-fluid">
- <div className="navbar-header">
- <a id="brand" className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
- <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
- <span className="sr-only">Toggle navigation</span>
+ <div className="navbar-header">
+ <a id="brand" className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
+ <button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span className="navbar-toggler-icon"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
- <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul className="nav navbar-nav">
- <li>
- <a className="navs" onClick={this.onClickSessions} href="/sessions">Accueil</a>
+ <div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
+ <ul className="navbar-nav mr-auto">
+ <li className="nav-item">
+ <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Accueil</a>
</li>
</ul>
- <ul className="nav navbar-nav navbar-right">
+ <ul className="navbar-nav navbar-center">
+ <li className="nav-item text-secondary">
+ {/* <CreateSession history={this.props.history}/> */}
+ </li>
+ </ul>
+ <ul className="nav navbar-nav ml-auto">
<NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
<SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
<Online {...this.props} />
@@ -161,7 +171,7 @@
>
<div id="logout-modal" className="modal-content text-center">
{/* <div className="modal-body"> */}
- <button type="button" id="logout-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+ <button type="button" id="logout-close-modal-button" className="btn btn-default float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
<span className="material-icons modal-warning">warning</span>
<p className="modal-text">
Certaines données n'ont pas encore été sauvegardées.
@@ -169,7 +179,7 @@
Si vous continuez, elles seront perdues.
</p>
<div className="modal-footer">
- <button type="button" className="btn btn-primary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
+ <button type="button" className="btn btn-primary text-secondary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
</div>
</div>
</Modal>
--- a/client/src/components/Navbar.scss Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Navbar.scss Fri Aug 31 15:14:18 2018 +0200
@@ -8,31 +8,49 @@
#brand {
margin-top: 5px;
- font-size: 30px;
}
-.navbar-nav .navs, .navbar-right .navs {
- font-size: 20px;
- margin-top: 7px;
- background-color: #769FED;
+.username#navbarDropdown {
+ font-size: 24px;
+ font-weight: medium;
+ margin-top:2%;
}
-.navbar-right .navs:focus {
- background-color: #769FED;
+.nav-link {
+ font-size: 20px;
+ margin-top: 8px;
}
#sync-button {
margin-top: 7px;
}
-#groups {
- color: #769FED;
+.dropdown-toggle{
+ cursor: pointer;
+}
+
+.dropdown-item {
font-size: 18px;
font-weight: bold;
- background-color: white;
+ cursor: pointer;
+}
+
+#group-menu-scroll-down {
+ height: auto;
+ max-height: 800%;
+ overflow-y: scroll;
}
-.navs .user-dropdown {
+.create-group {
+ width: 60%;
+ padding-top: 1.5%;
+ margin-top: 2.5%;
+ margin-bottom: 5%;
+ margin-left: 20%;
+ font-size: 14px;
+}
+
+.nav-link .user-dropdown {
font-size: 18px;
font-weight: bold;
@@ -90,15 +108,16 @@
#logout-close-modal-button{
margin-top: -2.5%;
- margin-right: -1%;
+ margin-left: 92%;
background-color: transparent;
border: transparent;
+ color: rgba(#769FED, .4);
}
#logout-close-modal-button:hover{
background-color: transparent;
border: transparent;
- color: #769FED;
+ color:black;
}
.modal-text{
@@ -112,7 +131,7 @@
font-size:60px;
padding:0;
margin-top: 5%;
- margin-right: -5%;
+ margin-right: 3%;
}
#logout-modal-button {
@@ -122,7 +141,3 @@
width: 20%;
font-size: 14px;
}
-
-.modal-footer{
- border: white;
-}
--- a/client/src/components/NavbarGroup.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/NavbarGroup.js Fri Aug 31 15:14:18 2018 +0200
@@ -35,6 +35,7 @@
const {currentGroup, groups, onSelect} = this.props;
const onClickGroup = (e) => {
+ e.preventDefault();
onSelect(e.target.dataset.groupname);
this.hideDropDown();
}
@@ -42,20 +43,20 @@
if (currentGroup) {
const currentGroupName = currentGroup.get('name');
return (
- <li className={`nav-item dropdown navs ${this.state.showDropdown?'show':''}`}>
- <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>
+ <li className={`nav-item dropdown ${this.state.showDropdown?'show':''}`}>
+ <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>
{ currentGroupName }
<span className="caret"></span>
</a>
- <ul className={`dropdown-menu ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
+ <div id="group-menu-scroll-down" className={`dropdown-menu dropdown-menu-right bg-primary border-0 ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
{ groups && groups.map((group, key) => {
const groupName = group.get('name');
const className = (groupName === currentGroupName)?'active':null;
- return <li key={key} className={className} onClick={onClickGroup}><a data-groupname={groupName}>{ groupName }</a></li>
+ return <a key={key} onClick={onClickGroup} className={`dropdown-item bg-primary text-secondary ${className}`} data-groupname={groupName}>{ groupName }</a>
})
}
- <li onClick={onClickGroup} key="-1"><a data-groupname="__create_group__">Créer un groupe...</a></li>
- </ul>
+ <button type="button "onClick={onClickGroup} key="-1" className="dropdown-item btn btn-secondary bg-secondary text-center text-primary create-group" data-groupname="__create_group__">Créer un groupe</button>
+ </div>
</li>
);
} else {
--- a/client/src/components/NavbarLogin.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/NavbarLogin.js Fri Aug 31 15:14:18 2018 +0200
@@ -16,6 +16,7 @@
}
handleClickOutside = (e) => {
+ e.preventDefault();
const currentNode = ReactDOM.findDOMNode(this);
if(!currentNode.contains(e.target)) {
this.hideDropDown();
@@ -47,21 +48,21 @@
if (isAuthenticated) {
return (
- <li className={`nav-item dropdown navs ${this.state.showDropdown?'show':''}`}>
- <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>
+ <li className={`nav-item dropdown ${this.state.showDropdown?'show':''}`}>
+ <a name className="nav-link dropdown-toggle username" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>
{ currentUser.get('username') }
<span className="caret"></span>
</a>
- <ul className={`dropdown-menu ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
- <li><a className="user-dropdown" href="#settings" onClick={this.onClickSettings}>Paramètres</a></li>
- <li><a className="user-dropdown" href="#logout" onClick={onLogout}>Se déconnecter</a></li>
- </ul>
+ <div className={`dropdown-menu dropdown-menu-right bg-primary border-0 ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
+ <a className="dropdown-item bg-primary text-secondary" onClick={this.onClickSettings}>Paramètres</a>
+ <a className="dropdown-item bg-primary text-secondary" onClick={onLogout}>Se déconnecter</a>
+ </div>
</li>
);
} else {
return (
- <li>
- <a className="navs" onClick={this.onClickLogin} href="/login">Se connecter</a>
+ <li className="nav-item">
+ <a className="nav-link" onClick={this.onClickLogin} href="/login">Se connecter</a>
</li>
);
}
--- a/client/src/components/NoteList.scss Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/NoteList.scss Fri Aug 31 15:14:18 2018 +0200
@@ -40,15 +40,16 @@
#delete-note-close-modal-button{
margin-top: -2.5%;
- margin-right: -1%;
+ margin-left: 92%;
background-color: transparent;
border: transparent;
+ color: rgba(#769FED, .4);
}
#delete-note-close-modal-button:hover {
background-color: transparent;
border: transparent;
- color: #769FED;
+ color:black;
}
.modal-text{
--- a/client/src/components/NotesList.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/NotesList.js Fri Aug 31 15:14:18 2018 +0200
@@ -15,6 +15,10 @@
};
}
+ componentWillMount() {
+ Modal.setAppElement('body');
+}
+
openModal = () => {
this.setState({modalIsOpen: true});
}
@@ -90,10 +94,10 @@
onRequestClose={this.handleModalCloseRequest}
>
<div id="delete-note-modal" className="modal-content text-center">
- <button type="button" id="delete-note-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+ <button type="button" id="delete-note-close-modal-button" className="btn btn-secondary float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
<span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette note ?</span>
<div className="modal-footer">
- <button type="button" className="btn btn-primary" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button>
+ <button type="button" className="btn btn-primary text-secondary" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button>
</div>
</div>
</Modal>
--- a/client/src/components/Register.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Register.js Fri Aug 31 15:14:18 2018 +0200
@@ -3,7 +3,7 @@
import { bindActionCreators } from 'redux';
import '../App.css';
import './Register.css';
-import Navbar from './Navbar';
+// import Navbar from './Navbar';
import * as authActions from '../actions/authActions';
class Register extends Component {
@@ -31,46 +31,46 @@
renderErrorMessage(errorMessages, fieldname) {
if (errorMessages && errorMessages.has(fieldname)) {
return errorMessages.get(fieldname).map((message, key) =>
- <p className="help-block" key={ key }>{ message }</p>
+ <p className="form-text" key={ key }>{ message }</p>
);
}
}
render() {
- const errorMessages = this.props.register.get('errorMessages');
+ // const errorMessages = this.props.register.get('errorMessages');
return (
<div>
- <Navbar history={this.props.history} />
+ {/* <Navbar history={this.props.history} /> */}
<div className="container-fluid">
<div className="row">
- <div className="col-md-6 col-md-offset-3">
+ <div className="col-lg-6 offset-md-3">
<div className="panel-login panel panel-default">
- <div className="panel-heading">
- <h4 className="text-center panel-title">IRI Notes</h4>
+ <div className="card-header bg-secondary border-0">
+ <h4 className="text-center card-title">IRI Notes</h4>
<form onSubmit={this.submit}>
- <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
- <label className="control-label">Nom d'utilisateur</label>
- <input className="form-control" type="text" inputRef={ref => { this.username = ref; }} />
- { this.renderErrorMessage(errorMessages, 'username') }
+ <div className="form-group" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
+ <label className="col-form-label text-primary">Nom d'utilisateur</label>
+ <input className="form-control bg-danger text-muted" type="text" /*inputRef={ref => { this.username = ref; }}*/ />
+ {/* { this.renderErrorMessage(errorMessages, 'username') } */}
</div>
- <div className="form-group" validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }>
- <label className="control-label">Email</label>
- <input className="form-control" type="email" inputRef={ref => { this.email = ref; }} />
- { this.renderErrorMessage(errorMessages, 'email') }
+ <div className="form-group" /*validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }*/>
+ <label className="col-form-label text-primary">Email</label>
+ <input className="form-control bg-danger text-muted" type="email" /*inputRef={ref => { this.email = ref; }}*/ />
+ {/* { this.renderErrorMessage(errorMessages, 'email') } */}
</div>
- <div className="form-group" validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }>
- <label className="control-label">Mot de passe</label>
- <input className="form-control" type="password" inputRef={ref => { this.password1 = ref; }} />
- { this.renderErrorMessage(errorMessages, 'password1') }
+ <div className="form-group" /*validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }*/>
+ <label className="col-form-label text-primary">Mot de passe</label>
+ <input className="form-control bg-danger text-muted" type="password" /*inputRef={ref => { this.password1 = ref; }}*/ />
+ {/* { this.renderErrorMessage(errorMessages, 'password1') } */}
</div>
- <div className="form-group" validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }>
- <label className="control-label">Confirmer le mot de passe</label>
- <input className="form-control" type="password" inputRef={ref => { this.password2 = ref; }} />
- { this.renderErrorMessage(errorMessages, 'password2') }
+ <div className="form-group" /*validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }*/>
+ <label className="col-form-label text-primary">Confirmer le mot de passe</label>
+ <input className="form-control bg-danger text-muted" type="password" /*inputRef={ref => { this.password2 = ref; }}*/ />
+ {/* { this.renderErrorMessage(errorMessages, 'password2') } */}
</div>
- <button type="submit" className="btn btn-primary btn-lg">S'inscrire</button>
+ <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary">S'inscrire</button>
</form>
</div>
</div>
--- a/client/src/components/Register.scss Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Register.scss Fri Aug 31 15:14:18 2018 +0200
@@ -3,9 +3,10 @@
font-weight: bolder;
}
-.control-label {
+label.col-form-label.text-primary {
font-size: 16px;
margin-left: 20%;
+ font-weight: bolder;
}
.form-control {
@@ -26,8 +27,3 @@
margin-top: 7%;
}
-.text-center .text-muted {
- color: #769FED;
- font-size: 16px;
- font-weight: bold;
-}
--- a/client/src/components/Session.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Session.js Fri Aug 31 15:14:18 2018 +0200
@@ -38,7 +38,7 @@
<section className="editor-fixed">
<div className="container-fluid">
<div className="row">
- <div className="col-md-9 col-md-offset-3">
+ <div className="col-lg-9 offset-md-3">
<NoteInput
session={this.props.currentSession}
autoSubmit={this.props.autoSubmit}
--- a/client/src/components/SessionForm.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/SessionForm.js Fri Aug 31 15:14:18 2018 +0200
@@ -55,10 +55,10 @@
return (
<div className="panel-default">
- <div className="panel-body">
+ <div className="card-body">
<form onSubmit={ e => { e.preventDefault() } }>
<div className="form-group">
- <label className="control-label">Titre</label>
+ <label className="col-form-label text-primary">Titre</label>
<input className="form-control"
name="title"
defaultValue={ this.props.currentSession.title }
@@ -68,7 +68,7 @@
/>
</div>
<div className="form-group">
- <label className="control-label">Description</label>
+ <label className="col-form-label text-primary">Description</label>
<input className="form-control"
type="textarea"
name="description"
@@ -78,11 +78,11 @@
/>
</div>
<div className="form-group">
- <label className="control-label">Group</label>
+ <label className="col-form-label">Group</label>
<p>{this.props.currentSession.group}</p>
</div>
<div className="form-group">
- <label className="control-label" onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label>
+ <label className="col-form-label" onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label>
<div className={ `collapse ${this.state.protocolOpen?'in':''}`} >
<pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
</div>
--- a/client/src/components/SessionList.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/SessionList.js Fri Aug 31 15:14:18 2018 +0200
@@ -25,6 +25,10 @@
this.hide = this.hide.bind(this);
}
+ componentWillMount() {
+ Modal.setAppElement('body');
+}
+
doSomething(e){
e.preventDefault();
console.log(e.target.innerHTML);
@@ -102,27 +106,27 @@
render() {
return (
<div>
- <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
<Navbar history={this.props.history} />
<div className="top-fade"></div>
+ <button id="session-button" type="button" className="btn btn-primary btn-lg text-secondary" onClick={ this.createSession}>Créer une nouvelle session</button>
<div className="container-fluid">
<div className="row">
{this.props.sessions.map((session) =>
<div>
- <div className="col-md-4 session" key={session.get('_id')}>
- <a className="sessions" href="#session" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
- <span className="session-title">{session.title || 'Session sans titre'}<br /></span>
+ <div className="col-lg-4 session" key={session.get('_id')}>
+ <a className="sessions" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
+ <span className="session-title text-primary">{session.title || 'Session sans titre'}<br /></span>
<span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
- <span className="session-description">{session.description}<br /></span>
+ <span className="session-description text-dark">{session.description}<br /></span>
</a>
- <button className="btn btn-link pull-left" key={session.get('_id')} id="toggle-edit" type="button" onClick={this.toggleShow} onBlur={this.hide}>
+ <button className="btn btn-link float-left" key={session.get('_id')} id="toggle-edit" type="button" onClick={this.toggleShow} onBlur={this.hide}>
<span className="material-icons edit">edit</span>
</button>
{
this.state.show &&
(
- <button type="button" className="btn btn-link pull-left" style={{display: 'block'}} onClick={ this.onClickDelete.bind(this, session) }>
- <span className="material-icons delete">delete</span>
+ <button type="button" className="btn btn-link float-left" style={{display: 'block'}} onClick={ this.onClickDelete.bind(this, session) }>
+ <span className="material-icons delete text-dark">delete</span>
</button>
)
}
@@ -138,12 +142,10 @@
onRequestClose={this.handleModalCloseRequest}
>
<div id="delete-session-modal" className="modal-content text-center">
- <button type="button" id="delete-session-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
- {/* <div className="modal-body"> */}
+ <button type="button" id="delete-session-close-modal-button" className="btn btn-secondary float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
<span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette session ?</span>
- {/* </div> */}
- <div className="modal-footer">
- <button type="button" className="btn btn-primary" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button>
+ <div className="modal-footer text-center">
+ <button type="button" className="btn btn-primary text-secondary" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button>
</div>
</div>
</Modal>
--- a/client/src/components/SessionList.scss Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/SessionList.scss Fri Aug 31 15:14:18 2018 +0200
@@ -4,7 +4,7 @@
}
a.sessions{
- text-decoration: none;
+ cursor: pointer;
}
.session {
@@ -14,13 +14,11 @@
}
span.session-title {
- color: #769FED;
font-size: 20px;
font-weight: 600;
}
span.session-description {
- color:rgb(54, 54, 54);
font-size: 12px;
font-weight: 500
}
@@ -39,7 +37,6 @@
.delete{
font-size: 16px;
- color: black;
}
#delete-session-modal{
@@ -84,15 +81,16 @@
#delete-session-close-modal-button{
margin-top: -2.5%;
- margin-right: -1%;
+ margin-left: 92%;
background-color: transparent;
border: transparent;
+ color: rgba(#769FED, .4);
}
#delete-session-close-modal-button:hover{
background-color: transparent;
border: transparent;
- color: #769FED;
+ color:black;
}
.modal-text{
@@ -108,7 +106,3 @@
width: 20%;
font-size: 14px;
}
-
-.modal-footer{
- border: white;
-}
--- a/client/src/components/SessionSummary.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/SessionSummary.js Fri Aug 31 15:14:18 2018 +0200
@@ -9,7 +9,7 @@
<li className="list-group-item" key={note.get('_id')}>
<a href={'#note-' + note.get('_id')}>
<span className="text-muted">{formatTimestamp(note.startedAt)} → {formatTimestamp(note.finishedAt)}</span>
- <span className="pull-right">{_.words(note.plain).length} words</span>
+ <span className="float-right">{_.words(note.plain).length} words</span>
</a>
</li>
)}
--- a/client/src/components/Settings.js Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Settings.js Fri Aug 31 15:14:18 2018 +0200
@@ -4,6 +4,7 @@
import '../App.css';
import Navbar from './Navbar';
import * as userActions from '../actions/userActions';
+import './Settings.css';
class Settings extends Component {
@@ -25,11 +26,11 @@
<Navbar history={this.props.history} />
<div className="container-fluid">
<div className="row">
- <div className="col-md-6 col-md-offset-3">
+ <div className="col-lg-6 offset-md-3">
<form>
<div className="form-group">
- <label className="control-label">Prénom</label>
- <input className="form-control"
+ <label className="col-form-label text-primary">Prénom</label>
+ <input className="form-control bg-danger text-muted"
name="firstname"
defaultValue={ firstname }
placeholder="Entrez un prénom"
@@ -37,8 +38,8 @@
/>
</div>
<div className="form-group">
- <label className="control-label">Nom</label>
- <input className="form-control"
+ <label className="col-form-label text-primary">Nom</label>
+ <input className="form-control bg-danger text-muted"
name="lastname"
defaultValue={ lastname }
placeholder="Entrez un nom"
@@ -46,7 +47,7 @@
/>
</div>
</form>
- <button type="submit" className="btn btn-primary btn-lg" onClick={this.updateSettings}>Enregistrer</button>
+ <button type="submit" className="btn btn-primary btn-lg text-secondary" onClick={this.updateSettings}>Enregistrer</button>
</div>
</div>
</div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Settings.scss Fri Aug 31 15:14:18 2018 +0200
@@ -0,0 +1,23 @@
+label.col-form-label.text-primary {
+ font-size: 16px;
+ margin-left: 20%;
+ font-weight: bolder;
+}
+
+.form-control {
+ width: 60%;
+ margin-left: 20%;
+}
+
+form {
+ padding-top: 10%;
+}
+
+button.btn.btn-primary {
+ font-size: 18px;
+ font-weight: bold;
+ padding: 15px 15px;
+ width: 30%;
+ margin-left: 35%;
+ margin-top: 7%;
+}
--- a/client/src/index.scss Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/index.scss Fri Aug 31 15:14:18 2018 +0200
@@ -1,5 +1,6 @@
-@import './sass/bootstrap-custom';
-@import './sass/material-font';
+@import './scss/custom';
+@import './scss/material-font';
+
@font-face {
font-family: 'Rubik';
@@ -16,6 +17,6 @@
body {
margin: 0;
- padding-top: $navbar-height + $navbar-margin-bottom;
+ // padding-top: $navbar-height + $navbar-margin-bottom;
font-family: 'Rubik', sans-serif;
}
--- a/client/src/sass/_bootstrap-custom.scss Wed Aug 29 11:02:36 2018 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,87 +0,0 @@
-/*!
- * Bootstrap v3.3.7 (http://getbootstrap.com)
- * Copyright 2011-2016 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
-
-$btn-primary-bg : #769FED;
-$btn-primary-border : #769FED;
-
-//NavBar
-$navbar-inverse-bg : #769FED;
-$navbar-inverse-border : #769FED;
-$navbar-inverse-link-color : white;
-$navbar-inverse-link-active-bg : #769FED;
-$nav-link-padding : 30px 15px;
-$navbar-inverse-toggle-hover-bg : white;
-$dropdown-bg : #769FED;
-$dropdown-border : #769FED;
-$dropdown-link-color : white;
-$dropdown-link-active-color : #769FED;
-$dropdown-link-hover-color : #769FED;
-
-//Login and Register
-$panel-default-border : white;
-$panel-inner-border : white;
-$panel-default-heading-bg : white;
-$panel-default-text : black;
-$input-bg : rgba(196, 196, 196, 0.5);
-$input-bg-disabled : rgba(196, 196, 196, 0.5);
-$input-border : white;
-// $input-color : white;
-
-
-
-
-// Core variables and mixins
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
-
-// Reset and dependencies
-@import "bootstrap/normalize";
-@import "bootstrap/print";
-@import "bootstrap/glyphicons";
-
-// Core CSS
-@import "bootstrap/scaffolding";
-@import "bootstrap/type";
-@import "bootstrap/code";
-@import "bootstrap/grid";
-@import "bootstrap/tables";
-@import "bootstrap/forms";
-@import "bootstrap/buttons";
-
-// Components
-@import "bootstrap/component-animations";
-@import "bootstrap/dropdowns";
-@import "bootstrap/button-groups";
-@import "bootstrap/input-groups";
-@import "bootstrap/navs";
-@import "bootstrap/navbar";
-@import "bootstrap/breadcrumbs";
-@import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/labels";
-@import "bootstrap/badges";
-@import "bootstrap/jumbotron";
-@import "bootstrap/thumbnails";
-@import "bootstrap/alerts";
-@import "bootstrap/progress-bars";
-@import "bootstrap/media";
-@import "bootstrap/list-group";
-@import "bootstrap/panels";
-@import "bootstrap/responsive-embed";
-@import "bootstrap/wells";
-@import "bootstrap/close";
-
-// Components w/ JavaScript
-@import "bootstrap/modals";
-@import "bootstrap/tooltip";
-@import "bootstrap/popovers";
-@import "bootstrap/carousel";
-
-// Utility classes
-@import "bootstrap/utilities";
-@import "bootstrap/responsive-utilities";
--- a/client/src/sass/_material-font.scss Wed Aug 29 11:02:36 2018 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,45 +0,0 @@
-$material-icon-font-path: '~material-design-icons/iconfont/';
-
-@font-face {
- font-family: 'Material Icons';
- font-style: normal;
- font-weight: 400;
- src: url('#{$material-icon-font-path}MaterialIcons-Regular.eot'); /* For IE6-8 */
- src: local('Material Icons'),
- local('MaterialIcons-Regular'),
- url('#{$material-icon-font-path}MaterialIcons-Regular.woff2') format('woff2'),
- url('#{$material-icon-font-path}MaterialIcons-Regular.woff') format('woff'),
- url('#{$material-icon-font-path}MaterialIcons-Regular.ttf') format('truetype');
-};
-
-.material-icons {
- font-family: 'Material Icons';
- font-weight: normal;
- font-style: normal;
- font-size: 24px; /* Preferred icon size */
- display: inline-block;
- line-height: 1;
- text-transform: none;
- letter-spacing: normal;
- word-wrap: normal;
- white-space: nowrap;
- direction: ltr;
-
- /* Support for all WebKit browsers. */
- -webkit-font-smoothing: antialiased;
- /* Support for Safari and Chrome. */
- text-rendering: optimizeLegibility;
-
- /* Support for Firefox. */
- -moz-osx-font-smoothing: grayscale;
-
- /* Support for IE. */
- font-feature-settings: 'liga';
-}
-
-.material-icons {
- &.md-18 { font-size: 18px; }
- &.md-24 { font-size: 24px; }
- &.md-36 { font-size: 36px; }
- &.md-48 { font-size: 48px; }
-}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/_custom.scss Fri Aug 31 15:14:18 2018 +0200
@@ -0,0 +1,35 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+
+$theme-colors: (
+ "primary": #769FED,
+ "secondary": white,
+ "danger": rgba(196, 196, 196, .5)
+);
+
+$link-color: theme-color("secondary");
+$link-hover-color: darken($link-color, 15%);
+
+$component-active-bg: theme-color("secondary");
+
+//Dropdowns
+$dropdown-padding-y: 1rem;
+$dropdown-link-color: theme-color("secondary");
+$dropdown-item-padding-y: .7rem;
+$dropdown-item-padding-x: .5rem;
+
+
+
+// Navs
+$nav-link-padding-y: .2rem;
+$navbar-brand-font-size: 30px;
+$navbar-light-color: darken((theme-color("secondary")), 2%);
+$navbar-light-hover-color: theme-color("secondary");
+$navbar-light-active-color: theme-color("secondary");
+$navbar-light-toggler-border-color: transparent;
+
+//Modals
+$modal-content-border-width: .1rem;
+
+
+@import "bootstrap/scss/bootstrap";
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/_material-font.scss Fri Aug 31 15:14:18 2018 +0200
@@ -0,0 +1,45 @@
+$material-icon-font-path: '~material-design-icons/iconfont/';
+
+@font-face {
+ font-family: 'Material Icons';
+ font-style: normal;
+ font-weight: 400;
+ src: url('#{$material-icon-font-path}MaterialIcons-Regular.eot'); /* For IE6-8 */
+ src: local('Material Icons'),
+ local('MaterialIcons-Regular'),
+ url('#{$material-icon-font-path}MaterialIcons-Regular.woff2') format('woff2'),
+ url('#{$material-icon-font-path}MaterialIcons-Regular.woff') format('woff'),
+ url('#{$material-icon-font-path}MaterialIcons-Regular.ttf') format('truetype');
+};
+
+.material-icons {
+ font-family: 'Material Icons';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px; /* Preferred icon size */
+ display: inline-block;
+ line-height: 1;
+ text-transform: none;
+ letter-spacing: normal;
+ word-wrap: normal;
+ white-space: nowrap;
+ direction: ltr;
+
+ /* Support for all WebKit browsers. */
+ -webkit-font-smoothing: antialiased;
+ /* Support for Safari and Chrome. */
+ text-rendering: optimizeLegibility;
+
+ /* Support for Firefox. */
+ -moz-osx-font-smoothing: grayscale;
+
+ /* Support for IE. */
+ font-feature-settings: 'liga';
+}
+
+.material-icons {
+ &.md-18 { font-size: 18px; }
+ &.md-24 { font-size: 24px; }
+ &.md-36 { font-size: 36px; }
+ &.md-48 { font-size: 48px; }
+}
--- a/client/yarn.lock Wed Aug 29 11:02:36 2018 +0200
+++ b/client/yarn.lock Fri Aug 31 15:14:18 2018 +0200
@@ -1203,6 +1203,10 @@
version "3.3.7"
resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
+bootstrap@^4.1.3:
+ version "4.1.3"
+ resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
+
boxen@^1.2.1:
version "1.3.0"
resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@@ -3858,6 +3862,10 @@
dependencies:
ms "^2.0.0"
+i18next@^11.6.0:
+ version "11.6.0"
+ resolved "https://registry.yarnpkg.com/i18next/-/i18next-11.6.0.tgz#e0047aa3e3a0080f6f318426f90597cbb0d6ddd5"
+
iconv-lite@0.4.19:
version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"