Browse Source

fixed css + renamed class

Côme Huguiès 7 years ago
parent
commit
c377e24891
2 changed files with 58 additions and 63 deletions
  1. 14 14
      src/component/Thread.jsx
  2. 44 49
      src/css/index.styl

+ 14 - 14
src/component/Thread.jsx View File

3
 
3
 
4
 const Thread = props => {
4
 const Thread = props => {
5
   return (
5
   return (
6
-    <div className='wsContentThread'>
7
-      <ul className='wsContentThread__messagelist wsFileGeneric__messagelist'>
6
+    <div className='wsContentThread__app'>
7
+      <ul className='wsContentThread__app__messagelist wsContentGeneric__messagelist'>
8
         { props.listMessage.map(msg =>
8
         { props.listMessage.map(msg =>
9
-          <li className={classnames('wsContentThread__messagelist__item', 'wsFileGeneric__messagelist__item', {
9
+          <li className={classnames('wsContentThread__app__messagelist__item', 'wsContentGeneric__messagelist__item', {
10
             'sended': props.loggedUser.id === msg.author.id,
10
             'sended': props.loggedUser.id === msg.author.id,
11
             'received': !(props.loggedUser.id === msg.author.id)
11
             'received': !(props.loggedUser.id === msg.author.id)
12
           })} key={msg.id}>
12
           })} key={msg.id}>
13
-            <div className='wsContentThread__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
13
+            <div className='wsContentThread__app__messagelist__item__avatar wsContentGeneric__messagelist__item__avatar'>
14
               <img src={msg.author.avatar} alt='avatar' />
14
               <img src={msg.author.avatar} alt='avatar' />
15
             </div>
15
             </div>
16
 
16
 
17
-            <div className='wsContentThread__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
17
+            <div className='wsContentThread__app__messagelist__item__createhour wsContentGeneric__messagelist__item__createhour'>
18
               {msg.createdAt.day} à {msg.createdAt.hour}
18
               {msg.createdAt.day} à {msg.createdAt.hour}
19
             </div>
19
             </div>
20
 
20
 
21
-            <div className='wsContentThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
21
+            <div className='wsContentThread__app__messagelist__item__content wsContentGeneric__messagelist__item__content'>
22
               {msg.text}
22
               {msg.text}
23
             </div>
23
             </div>
24
           </li>
24
           </li>
25
         )}
25
         )}
26
       </ul>
26
       </ul>
27
 
27
 
28
-      <form className='wsContentThread__texteditor wsFileGeneric__texteditor'>
29
-        <div className='wsContentThread__texteditor__simpletext wsFileGeneric__texteditor__simpletext input-group'>
30
-          <input type='text' className='wsContentThread__texteditor__simpletext__input wsFileGeneric__texteditor__simpletext__input form-control' placeholder='...' />
28
+      <form className='wsContentThread__app__texteditor wsContentGeneric__texteditor'>
29
+        <div className='wsContentThread__app__texteditor__simpletext wsContentGeneric__texteditor__simpletext input-group'>
30
+          <input type='text' className='wsContentThread__app__texteditor__simpletext__input wsContentGeneric__texteditor__simpletext__input form-control' placeholder='...' />
31
 
31
 
32
-          <div className='wsContentThread__texteditor__simpletext__icon wsFileGeneric__texteditor__simpletext__icon input-group-addon'>
32
+          <div className='wsContentThread__app__texteditor__simpletext__icon wsContentGeneric__texteditor__simpletext__icon input-group-addon'>
33
             <i className='fa fa-font' />
33
             <i className='fa fa-font' />
34
           </div>
34
           </div>
35
         </div>
35
         </div>
36
 
36
 
37
-        <div className='wsFileGeneric__texteditor__wysiwyg d-none d-xl-block'>
37
+        <div className='wsContentGeneric__texteditor__wysiwyg d-none d-xl-block'>
38
           <textarea />
38
           <textarea />
39
         </div>
39
         </div>
40
 
40
 
41
-        <div className='wsContentThread__texteditor__submit wsFileGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
42
-          <button type='submit' className='wsContentThread__texteditor__submit__btn wsFileGeneric__texteditor__submit__btn btn btn-primary'>
41
+        <div className='wsContentThread__app__texteditor__submit wsContentGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
42
+          <button type='submit' className='wsContentThread__app__texteditor__submit__btn wsContentGeneric__texteditor__submit__btn btn btn-primary'>
43
             Envoyer
43
             Envoyer
44
-            <div className='wsContentThread__texteditor__submit__btn__icon wsFileGeneric__texteditor__submit__btn__icon'>
44
+            <div className='wsContentThread__app__texteditor__submit__btn__icon wsContentGeneric__texteditor__submit__btn__icon'>
45
               <i className='fa fa-paper-plane-o' />
45
               <i className='fa fa-paper-plane-o' />
46
             </div>
46
             </div>
47
           </button>
47
           </button>

+ 44 - 49
src/css/index.styl View File

2
 
2
 
3
 .wsContentThread
3
 .wsContentThread
4
   width 550px
4
   width 550px
5
-  flex-grow 1
6
-  margin-bottom 0
7
-  border-bottom 1px solid grey
8
-  overflow-Y auto
9
   &__header
5
   &__header
10
     color white
6
     color white
11
     background-color threadColor
7
     background-color threadColor
14
     &__icon
10
     &__icon
15
       .fa-comments-o
11
       .fa-comments-o
16
         color white
12
         color white
17
-  &__wrapper
18
-    height calc(100% - 209px) /* height of chat__header + height of option + top of chat */
19
-  &__messagelist
20
-    padding 15px 35px
21
-    list-style none
22
-    &__item
23
-      &__avatar
24
-        position relative
25
-        top 43px
26
-        left -25px
27
-        & > img
28
-          width 45px
29
-          height 45px
30
-          border-radius 30px
31
-      &__createhour
32
-        margin-left 30px
33
-        opacity 0.7
34
-        font-size 14px
35
-      &__content
36
-        border 1px solid grey
37
-        border-radius 5px
38
-        padding 15px
39
-        background-color off-white
40
-        font-size 15px
41
-        z-index -1
42
-        color darkBlue
43
-
44
-  &__texteditor
45
-    &__simpletext
46
-      &__input
47
-        &:focus
13
+  &__app
14
+    display flex
15
+    flex-flow column
16
+    width 100%
17
+    &__messagelist
18
+      flex 1 1 auto
19
+      padding 15px 35px
20
+      list-style none
21
+      overflow-y auto
22
+      &__item
23
+        &__avatar
24
+          position relative
25
+          top 40px
26
+          left -20px
27
+          & > img
28
+            width 45px
29
+            height 45px
30
+            border-radius 25px
31
+        &__createhour
32
+          margin-left 35px
33
+          opacity 0.7
34
+          font-size 14px
35
+        &__content
36
+          display inline-block
37
+          border 1px solid grey
38
+          border-radius 5px
39
+          padding 15px
40
+          background-color off-white
41
+          font-size 15px
42
+    &__texteditor
43
+      flex 0 1 auto
44
+      &__simpletext
45
+        &__input
46
+          &:focus
47
+            color darkBlue
48
+            border-color darkBlue
49
+      &__submit
50
+        &__btn
48
           color darkBlue
51
           color darkBlue
49
-          border-color darkBlue
50
-    &__submit
51
-      &__btn
52
-        color darkBlue
53
-
54
-.sended
55
-  .wsFileGeneric__messagelist__item__content
56
-    margin-right 25%
57
 
52
 
58
 .received
53
 .received
59
-  .wsFileGeneric__messagelist__item
54
+  text-align right
55
+  .wsContentGeneric__messagelist__item
60
     &__avatar
56
     &__avatar
61
-      left 93%
57
+      left 20px
62
     &__createhour
58
     &__createhour
63
-      text-align right
64
-      margin-right 50px
59
+      margin-left 0
60
+      margin-right 35px
65
     &__content
61
     &__content
66
-      margin-left 25%
67
-      background-color darkBlue
68
       color white
62
       color white
63
+      background-color darkBlue
69
 
64
 
70
 .activeEditionTitle
65
 .activeEditionTitle
71
   .wsContentThread
66
   .wsContentThread