--- a/client/src/App.js Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/App.js Mon Sep 03 20:02:14 2018 +0200
@@ -9,11 +9,11 @@
return (
<div>
<Navbar history={this.props.history} />
- <div className="container-fluid">
+ <div className="container-fluid"></div>
<div className="row">
- <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 className="col-lg-6 offset-md-3 text-center mt-5 pt-5">
+ <h5 className="font-weight-bold text-center text-lg mt-5">Bienvenue sur</h5>
+ <h4 className="font-weight-bold text-center text-lg">IRI Notes</h4>
</div>
</div>
</div>
--- a/client/src/App.scss Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/App.scss Mon Sep 03 20:02:14 2018 +0200
@@ -194,27 +194,5 @@
text-decoration-style: dotted;
}
-.editor-fixed {
- border-top: 1px solid #efefef;
- background-color: #fff;
- padding: 20px 0;
-}
-
-.panel-login,
-.panel-register {
- margin-top: 60px;
-}
-
-#home-text{
- color:black;
- font-size: 70px;
- font-weight: bolder;
- background-color:white;
- border-color:white;
-}
-
-#welcome {
- font-size: 25px;
- font-weight: bolder;
}
--- a/client/src/components/CreateGroup.js Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/CreateGroup.js Mon Sep 03 20:02:14 2018 +0200
@@ -5,6 +5,7 @@
import Navbar from './Navbar';
import * as authActions from '../actions/authActions';
import { getOnline, getCreateGroup } from '../selectors/authSelectors';
+import './CreateGroup.css';
class CreateGroup extends Component {
@@ -67,7 +68,7 @@
render() {
- const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']);
+ // const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']);
const okDisabled = (!this.state.name || this.state.name.trim() === "");
return (
@@ -75,25 +76,25 @@
<Navbar history={this.props.history} />
<div className="container-fluid">
<div className="row">
- <div className="col-lg-6 offset-md-3">
- <div className="panel-login panel panel-default">
- <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="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 className="col-lg-6 offset-md-5">
+ <div className="panel-login panel panel-default d-flex justify-content-end">
+ <div className="card-header bg-primary w-50">
+ <h5 className="text-center text-secondary font-weight-bold">Nouveau groupe</h5>
+ <form className="mt-3" onSubmit={this.submit}>
+ <div className="form-group mb-2" /*validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }*/>
+ <label className="col-from-label text-secondary font-weight-bold mt-2">Nom</label>
+ <input className="form-control bg-secondary text-primary border-0 w-100" type="text" onChange={this.handleInputChange} name="name" placeholder="Entrez un nom de groupe"/>
+ {/* { this.renderErrorMessage(errorMessages, 'name') } */}
</div>
- <div className="form-group" validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
- <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 className="form-group mb-2" /*validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }*/>
+ <label className="col-form-label text-secondary font-weight-bold mt-2">Description</label>
+ <textarea className="form-control bg-secondary text-primary border-0 w-100" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Entrez une description de groupe" row="3"></textarea>
+ {/* { 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-secondary btn-lg btn-block" onClick={this.cancel}>Annuler</button></div>
+ {/* { this.renderNonFieldErrors(errorMessages) } */}
+ <div className="text-center">
+ <button type="submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3" disabled={okDisabled}>Créer</button>
+ <button type="button" className="btn btn-danger text-muted btn-lg font-weight-bold" onClick={this.cancel}>Annuler</button>
</div>
</form>
</div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/CreateGroup.scss Mon Sep 03 20:02:14 2018 +0200
@@ -0,0 +1,7 @@
+div.card-header.bg-primary.w-50 {
+ border-radius: 0% 0% 3% 3%;
+}
+
+#session-button:hover{
+ font-weight: bolder;
+}
--- a/client/src/components/CreateSession.js Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/CreateSession.js Mon Sep 03 20:02:14 2018 +0200
@@ -140,24 +140,23 @@
return (
<div>
- {/* <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={ this.openModal}>Créer une nouvelle session</button> */}
- <a id="session-button" onClick={this.openSessionModal}>Créer une nouvelle session</a>
+ <a id="session-button" className="text-center" onClick={this.openSessionModal}>Créer une nouvelle session</a>
<Modal
- className="Modal__Bootstrap modal-dialog bg-primary"
+ className="Modal__Bootstrap modal-dialog"
// closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
>
- <div className="panel-default">
- <div className="card-body rouded-bottom">
+ <div className="modal-content bg-primary w-75">
+ <div className="modal-body">
<form onSubmit={ e => { e.preventDefault() } }>
- <div className="form-group">
- <label className="col-form-label text-secondary">Group</label>
+ <div className="form-group ml-5 pl-5">
+ <label className="col-form-label text-secondary">Groupe</label>
{/* <p>{this.props.currentSession.group}</p> */}
</div>
<div className="form-group">
- <label className="col-form-label text-secondary">Titre</label>
- <input className="form-control text-primary"
+ <label className="col-form-label text-secondary font-weight-bold pt-3">Titre</label>
+ <input className="form-control text-primary w-100"
name="title"
// defaultValue={ this.props.currentSession.title }
onChange={ this.onChange }
@@ -166,24 +165,24 @@
/>
</div>
<div className="form-group">
- <label className="col-form-label text-secondary">Description</label>
- <input className="form-control text-primary"
+ <label className="col-form-label text-secondary font-weight-bold pt-3 mt-3">Description</label>
+ <textarea className="form-control text-primary w-100"
type="textarea"
name="description"
// defaultValue={ this.props.currentSession.description }
onChange={ this.onChange }
placeholder="Entrez une description"
- />
+ row="3"></textarea>
</div>
<div className="form-group">
- <label className="col-form-label text-secondary" onClick={this.toggleProtocol}>Protocole de la prise de note {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label>
+ <label className="col-form-label text-secondary font-weight-bold mt-5 ml-5" onClick={this.toggleProtocol}>Protocole de la prise de note {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> */}
<pre>{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre>
</div>
</div>
<div className="text-center">
- <button id="create-button" type="submit" className="btn btn-secondary btn-lg text-primary" onClick={this.createSession}>Commencer</button>
+ <button id="create-button" type="submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3" onClick={this.createSession}>Commencer</button>
</div>
</form>
</div>
--- a/client/src/components/CreateSession.scss Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/CreateSession.scss Mon Sep 03 20:02:14 2018 +0200
@@ -4,23 +4,10 @@
#session-button {
font-size: 22px;
- font-weight: bold;
cursor: pointer;
}
-label.col-form-label.text-secondary {
- font-size: 16px;
- margin-left: 20%;
- font-weight: bolder;
-}
-
.material-icons.protocol-toggle {
font-size: 1rem;
cursor: pointer;
}
-
-#create-button{
- font-weight: bold;
- margin: 5%;
-
-}
--- a/client/src/components/Login.js Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Login.js Mon Sep 03 20:02:14 2018 +0200
@@ -72,21 +72,23 @@
<div className="row">
<div className="col-lg-6 offset-md-3">
<div className="panel-login panel panel-default">
- <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="col-form-label text-primary">Nom d'utilisateur</label>
+ <div className="card-header bg-secondary border-0 mt-5 pt-5">
+ <h4 className="text-center card-title font-weight-bold text-lg">IRI Notes</h4>
+ <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}>
+ <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
+ <label className="col-form-label text-primary font-weight-bold mt-2">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="col-form-label text-primary">Mot de passe</label>
+ <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password') ? 'error' : null*/ >
+ <label className="col-form-label text-primary font-weight-bold mt-2">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 text-secondary">Se connecter</button>
+ <div className="text-center mr-5 pr-5">
+ <button type="submit" className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3">Se connecter</button>
+ </div>
</form>
</div>
</div>
--- a/client/src/components/Login.scss Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Login.scss Mon Sep 03 20:02:14 2018 +0200
@@ -1,28 +1,8 @@
-h4.text-center {
- font-size: 50px;
- font-weight: bolder;
-}
-
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/components/Navbar.js Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Navbar.js Mon Sep 03 20:02:14 2018 +0200
@@ -137,7 +137,7 @@
<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>
+ <a 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>
@@ -153,7 +153,7 @@
</ul>
<ul className="navbar-nav navbar-center">
<li className="nav-item text-secondary">
- {/* <CreateSession history={this.props.history}/> */}
+ <CreateSession history={this.props.history}/>
</li>
</ul>
<ul className="nav navbar-nav ml-auto">
@@ -164,28 +164,26 @@
</ul>
</div>
<Modal
- className="Modal__Bootstrap modal-dialog"
+ className="Modal__Bootstrap modal-dialog mt-5 pt-5"
// closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
>
- <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 float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+ <div id="logout-modal" className="modal-content">
+ <span id="logout-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
+ <div className="modal-body text-center">
<span className="material-icons modal-warning">warning</span>
<p className="modal-text">
Certaines données n'ont pas encore été sauvegardées.
<br />
Si vous continuez, elles seront perdues.
</p>
- <div className="modal-footer">
- <button type="button" className="btn btn-primary text-secondary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
+ <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
</div>
</div>
</Modal>
</div>
</nav>
-
);
}
}
--- a/client/src/components/Navbar.scss Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Navbar.scss Mon Sep 03 20:02:14 2018 +0200
@@ -6,23 +6,12 @@
color: white;
}
-#brand {
- margin-top: 5px;
-}
-
.username#navbarDropdown {
font-size: 24px;
- font-weight: medium;
- margin-top:2%;
}
.nav-link {
font-size: 20px;
- margin-top: 8px;
-}
-
-#sync-button {
- margin-top: 7px;
}
.dropdown-toggle{
@@ -31,7 +20,6 @@
.dropdown-item {
font-size: 18px;
- font-weight: bold;
cursor: pointer;
}
@@ -42,34 +30,14 @@
}
.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 {
+.nav-link .dropdown-toggle .username .font-weight-bold {
font-size: 18px;
- font-weight: bold;
-
-}
-
-.ReactModal__Overlay {
- margin-top: 5%;
-}
-
-.modal-footer .btn {
- margin-top: 40px;
- padding: 16px;
- font-weight: bold;
}
#logout-modal{
- padding-top: 2%;
- margin-top: 20%;
-
-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.5s; /* Firefox < 16 */
-ms-animation: fadein 0.5s; /* Internet Explorer */
@@ -107,11 +75,10 @@
}
#logout-close-modal-button{
- margin-top: -2.5%;
- margin-left: 92%;
background-color: transparent;
border: transparent;
color: rgba(#769FED, .4);
+ cursor: pointer;
}
#logout-close-modal-button:hover{
@@ -120,24 +87,11 @@
color:black;
}
-.modal-text{
- margin-top: 10%;
- font-size: 16px;
- font-weight: 500;
-}
-
.modal-warning{
color:#F95B5B;
font-size:60px;
- padding:0;
- margin-top: 5%;
- margin-right: 3%;
}
#logout-modal-button {
- padding: 1.5%;
- margin-top: 5%;
- margin-right: 40%;
- width: 20%;
font-size: 14px;
}
--- a/client/src/components/NavbarGroup.js Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/NavbarGroup.js Mon Sep 03 20:02:14 2018 +0200
@@ -48,11 +48,11 @@
{ currentGroupName }
<span className="caret"></span>
</a>
- <div id="group-menu-scroll-down" className={`dropdown-menu dropdown-menu-right bg-primary border-0 ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
+ <div id="group-menu-scroll-down" className={`dropdown-menu dropdown-menu-right shadow py-1 pt-3 mb-5 mt-2 bg-secondary border border-primary ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
{ groups && groups.map((group, key) => {
const groupName = group.get('name');
const className = (groupName === currentGroupName)?'active':null;
- return <a key={key} onClick={onClickGroup} className={`dropdown-item bg-primary text-secondary ${className}`} data-groupname={groupName}>{ groupName }</a>
+ return <a key={key} onClick={onClickGroup} className={`dropdown-item bg-secondary text-primary font-weight-bold ${className}`} data-groupname={groupName}>{ groupName }</a>
})
}
<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>
--- a/client/src/components/NavbarLogin.js Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/NavbarLogin.js Mon Sep 03 20:02:14 2018 +0200
@@ -49,13 +49,13 @@
return (
<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}>
+ <a name className="nav-link dropdown-toggle username font-weight-bold" 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>
<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>
+ <a className="dropdown-item bg-primary text-secondary font-weight-bold" onClick={this.onClickSettings}>Paramètres</a>
+ <a className="dropdown-item bg-primary text-secondary font-weight-bold" onClick={onLogout}>Se déconnecter</a>
</div>
</li>
);
--- a/client/src/components/NoteList.scss Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/NoteList.scss Mon Sep 03 20:02:14 2018 +0200
@@ -1,7 +1,4 @@
#delete-note-modal{
- padding-top: 2%;
- margin-top: 30%;
-
-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.5s; /* Firefox < 16 */
-ms-animation: fadein 0.5s; /* Internet Explorer */
@@ -39,11 +36,10 @@
}
#delete-note-close-modal-button{
- margin-top: -2.5%;
- margin-left: 92%;
background-color: transparent;
border: transparent;
color: rgba(#769FED, .4);
+ cursor: pointer;
}
#delete-note-close-modal-button:hover {
@@ -53,19 +49,9 @@
}
.modal-text{
- margin-top: 10%;
font-size: 16px;
- font-weight: 500;
}
#delete-note-modal-button {
- padding: 1.5%;
- margin-top: 5%;
- margin-right: 40%;
- width: 20%;
font-size: 14px;
}
-
-.modal-footer{
- border: white;
-}
--- a/client/src/components/NotesList.js Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/NotesList.js Mon Sep 03 20:02:14 2018 +0200
@@ -88,20 +88,19 @@
)}
<Modal
- className="Modal__Bootstrap modal-dialog"
+ className="Modal__Bootstrap modal-dialog mt-5 pt-5 justify-content-lg-center"
// closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
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-secondary float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+ <div id="delete-note-modal" className="modal-content">
+ <span id="delete-note-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
+ <div className="modal-body text-center">
<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 text-secondary" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button>
+ <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mt-3" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button>
</div>
</div>
</Modal>
-
</div>
);
}
--- a/client/src/components/Register.js Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Register.js Mon Sep 03 20:02:14 2018 +0200
@@ -47,30 +47,32 @@
<div className="row">
<div className="col-lg-6 offset-md-3">
<div className="panel-login panel panel-default">
- <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="col-form-label text-primary">Nom d'utilisateur</label>
+ <div className="card-header bg-secondary border-0 mt-5 pt-5">
+ <h4 className="text-center card-title font-weight-bold text-lg" onClick={this.onClickHome}>IRI Notes</h4>
+ <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}>
+ <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
+ <label className="col-form-label text-primary font-weight-bold mt-2">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="col-form-label text-primary">Email</label>
+ <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }*/>
+ <label className="col-form-label text-primary font-weight-bold mt-2">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="col-form-label text-primary">Mot de passe</label>
+ <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }*/>
+ <label className="col-form-label text-primary font-weight-bold mt-2">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="col-form-label text-primary">Confirmer le mot de passe</label>
+ <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }*/>
+ <label className="col-form-label text-primary font-weight-bold mt-2">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" onClick={this.submit} className="btn btn-primary btn-lg text-secondary">S'inscrire</button>
+ <div className="text-center mr-5 pr-5">
+ <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3">S'inscrire</button>
+ </div>
</form>
</div>
</div>
--- a/client/src/components/Register.scss Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Register.scss Mon Sep 03 20:02:14 2018 +0200
@@ -1,29 +1,8 @@
-h4.text-center {
- font-size: 50px;
- font-weight: bolder;
-}
-
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/components/SessionList.js Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/SessionList.js Mon Sep 03 20:02:14 2018 +0200
@@ -13,17 +13,11 @@
class SessionList extends Component {
- constructor(props) {
- super(props);
- this.state = {
+ state = {
show: false,
modalIsOpen: false,
sessionToDelete: null,
}
- this.doSomething = this.doSomething.bind(this);
- this.toggleShow = this.toggleShow.bind(this);
- this.hide = this.hide.bind(this);
- }
componentWillMount() {
Modal.setAppElement('body');
@@ -34,17 +28,6 @@
console.log(e.target.innerHTML);
}
- toggleShow(){
- this.setState({show: !this.state.show});
- }
-
- hide(e){
- if(e && e.relatedTarget){
- e.relatedTarget.click();
- }
- this.setState({show: false});
- }
-
openModal = () => {
this.setState({modalIsOpen: true});
}
@@ -107,45 +90,36 @@
return (
<div>
<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>
+ {/* <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">
+ <div className="row mt-5 pt-5">
{this.props.sessions.map((session) =>
- <div>
- <div className="col-lg-4 session" key={session.get('_id')}>
+ <div className="col-lg-4" id="session">
+ <div className="col-md-auto m-4 p-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 text-dark">{session.description}<br /></span>
</a>
- <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 type="button" id="delete" className="btn btn-link float-left" onClick={ this.onClickDelete.bind(this, session) }>
+ <span className="material-icons delete text-dark">delete</span>
</button>
- {
- this.state.show &&
- (
- <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>
- )
- }
</div>
</div>
)}
</div>
</div>
<Modal
- className="Modal__Bootstrap modal-dialog"
+ className="Modal__Bootstrap modal-dialog mt-5 pt-5 justify-content-lg-center"
// closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
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-secondary float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+ <div id="delete-session-modal" className="modal-content">
+ <span id="delete-session-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
+ <div className="modal-body text-center">
<span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette session ?</span>
- <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>
+ <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mt-3" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button>
</div>
</div>
</Modal>
--- a/client/src/components/SessionList.scss Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/SessionList.scss Mon Sep 03 20:02:14 2018 +0200
@@ -1,34 +1,56 @@
-.top-fade {
- width: max-content;
- height: 80px;
-}
-
a.sessions{
cursor: pointer;
}
-.session {
- padding-top: 5%;
- padding-bottom: 1%;
- padding-left: 5%;
+#delete {
+ // opacity: 0;
+ // display: none;
+ -webkit-transition: .5s all;
+ -webkit-transition-delay: 5s;
+ -moz-transition: .5s all;
+ -moz-transition-delay: 5s;
+ -ms-transition: .5s all;
+ -ms-transition-delay: 5s;
+ -o-transition: .5s all;
+ -o-transition-delay: 5s;
+ transition: .5s all;
+ transition-delay: 5s;
}
+#delete:hover {
+ // opacity: 1;
+ display: inline-block;
+ -webkit-transition-delay: 0s;
+ -moz-transition-delay: 0s;
+ -ms-transition-delay: 0s;
+ -o-transition-delay: 0s;
+ transition-delay: 0s;
+}
+
+.sessions:hover ~ #delete {
+ // opacity: 1;
+ display: inline-block;
+ -webkit-transition-delay: 0s;
+ -moz-transition-delay: 0s;
+ -ms-transition-delay: 0s;
+ -o-transition-delay: 0s;
+ transition-delay: 0s;
+}
+
+.sessions:hover {
+ opacity: .7;
+}
+
+
span.session-title {
font-size: 20px;
- font-weight: 600;
}
span.session-description {
font-size: 12px;
- font-weight: 500
}
span.session-date {
font-size: 13px;
- font-weight: 700;
-}
-
-#toggle-edit {
- padding-top:-20%;
}
.edit{
@@ -40,9 +62,6 @@
}
#delete-session-modal{
- padding-top: 2%;
- margin-top: 30%;
-
-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.5s; /* Firefox < 16 */
-ms-animation: fadein 0.5s; /* Internet Explorer */
@@ -80,11 +99,10 @@
}
#delete-session-close-modal-button{
- margin-top: -2.5%;
- margin-left: 92%;
background-color: transparent;
border: transparent;
color: rgba(#769FED, .4);
+ cursor: pointer;
}
#delete-session-close-modal-button:hover{
@@ -94,15 +112,9 @@
}
.modal-text{
- margin-top: 10%;
font-size: 16px;
- font-weight: 500;
}
#delete-session-modal-button {
- padding: 1.5%;
- margin-top: 5%;
- margin-right: 40%;
- width: 20%;
font-size: 14px;
}
--- a/client/src/components/Settings.scss Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Settings.scss Mon Sep 03 20:02:14 2018 +0200
@@ -1,23 +1,7 @@
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/scss/_custom.scss Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/scss/_custom.scss Mon Sep 03 20:02:14 2018 +0200
@@ -12,6 +12,9 @@
$component-active-bg: theme-color("secondary");
+$h4-font-size: 3rem;
+$h5-font-size: 1.5rem;
+
//Dropdowns
$dropdown-padding-y: 1rem;
$dropdown-link-color: theme-color("secondary");
@@ -20,7 +23,7 @@
-// Navs
+//Navs
$nav-link-padding-y: .2rem;
$navbar-brand-font-size: 30px;
$navbar-light-color: darken((theme-color("secondary")), 2%);
@@ -31,5 +34,13 @@
//Modals
$modal-content-border-width: .1rem;
+//Forms
+$input-btn-padding-y: .2rem;
+$input-padding-y: .1rem;
+$input-border-width: .1rem;
+$input-placeholder-color: theme-color("secondary");
+
+$form-group-margin-bottom: .2rem;
+
@import "bootstrap/scss/bootstrap";