Browse Source

Modification in the account page

AlexiCauvin 7 years ago
parent
commit
9256232794
2 changed files with 59 additions and 63 deletions
  1. 48 48
      src/container/AccountPage.jsx
  2. 11 15
      src/css/AccountPage.styl

+ 48 - 48
src/container/AccountPage.jsx View File

78
                   Ut consectetur dolor et sunt nisi officia ut magna.
78
                   Ut consectetur dolor et sunt nisi officia ut magna.
79
                 </div>
79
                 </div>
80
 
80
 
81
-                <div className='account__userpreference__setting__personaldata__changeinfo'>
82
-                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
81
+                <div className='account__userpreference__setting__personaldata__form'>
82
+                  <div className='account__userpreference__setting__personaldata__form__title'>
83
                     Changer le mot de passe :
83
                     Changer le mot de passe :
84
                   </div>
84
                   </div>
85
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='password' placeholder='Ancien mot de passe' />
86
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='password' placeholder='Nouveau mot de passe' />
87
-                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn btn-primary'>
85
+                  <input className='account__userpreference__setting__personaldata__form__txtinput form-control' type='password' placeholder='Ancien mot de passe' />
86
+                  <input className='account__userpreference__setting__personaldata__form__txtinput form-control' type='password' placeholder='Nouveau mot de passe' />
87
+                  <div className='account__userpreference__setting__personaldata__form__button btn btn-primary'>
88
                     Envoyer
88
                     Envoyer
89
                   </div>
89
                   </div>
90
                 </div>
90
                 </div>
91
 
91
 
92
-                <div className='account__userpreference__setting__personaldata__changeinfo'>
93
-                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
92
+                <div className='account__userpreference__setting__personaldata__form'>
93
+                  <div className='account__userpreference__setting__personaldata__form__title'>
94
                     Changer d'adresse mail :
94
                     Changer d'adresse mail :
95
                   </div>
95
                   </div>
96
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='email' placeholder='Ancienne adresse mail' />
97
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='email' placeholder='Nouvelle adresse mail' />
98
-                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn btn-primary'>
96
+                  <input className='account__userpreference__setting__personaldata__form__txtinput form-control' type='email' placeholder='Ancienne adresse mail' />
97
+                  <input className='account__userpreference__setting__personaldata__form__txtinput form-control' type='email' placeholder='Nouvelle adresse mail' />
98
+                  <div className='account__userpreference__setting__personaldata__form__button btn btn-primary'>
99
                     Envoyer
99
                     Envoyer
100
                   </div>
100
                   </div>
101
                 </div>
101
                 </div>
112
                   Ut consectetur dolor et sunt nisi officia ut magna.
112
                   Ut consectetur dolor et sunt nisi officia ut magna.
113
                 </div>
113
                 </div>
114
 
114
 
115
-                <div className='account__userpreference__setting__calendar__infotitle'>
115
+                <div className='account__userpreference__setting__calendar__title'>
116
                   Accèder à votre Calendrier personnel
116
                   Accèder à votre Calendrier personnel
117
                 </div>
117
                 </div>
118
                 <div className='account__userpreference__setting__calendar__link'>
118
                 <div className='account__userpreference__setting__calendar__link'>
119
                   http://algoo.trac.im/caldav/user/262.ics/
119
                   http://algoo.trac.im/caldav/user/262.ics/
120
                 </div>
120
                 </div>
121
 
121
 
122
-                <div className='account__userpreference__setting__calendar__infotitle'>
122
+                <div className='account__userpreference__setting__calendar__title'>
123
                   Changer de Fuseau Horaire :
123
                   Changer de Fuseau Horaire :
124
                 </div>
124
                 </div>
125
 
125
 
147
                   Ut consectetur dolor et sunt nisi officia ut magna.
147
                   Ut consectetur dolor et sunt nisi officia ut magna.
148
                 </div>
148
                 </div>
149
 
149
 
150
-                <div className='account__userpreference__setting__notification__tableau'>
150
+                <div className='account__userpreference__setting__notification__table'>
151
                   <table className='table'>
151
                   <table className='table'>
152
                     <thead>
152
                     <thead>
153
                       <tr>
153
                       <tr>
159
                     <tbody>
159
                     <tbody>
160
                       <tr>
160
                       <tr>
161
                         <td>
161
                         <td>
162
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
162
+                          <div className='account__userpreference__setting__notification__table__wksname'>
163
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
163
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
164
                           </div>
164
                           </div>
165
                         </td>
165
                         </td>
166
                         <td>
166
                         <td>
167
-                          <div className='account__userpreference__setting__notification__tableau__role'>
168
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
167
+                          <div className='account__userpreference__setting__notification__table__role'>
168
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
169
                               <i className='fa fa-graduation-cap' />
169
                               <i className='fa fa-graduation-cap' />
170
                             </div>
170
                             </div>
171
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
171
+                            <div className='account__userpreference__setting__notification__table__role__text'>
172
                               Gestionnaire de Contenu
172
                               Gestionnaire de Contenu
173
                             </div>
173
                             </div>
174
                           </div>
