# HG changeset patch
# User salimr <riwad.salim@yahoo.fr>
# Date 1535392420 -7200
# Node ID a2e61192db507f6cd2e59a9b5468783c6f5fc6f5
# Parent  4f4bb2b3ef39b83d5839f58bd21f28966445e656
Adapt session list display in css

diff -r 4f4bb2b3ef39 -r a2e61192db50 client/src/components/SessionList.js
--- a/client/src/components/SessionList.js	Thu Aug 16 22:32:36 2018 +0200
+++ b/client/src/components/SessionList.js	Mon Aug 27 19:53:40 2018 +0200
@@ -16,7 +16,7 @@
     super(props);
     this.state = {
       modalIsOpen: false,
-      sessionToDelete: null
+      sessionToDelete: null,
     };
   }
 
@@ -60,6 +60,7 @@
     e.preventDefault();
     e.stopPropagation();
 
+
     this.setState({
       modalIsOpen: true,
       sessionToDelete: session
@@ -80,25 +81,24 @@
   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="container-fluid">
           <div className="row">
-            <div className="col-md-6 col-md-offset-3">
-              <ul className="list-group">
                 {this.props.sessions.map((session) =>
-                  <li className="list-group-item" key={session.get('_id')}>
-                    <span onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>{session.title || 'No title'} {session.get('_id')} {moment(session.get('date')).format('DD/MM/YYYY')}</span>
-                    <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
-                      <span className="material-icons">delete</span>
-                    </a>
-                  </li>
+                  <a className="sessions" href="#session" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
+                   <div className="col-md-4 session" key={session.get('_id')}>
+                      <span className="session-title">{session.title || ''}<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>
+                      <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
+                        <span className="material-icons">delete</span>
+                      </a>
+                  </div>
+                </a>
                 )}
-              </ul>
-              <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
-            </div>
+               </div>
           </div>
-        </div>
-
         <Modal
         className="Modal__Bootstrap modal-dialog"
         // closeTimeoutMS={150}
@@ -120,6 +120,8 @@
   }
 }
 
+
+
 function mapStateToProps(state, props) {
   return {
     sessions: getActiveSessions(state),
diff -r 4f4bb2b3ef39 -r a2e61192db50 client/src/components/SessionList.scss
--- a/client/src/components/SessionList.scss	Thu Aug 16 22:32:36 2018 +0200
+++ b/client/src/components/SessionList.scss	Mon Aug 27 19:53:40 2018 +0200
@@ -2,9 +2,47 @@
     font-size: 	18px;
     font-weight: bold;
     padding: 15px 15px;
-    width: 30%;
-    margin-left: 7%;
-    top: 13%;
+    width: 400px;
+    align-content: center;
+    top: -10%;
     position:fixed;
+    z-index: 1;
+}
+
+#session-button:hover {
+    background-color: #769FED;
+    top: -5%;
+}
+
+a.sessions{
+    text-decoration: none;
 }
 
+.session {
+    padding-top: 10%;
+    padding-left: 3%;
+    padding-right: 3%;
+    padding-bottom: -20%;
+}
+
+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
+}
+span.session-date {
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.material-icons{
+    margin: 5%;
+}
+
+