fixed display of timeline

src/component/PopinFixed/PopinFixed.styl

@@ -65,6 +65,9 @@
           color blue
   &__content
     display flex
+    flex-flow row
+    // 209 = wsContentGeneric:top wsContentGeneric__header:height - wsContentGeneric__option:height
+    height calc(100% - 209px)
     &__left
       width 55%
     &__right

src/component/PopinFixed/PopinFixedOption.jsx

@@ -17,7 +17,7 @@ const PopinFixedOption = props => {
           <i className='fa fa-plus-circle' />
         </div>
 
-        <SelectStatus />
+        {/* <SelectStatus /> */}
 
         <div className='wsContentGeneric__option__menu__action'>
           <i className='fa fa-archive' />

src/component/Timeline/Timeline.styl

@@ -7,6 +7,7 @@
   border-radius 10px
   height 100%
   &__header
+    flex 0 1 auto
     border-radius 10px 10px 0 0
     padding 15px
     text-align center
@@ -14,7 +15,8 @@
     color darkGrey
     background-color grey-hover
   &__messagelist
-    flex 1 1 0
+    flex 1 1 auto
+    // flex 1 1 0
     margin-bottom 0
     padding-left 0
     border-bottom 1px solid grey
@@ -25,23 +27,23 @@
       padding 0 25px 20px 35px
       &__avatar
         position relative
-        top 43px
-        left -25px
+        top 40px
+        left -20px
         & > img
           width 45px
           height 45px
           border-radius 25px
       &__createhour
-        margin-left 30px
+        margin-left 35px
         opacity 0.7
         font-size 14px
       &__content
+        display inline-block
         border 1px solid grey
         border-radius 5px
         padding 15px
         background-color off-white
         font-size 15px
-        z-index -1
     &__version
       display flex
       justify-content space-between
@@ -64,6 +66,7 @@
         font-size 17px
         margin auto 0
   &__texteditor
+    flex 0 1 auto
     padding 2px
     &__simpletext
       display none
@@ -86,19 +89,15 @@
         &__icon
           margin-left 10px
 
-.sended
-  .timeline__messagelist__item__content
-    margin-right 25%
-
 .received
+  text-align right
   .timeline__messagelist__item
     &__avatar
-      left 93%
+      left 20px
     &__createhour
-      text-align right
-      margin-right 50px
+      margin-left 0
+      margin-right 35px
     &__content
-      margin-left 25%
       color white
 
 /**** MEDIA 992px & 1199px ****/

src/component/Timeline/debugData.js

@@ -7,10 +7,10 @@ export const TimelineDebugData = [{
     avatar: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
   },
   createdAt: {
-    day: '27/11/17',
+    day: '28/11/17',
     hour: '11h45'
   },
-  text: 'Proident esse laboris in sed officia exercitation ut anim ea.'
+  text: "Ajout du paragraphe 3"
 }, {
   id: 1,
   type: 'message',
@@ -21,11 +21,24 @@ export const TimelineDebugData = [{
   },
   createdAt: {
     day: '27/11/16',
-    hour: '10h30'
+    hour: '15h30'
   },
-  text: 'Proident esse laboris in sed officia exercitation ut anim ea. in sed officia exercitation ut'
+  text: 'correction des fautes en tous genre'
 }, {
   id: 2,
+  type: 'version',
+  author: {
+    id: 1,
+    name: 'smoi',
+    avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
+  },
+  createdAt: {
+    day: '27/11/11',
+    hour: '10h50'
+  },
+  number: '5'
+}, {
+  id: 3,
   type: 'message',
   author: {
     id: 1,
@@ -36,9 +49,9 @@ export const TimelineDebugData = [{
     day: '27/11/15',
     hour: '10h30'
   },
-  text: 'Proident esse laboris in sed officia exercitation ut anim ea. Proident esse laboris in sed officia exercitation ut anim ea. Proident esse laboris in sed officia exercitation ut anim ea.'
+  text: 'Déplacement de la partie 2 pour une meilleur lisibilité du contenu. Tout le contenu est maintenant dans l\'ordre chronologique. Également, développement de la conclusion sur un ton plus léger.'
 }, {
-  id: 3,
+  id: 4,
   type: 'version',
   author: {
     id: 1,
@@ -46,9 +59,23 @@ export const TimelineDebugData = [{
     avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
   },
   createdAt: {
-    day: '27/11/11'
+    day: '27/11/11',
+    hour: '8h30'
   },
   number: '5'
+}, {
+  id: 5,
+  type: 'message',
+  author: {
+    id: 5,
+    name: 'MrLapin',
+    avatar: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
+  },
+  createdAt: {
+    day: '26/11/15',
+    hour: '10h30'
+  },
+  text: 'premiere version'
 }]
 
 export default TimelineDebugData

src/index.dev.js

@@ -36,7 +36,7 @@ ReactDOM.render(
       <Timeline
         customClass={`${'randomClass'}__contentpage`}
         loggedUser={{
-          id: '1',
+          id: 1,
           name: 'smoi',
           avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
         }}