174
                           </div>
175
                         </td>
175
                         </td>
176
                         <td>
176
                         <td>
177
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
177
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
178
                             <BtnSwitch />
178
                             <BtnSwitch />
179
                           </div>
179
                           </div>
180
                         </td>
180
                         </td>
181
                       </tr>
181
                       </tr>
182
                       <tr>
182
                       <tr>
183
                         <td>
183
                         <td>
184
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
184
+                          <div className='account__userpreference__setting__notification__table__wksname'>
185
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
185
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
186
                           </div>
186
                           </div>
187
                         </td>
187
                         </td>
188
                         <td>
188
                         <td>
189
-                          <div className='account__userpreference__setting__notification__tableau__role'>
190
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
189
+                          <div className='account__userpreference__setting__notification__table__role'>
190
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
191
                               <i className='fa fa-eye' />
191
                               <i className='fa fa-eye' />
192
                             </div>
192
                             </div>
193
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
193
+                            <div className='account__userpreference__setting__notification__table__role__text'>
194
                               Lecteur
194
                               Lecteur
195
                             </div>
195
                             </div>
196
                           </div>
196
                           </div>
197
                         </td>
197
                         </td>
198
                         <td>
198
                         <td>
199
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
199
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
200
                             <BtnSwitch />
200
                             <BtnSwitch />
201
                           </div>
201
                           </div>
202
                         </td>
202
                         </td>
203
                       </tr>
203
                       </tr>
204
                       <tr>
204
                       <tr>
205
                         <td>
205
                         <td>
206
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
206
+                          <div className='account__userpreference__setting__notification__table__wksname'>
207
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
207
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
208
                           </div>
208
                           </div>
209
                         </td>
209
                         </td>
210
                         <td>
210
                         <td>
211
-                          <div className='account__userpreference__setting__notification__tableau__role'>
212
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
211
+                          <div className='account__userpreference__setting__notification__table__role'>
212
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
213
                               <i className='fa fa-pencil' />
213
                               <i className='fa fa-pencil' />
214
                             </div>
214
                             </div>
215
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
215
+                            <div className='account__userpreference__setting__notification__table__role__text'>
216
                               Contributeur
216
                               Contributeur
217
                             </div>
217
                             </div>
218
                           </div>
218
                           </div>
219
                         </td>
219
                         </td>
220
                         <td>
220
                         <td>
221
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
221
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
222
                             <BtnSwitch />
222
                             <BtnSwitch />
223
                           </div>
223
                           </div>
224
                         </td>
224
                         </td>
225
                       </tr>
225
                       </tr>
226
                       <tr>
226
                       <tr>
227
                         <td>
227
                         <td>
228
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
228
+                          <div className='account__userpreference__setting__notification__table__wksname'>
229
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
229
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
230
                           </div>
230
                           </div>
231
                         </td>
231
                         </td>
232
                         <td>
232
                         <td>
233
-                          <div className='account__userpreference__setting__notification__tableau__role'>
234
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
233
+                          <div className='account__userpreference__setting__notification__table__role'>
234
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
235
                               <i className='fa fa-gavel' />
235
                               <i className='fa fa-gavel' />
236
                             </div>
236
                             </div>
237
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
237
+                            <div className='account__userpreference__setting__notification__table__role__text'>
238
                               Responsable
238
                               Responsable
239
                             </div>
239
                             </div>
240
                           </div>
240
                           </div>
241
                         </td>
241
                         </td>
242
                         <td>
242
                         <td>
243
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
243
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
244
                             <BtnSwitch />
244
                             <BtnSwitch />
245
                           </div>
245
                           </div>
246
                         </td>
246
                         </td>
247
                       </tr>
247
                       </tr>
248
                       <tr>
248
                       <tr>
249
                         <td>
249
                         <td>
250
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
250
+                          <div className='account__userpreference__setting__notification__table__wksname'>
251
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
251
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
252
                           </div>
252
                           </div>
253
                         </td>
253
                         </td>
254
                         <td>
254
                         <td>
255
-                          <div className='account__userpreference__setting__notification__tableau__role'>
256
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
255
+                          <div className='account__userpreference__setting__notification__table__role'>
256
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
257
                               <i className='fa fa-graduation-cap' />
257
                               <i className='fa fa-graduation-cap' />
258
                             </div>
258
                             </div>
259
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
259
+                            <div className='account__userpreference__setting__notification__table__role__text'>
260
                               Gestionnaire de Contenu
260
                               Gestionnaire de Contenu
261
                             </div>
261
                             </div>
262
                           </div>
262
                           </div>
263
                         </td>
263
                         </td>
264
                         <td>
264
                         <td>
265
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
265
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
266
                             <BtnSwitch />
266
                             <BtnSwitch />
267
                           </div>
267
                           </div>
268
                         </td>
268
                         </td>
269
                       </tr>
269
                       </tr>
270
                       <tr>
270
                       <tr>
271
                         <td>
271
                         <td>
272
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
272
+                          <div className='account__userpreference__setting__notification__table__wksname'>
273
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
273
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
274
                           </div>
274
                           </div>
