# HG changeset patch
# User salimr <riwad.salim@yahoo.fr>
# Date 1538962254 -7200
# Node ID 183b128a41896e59dbf329966594112e0652c6e6
# Parent  a4705c2b4544d21f8443ec4827adb41f2f3b9af3
Change sessions list disposition and add sessions number

diff -r a4705c2b4544 -r 183b128a4189 client/src/components/SessionList.js
--- a/client/src/components/SessionList.js	Mon Oct 08 03:24:47 2018 +0200
+++ b/client/src/components/SessionList.js	Mon Oct 08 03:30:54 2018 +0200
@@ -52,6 +52,17 @@
     })
   }
 
+  showSessionsNumber = () => {
+    if (this.props.sessions.size === 1)
+    return (
+     <span>{this.props.sessions.size} session</span>
+    );
+    return (
+      <span>{this.props.sessions.size} sessions</span>
+     )
+
+  }
+
   deleteSession = () => {
     const { sessionToDelete } = this.state;
 
@@ -66,16 +77,19 @@
   render() {
     return (
       <div>
-        <Navbar history={this.props.history} />
+        <Navbar history={this.props.history} group={this.props.currentGroup} />
         <div className="container-fluid">
-          <div className="row mt-5 pt-5">
+          <div className="session-count fixed-top bg-secondary font-weight-bold text-danger pl-4 pb-3 mb-3 mt-5 pt-3">
+          {this.showSessionsNumber()}
+          </div>
+          <div className="row mt-4 justify-content-end">
                 {this.props.sessions.map((session) =>
-                  <div className="col-lg-4" id="session">
-                      <div className="col-md-auto m-4 p-4 session" key={session.get('_id')}>
+                  <div className="session col-lg-5" key={session.get('_id')}>
+                      <div className="col-md-auto m-2 p-2">
                         <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>
+                          <span className="session-description">{session.description}<br /></span>
                         </a>
                         <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>
@@ -86,16 +100,16 @@
             </div>
           </div>
         <Modal
-        className="Modal__Bootstrap modal-dialog mt-5 pt-5 justify-content-lg-center"
+        className="Modal__Bootstrap modal-dialog modal-dialog-centered w-25"
         // closeTimeoutMS={150}
         isOpen={this.state.modalIsOpen}
         onRequestClose={this.handleModalCloseRequest}
         >
           <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>
+            <span id="delete-session-close-modal-button" className="material-icons 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>
-              <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>
+            <span className="modal-text">Supprimer cette session ?</span>
+              <button type="button" className="btn btn-info text-secondary font-weight-bold py-1 px-2 ml-3" id="delete-session-modal-button" onClick={ this.deleteSession }>Supprimer</button>
             </div>
           </div>
         </Modal>
diff -r a4705c2b4544 -r 183b128a4189 client/src/components/SessionList.scss
--- a/client/src/components/SessionList.scss	Mon Oct 08 03:24:47 2018 +0200
+++ b/client/src/components/SessionList.scss	Mon Oct 08 03:30:54 2018 +0200
@@ -1,3 +1,9 @@
+
+.session-count {
+    font-size: 2rem;
+    z-index: -1;
+}
+
 a.sessions{
     cursor: pointer;
 }
@@ -15,16 +21,16 @@
     -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;
+    &: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 {
@@ -42,23 +48,27 @@
 }
 
 
-span.session-title {
-    font-size: 20px;
-}
+span.session {
+
+    &-title {
+    font-size: 1.3rem;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    }
 
-span.session-description {
-    font-size: 12px;
-}
-span.session-date {
-    font-size: 13px;
-}
+    &-date {
+        font-size: .9rem;
+    }
 
-.edit{
-    font-size: 17px;
+    &-description {
+        font-size: .9rem;
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+    }
 }
 
 .delete{
-    font-size: 16px;
+    font-size: 1rem;
 }
 
 #delete-session-modal{
@@ -98,23 +108,27 @@
     to   { opacity: 1; }
 }
 
-#delete-session-close-modal-button{
-    background-color: transparent;
-    border: transparent;
-    color: rgba(#769FED, .4);
-    cursor: pointer;
+#delete-session {
+
+    &-modal-button {
+        font-size: .9rem;
+    }
+
+    &-close-modal-button {
+        background-color: transparent;
+        border: transparent;
+        color: rgba(#769FED, .4);
+        cursor: pointer;
+    }
+
+    &-close-modal-button:hover {
+        background-color: transparent;
+        border: transparent;
+        color:black;
+    }
 }
 
-#delete-session-close-modal-button:hover{
-    background-color: transparent;
-    border: transparent;
-    color:black;
+.modal-text {
+    font-size: 1rem;
 }
 
-.modal-text{
-    font-size: 16px;
-}
-
-#delete-session-modal-button {
-    font-size: 14px;
-}