275
                         </td>
275
                         </td>
276
                         <td>
276
                         <td>
277
-                          <div className='account__userpreference__setting__notification__tableau__role'>
278
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
277
+                          <div className='account__userpreference__setting__notification__table__role'>
278
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
279
                               <i className='fa fa-graduation-cap' />
279
                               <i className='fa fa-graduation-cap' />
280
                             </div>
280
                             </div>
281
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
281
+                            <div className='account__userpreference__setting__notification__table__role__text'>
282
                               Gestionnaire de Contenu
282
                               Gestionnaire de Contenu
283
                             </div>
283
                             </div>
284
                           </div>
284
                           </div>
285
                         </td>
285
                         </td>
286
                         <td>
286
                         <td>
287
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
287
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
288
                             <BtnSwitch />
288
                             <BtnSwitch />
289
                           </div>
289
                           </div>
290
                         </td>
290
                         </td>
291
                       </tr>
291
                       </tr>
292
                       <tr>
292
                       <tr>
293
                         <td>
293
                         <td>
294
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
294
+                          <div className='account__userpreference__setting__notification__table__wksname'>
295
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
295
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
296
                           </div>
296
                           </div>
297
                         </td>
297
                         </td>
298
                         <td>
298
                         <td>
299
-                          <div className='account__userpreference__setting__notification__tableau__role'>
300
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
299
+                          <div className='account__userpreference__setting__notification__table__role'>
300
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
301
                               <i className='fa fa-graduation-cap' />
301
                               <i className='fa fa-graduation-cap' />
302
                             </div>
302
                             </div>
303
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
303
+                            <div className='account__userpreference__setting__notification__table__role__text'>
304
                               Gestionnaire de Contenu
304
                               Gestionnaire de Contenu
305
                             </div>
305
                             </div>
306
                           </div>
306
                           </div>
307
                         </td>
307
                         </td>
308
                         <td>
308
                         <td>
309
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
309
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
310
                             <BtnSwitch />
310
                             <BtnSwitch />
311
                           </div>
311
                           </div>
312
                         </td>
312
                         </td>

+ 11 - 15
src/css/AccountPage.styl View File

5
   margin 15px 0
5
   margin 15px 0
6
   font-size 18px
6
   font-size 18px
7
 
7
 
8
+.table td
9
+  vertical-align middle
10
+
11
+.table tr:nth-child(even)
12
+  background-color grey-hover
13
+
8
 .account
14
 .account
9
   &__userinformation
15
   &__userinformation
10
     display flex
16
     display flex
76
       &__personaldata
82
       &__personaldata
77
         &__text
83
         &__text
78
           settingText()
84
           settingText()
79
-        &__changeinfo
85
+        &__form
80
           margin 25px 0
86
           margin 25px 0
81
-          &__infotitle
87
+          &__title
82
             margin-bottom 15px
88
             margin-bottom 15px
83
             font-size 18px
89
             font-size 18px
84
           &__txtinput
90
           &__txtinput
85
             display inline-flex
91
             display inline-flex
86
-            display ms-inline-flex
87
             width auto
92
             width auto
88
             margin 0 15px 15px 0
93
             margin 0 15px 15px 0
89
             border 1px solid blue
94
             border 1px solid blue
101
               background-color blue
106
               background-color blue
102
               color white
107
               color white
103
       &__calendar
108
       &__calendar
104
-        &__title
105
-          settingTitle()
106
         &__text
109
         &__text
107
           settingText()
110
           settingText()
108
-        &__infotitle
111
+        &__title
109
           margin 15px 0
112
           margin 15px 0
110
           font-size 18px
113
           font-size 18px
111
         &__link
114
         &__link
135
                 background-color blue
138
                 background-color blue
136
                 color white
139
                 color white
137
       &__notification
140
       &__notification
138
-        &__title
139
-          settingTitle()
140
         &__text
141
         &__text
141
           settingText()
142
           settingText()
142
           margin-bottom 30px
143
           margin-bottom 30px
143
-        &__tableau
144
+        &__table
144
           border 1px solid lightGrey
145
           border 1px solid lightGrey
145
           &__role
146
           &__role
146
             display flex
147
             display flex
148
             &__icon
149
             &__icon
149
               margin-right 10px
150
               margin-right 10px
150
 
151
 
151
-.account__userpreference__setting__notification__table__line:nth-last-child(1)
152
-  border-bottom 0
153
-
154
-
155
 /***** MEDIAQUERIES *****/
152
 /***** MEDIAQUERIES *****/
156
 
153
 
157
-
158
 /**** MEDIA 576px & 1199px ****/
154
 /**** MEDIA 576px & 1199px ****/
159
 
155
 
160
 // Regroup the common rules
156
 // Regroup the common rules
264
           &__link
260
           &__link
265
             padding 10px 15px
261
             padding 10px 15px
266
         &__notification
262
         &__notification
267
-          &__tableau
263
+          &__table
268
             &__wksname
264
             &__wksname
269
               text-overflow ellipsis
265
               text-overflow ellipsis
270
               white-space nowrap
266
               white-space nowrap