Home Explore Help
Sign In
bux
/
tracim_v2
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

first fixe of dashboard's integration page

AlexiCauvin 7 years ago
parent
11b6d23b83
commit
cde2bd608f
3 changed files with 371 additions and 402 deletions
Split View Show Diff Stats
  1. 266 266
      src/container/Dashboard.jsx
  2. 65 136
      src/css/Dashboard.styl
  3. 40 0
      src/css/Generic.styl

+ 266 - 266
src/container/Dashboard.jsx View File 

@@ -6,364 +6,364 @@ class Dashboard extends Component {
6 6 
   render () {
7 7 
     return (
8 8 
       <div className='dashboard'>
9 
-
10 
-        <div className='dashboard__title'>
11 
-          Tableau de bord
12 
-        </div>
13 
-
14 
-        <div className='dashboard__wkscontainer'>
15 
-          <div className='dashboard__workspace'>
16 
-            <div className='dashboard__workspace__title'>
17 
-              Nouvelle ligne directive sur le nouveau design de Tracim
18 
-            </div>
19 
-
20 
-            <div className='dashboard__workspace__detail'>
21 
-              Ut in et sit adipisicing mollit amet ut exercitation proident laborum duis occaecat eu aute qui ut.
22 
-              Dolore veniam eu consectetur occaecat est elit dolor nulla est ut amet do reprehenderit eiusmod tempor.
9 
+        <div className='container-fluid nopadding'>
10 
+          <div className='pageTitleGeneric'>
11 
+            <div className='pageTitleGeneric__title dashboard__title'>
12 
+              Dashboard
23 13 
             </div>
24 14 
           </div>
25 
-          <div className='dashboard__userstatut'>
26 15
27 
-            <div className='dashboard__userstatut__role'>
28 
-              <div className='dashboard__userstatut__role__text'>
29 
-                Hi ! Alexi, vous êtes actuellement
30 
-              </div>
31 
-              <div className='dashboard__userstatut__role__rank'>
32 
-                <div className='dashboard__userstatut__role__rank__icon'>
33 
-                  <i className='fa fa-graduation-cap' />
34 
-                </div>
35 
-                <div className='dashboard__userstatut__role__rank__rolename'>
36 
-                  Gestionnaire de projet
37 
-                </div>
16 
+          <div className='dashboard__wkswrapper'>
17 
+            <div className='dashboard__workspace'>
18 
+              <div className='dashboard__workspace__title'>
19 
+                Nouvelle ligne directive sur le nouveau design de Tracim
38 20 
               </div>
39 
-            </div>
40 21
41 
-            <div className='dashboard__userstatut__notification'>
42 
-              <div className='dashboard__userstatut__notification__text'>
43 
-                Vous êtes abonné(e) aux notifications de ce workspace
44 
-              </div>
45 
-              <div className='dashboard__userstatut__notification__btn btn'>
46 
-                Changer de statut
22 
+              <div className='dashboard__workspace__detail'>
23 
+                Ut in et sit adipisicing mollit amet ut exercitation proident laborum duis occaecat eu aute qui ut.
24 
+                Dolore veniam eu consectetur occaecat est elit dolor nulla est ut amet do reprehenderit eiusmod tempor.
47 25 
               </div>
26 
+            </div>
27 
+            <div className='dashboard__userstatut'>
48 28
49 
-              <div className='dashboard__userstatut__notification__subscribe dropdown'>
50 
-                <button className='dashboard__userstatut__notification__subscribe__btn btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
51 
-                  Abonné(e)
52 
-                </button>
53 
-                <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
54 
-                  <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>Abonné(e)
29 
+              <div className='dashboard__userstatut__role'>
30 
+                <div className='dashboard__userstatut__role__text'>
31 
+                  Hi ! Alexi, vous êtes actuellement
32 
+                </div>
33 
+                <div className='dashboard__userstatut__role__rank'>
34 
+                  <div className='dashboard__userstatut__role__rank__icon'>
35 
+                    <i className='fa fa-graduation-cap' />
55 36 
                   </div>
56 
-                  <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>Non Abonné(e)
37 
+                  <div className='dashboard__userstatut__role__rank__rolename'>
38 
+                    Gestionnaire de projet
57 39 
                   </div>
58 40 
                 </div>
59 41 
               </div>
60 
-            </div>
61 
-          </div>
62 
-        </div>
63 42
64 
-        <div className='dashboard__calltoaction'>
65 
-          <div className='dashboard__calltoaction__button thread'>
66 
-            <div className='dashboard__calltoaction__button__text'>
67 
-              <div className='dashboard__calltoaction__button__text__icon'>
68 
-                <i className='fa fa-comments-o' />
69 
-              </div>
70 
-              <div className='dashboard__calltoaction__button__text__title'>
71 
-                Débuter une nouvelle discussion
72 
-              </div>
73 
-            </div>
74 
-          </div>
43 
+              <div className='dashboard__userstatut__notification'>
44 
+                <div className='dashboard__userstatut__notification__text'>
45 
+                  Vous êtes abonné(e) aux notifications de ce workspace
46 
+                </div>
47 
+                <div className='dashboard__userstatut__notification__btn btn btn-primary'>
48 
+                  Changer de statut
49 
+                </div>
75 50
76 
-          <div className='dashboard__calltoaction__button writefile'>
77 
-            <div className='dashboard__calltoaction__button__text'>
78 
-              <div className='dashboard__calltoaction__button__text__icon'>
79 
-                <i className='fa fa-file-text-o' />
80 
-              </div>
81 
-              <div className='dashboard__calltoaction__button__text__title'>
82 
-                Rédiger un document
51 
+                <div className='dashboard__userstatut__notification__subscribe dropdown'>
52 
+                  <button className='dashboard__userstatut__notification__subscribe__btn btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
53 
+                    Abonné(e)
54 
+                  </button>
55 
+                  <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
56 
+                    <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>Abonné(e)
57 
+                    </div>
58 
+                    <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>Non Abonné(e)
59 
+                    </div>
60 
+                  </div>
61 
+                </div>
83 62 
               </div>
84 63 
             </div>
85 64 
           </div>
86 65
87 
-          <div className='dashboard__calltoaction__button importfile'>
88 
-            <div className='dashboard__calltoaction__button__text'>
89 
-              <div className='dashboard__calltoaction__button__text__icon'>
90 
-                <i className='fa fa-paperclip' />
91 
-              </div>
92 
-              <div className='dashboard__calltoaction__button__text__title'>
93 
-                Importer un fichier
66 
+          <div className='dashboard__calltoaction'>
67 
+            <div className='dashboard__calltoaction__button btnaction thread'>
68 
+              <div className='dashboard__calltoaction__button__text'>
69 
+                <div className='dashboard__calltoaction__button__text__icon'>
70 
+                  <i className='fa fa-comments-o' />
71 
+                </div>
72 
+                <div className='dashboard__calltoaction__button__text__title'>
73 
+                  Débuter une nouvelle discussion
74 
+                </div>
94 75 
               </div>
95 76 
             </div>
96 
-          </div>
97 77
98 
-          <div className='dashboard__calltoaction__button calendar'>
99 
-            <div className='dashboard__calltoaction__button__text'>
100 
-              <div className='dashboard__calltoaction__button__text__icon'>
101 
-                <i className='fa fa-calendar' />
102 
-              </div>
103 
-              <div className='dashboard__calltoaction__button__text__title'>
104 
-                Voir le Calendrier
78 
+            <div className='dashboard__calltoaction__button btnaction writefile'>
79 
+              <div className='dashboard__calltoaction__button__text'>
80 
+                <div className='dashboard__calltoaction__button__text__icon'>
81 
+                  <i className='fa fa-file-text-o' />
82 
+                </div>
83 
+                <div className='dashboard__calltoaction__button__text__title'>
84 
+                  Rédiger un document
85 
+                </div>
105 86 
               </div>
106 87 
             </div>
107 
-          </div>
108 88
109 
-          <div className='dashboard__calltoaction__button explore'>
110 
-            <div className='dashboard__calltoaction__button__text'>
111 
-              <div className='dashboard__calltoaction__button__text__icon'>
112 
-                <i className='fa fa-folder-open-o' />
113 
-              </div>
114 
-              <div className='dashboard__calltoaction__button__text__title'>
115 
-                Explorer le Workspace
89 
+            <div className='dashboard__calltoaction__button btnaction importfile'>
90 
+              <div className='dashboard__calltoaction__button__text'>
91 
+                <div className='dashboard__calltoaction__button__text__icon'>
92 
+                  <i className='fa fa-paperclip' />
93 
+                </div>
94 
+                <div className='dashboard__calltoaction__button__text__title'>
95 
+                  Importer un fichier
96 
+                </div>
116 97 
               </div>
117 98 
             </div>
118 
-          </div>
119 
-        </div>
120 
-
121 
-        <div className='dashboard__wksinfo'>
122 
-          <div className='dashboard__activity'>
123 
-            <div className='dashboard__activity__header'>
124 
-              <div className='dashboard__activity__header__title mr-auto'>
125 
-                Activité récente
126 
-                <div className='dashboard__activity__header__title__underline' />
127 
-              </div>
128 99
129 
-              <div className='dashboard__activity__header__allread btn'>
130 
-                Tout marquer comme lu
131 
-              </div>
132 
-            </div>
133 
-            <div className='dashboard__activity__wrapper'>
134 
-              <div className='dashboard__activity__workspace'>
135 
-                <div className='dashboard__activity__workspace__icon'>
136 
-                  <i className='fa fa-comments-o' />
100 
+            <div className='dashboard__calltoaction__button btnaction calendar'>
101 
+              <div className='dashboard__calltoaction__button__text'>
102 
+                <div className='dashboard__calltoaction__button__text__icon'>
103 
+                  <i className='fa fa-calendar' />
137 104 
                 </div>
138 
-                <div className='dashboard__activity__workspace__name'>
139 
-                  <span>Workspace 1</span>
105 
+                <div className='dashboard__calltoaction__button__text__title'>
106 
+                  Voir le Calendrier
140 107 
                 </div>
141 108 
               </div>
109 
+            </div>
142 110
143 
-              <div className='dashboard__activity__workspace'>
144 
-                <div className='dashboard__activity__workspace__icon'>
145 
-                  <i className='fa fa-list-ul' />
111 
+            <div className='dashboard__calltoaction__button btnaction explore'>
112 
+              <div className='dashboard__calltoaction__button__text'>
113 
+                <div className='dashboard__calltoaction__button__text__icon'>
114 
+                  <i className='fa fa-folder-open-o' />
146 115 
                 </div>
147 
-                <div className='dashboard__activity__workspace__name'>
148 
-                  Workspace 2
116 
+                <div className='dashboard__calltoaction__button__text__title'>
117 
+                  Explorer le Workspace
149 118 
                 </div>
150 119 
               </div>
120 
+            </div>
121 
+          </div>
151 122
152 
-              <div className='dashboard__activity__workspace'>
153 
-                <div className='dashboard__activity__workspace__icon'>
154 
-                  <i className='fa fa-list-ul' />
123 
+          <div className='dashboard__wksinfo'>
124 
+            <div className='dashboard__activity'>
125 
+              <div className='dashboard__activity__header'>
126 
+                <div className='dashboard__activity__header__title subTitle'>
127 
+                  Activité récente
155 128 
                 </div>
156 
-                <div className='dashboard__activity__workspace__name'>
157 
-                  Workspace 3
129 
+
130 
+                <div className='dashboard__activity__header__allread btn'>
131 
+                  Tout marquer comme lu
158 132 
                 </div>
159 133 
               </div>
160 
-
161 
-              <div className='dashboard__activity__workspace'>
162 
-                <div className='dashboard__activity__workspace__icon'>
163 
-                  <i className='fa fa-file-text-o' />
134 
+              <div className='dashboard__activity__wrapper'>
135 
+                <div className='dashboard__activity__workspace'>
136 
+                  <div className='dashboard__activity__workspace__icon'>
137 
+                    <i className='fa fa-comments-o' />
138 
+                  </div>
139 
+                  <div className='dashboard__activity__workspace__name'>
140 
+                    <span>Workspace 1</span>
141 
+                  </div>
164 142 
                 </div>
165 
-                <div className='dashboard__activity__workspace__name'>
166 
-                  <span>Workspace 4</span>
143 
+
144 
+                <div className='dashboard__activity__workspace'>
145 
+                  <div className='dashboard__activity__workspace__icon'>
146 
+                    <i className='fa fa-list-ul' />
147 
+                  </div>
148 
+                  <div className='dashboard__activity__workspace__name'>
149 
+                    Workspace 2
150 
+                  </div>
167 151 
                 </div>
168 
-              </div>
169 152
170 
-              <div className='dashboard__activity__workspace'>
171 
-                <div className='dashboard__activity__workspace__icon'>
172 
-                  <i className='fa fa-comments-o' />
153 
+                <div className='dashboard__activity__workspace'>
154 
+                  <div className='dashboard__activity__workspace__icon'>
155 
+                    <i className='fa fa-list-ul' />
156 
+                  </div>
157 
+                  <div className='dashboard__activity__workspace__name'>
158 
+                    Workspace 3
159 
+                  </div>
173 160 
                 </div>
174 
-                <div className='dashboard__activity__workspace__name'>
175 
-                  <span>Workspace 5</span>
161 
+
162 
+                <div className='dashboard__activity__workspace'>
163 
+                  <div className='dashboard__activity__workspace__icon'>
164 
+                    <i className='fa fa-file-text-o' />
165 
+                  </div>
166 
+                  <div className='dashboard__activity__workspace__name'>
167 
+                    <span>Workspace 4</span>
168 
+                  </div>
176 169 
                 </div>
177 
-              </div>
178 170
179 
-              <div className='dashboard__activity__workspace'>
180 
-                <div className='dashboard__activity__workspace__icon'>
181 
-                  <i className='fa fa-file-text-o' />
171 
+                <div className='dashboard__activity__workspace'>
172 
+                  <div className='dashboard__activity__workspace__icon'>
173 
+                    <i className='fa fa-comments-o' />
174 
+                  </div>
175 
+                  <div className='dashboard__activity__workspace__name'>
176 
+                    <span>Workspace 5</span>
177 
+                  </div>
182 178 
                 </div>
183 
-                <div className='dashboard__activity__workspace__name'>
184 
-                  Workspace 6
179 
+
180 
+                <div className='dashboard__activity__workspace'>
181 
+                  <div className='dashboard__activity__workspace__icon'>
182 
+                    <i className='fa fa-file-text-o' />
183 
+                  </div>
184 
+                  <div className='dashboard__activity__workspace__name'>
185 
+                    Workspace 6
186 
+                  </div>
185 187 
                 </div>
186 
-              </div>
187 188
188 
-              <div className='dashboard__activity__more d-flex flex-row-reverse'>
189 
-                <div className='dashboard__activity__more__btn btn'>
190 
-                  Voir plus
189 
+                <div className='dashboard__activity__more d-flex flex-row-reverse'>
190 
+                  <div className='dashboard__activity__more__btn btn'>
191 
+                    Voir plus
192 
+                  </div>
191 193 
                 </div>
192 194 
               </div>
193 195 
             </div>
194 
-          </div>
195 196
196 
-          <div className='dashboard__memberlist'>
197 
+            <div className='dashboard__memberlist'>
197 198
198 
-            <div className='dashboard__memberlist__title'>
199 
-              Liste des membres
200 
-              <div className='dashboard__memberlist__title__underline' />
201 
-            </div>
199 
+              <div className='dashboard__memberlist__title subTitle'>
200 
+                Liste des membres
201 
+              </div>
202 202
203 
-            <div className='dashboard__memberlist__wrapper'>
204 
-              <ul className='dashboard__memberlist__list'>
205 
-                <li className='dashboard__memberlist__list__item'>
206 
-                  <div className='dashboard__memberlist__list__item__avatar'>
207 
-                    <img src={imgProfil} alt='avatar' />
208 
-                  </div>
209 
-                  <div className='dashboard__memberlist__list__item__info'>
210 
-                    <div className='dashboard__memberlist__list__item__info__name'>
211 
-                      Jean Dupont
203 
+              <div className='dashboard__memberlist__wrapper'>
204 
+                <ul className='dashboard__memberlist__list'>
205 
+                  <li className='dashboard__memberlist__list__item'>
206 
+                    <div className='dashboard__memberlist__list__item__avatar'>
207 
+                      <img src={imgProfil} alt='avatar' />
212 208 
                     </div>
213 
-                    <div className='dashboard__memberlist__list__item__info__role'>
214 
-                      Responsable
209 
+                    <div className='dashboard__memberlist__list__item__info'>
210 
+                      <div className='dashboard__memberlist__list__item__info__name'>
211 
+                        Jean Dupont
212 
+                      </div>
213 
+                      <div className='dashboard__memberlist__list__item__info__role'>
214 
+                        Responsable
215 
+                      </div>
215 216 
                     </div>
216 
-                  </div>
217 
-                </li>
217 
+                  </li>
218 218
219 
-                <li className='dashboard__memberlist__list__item'>
220 
-                  <div className='dashboard__memberlist__list__item__avatar'>
221 
-                    <img src={imgProfil} alt='avatar' />
222 
-                  </div>
223 
-                  <div className='dashboard__memberlist__list__item__info'>
224 
-                    <div className='dashboard__memberlist__list__item__info__name'>
225 
-                      Aldwin Vinel
219 
+                  <li className='dashboard__memberlist__list__item'>
220 
+                    <div className='dashboard__memberlist__list__item__avatar'>
221 
+                      <img src={imgProfil} alt='avatar' />
226 222 
                     </div>
227 
-                    <div className='dashboard__memberlist__list__item__info__role'>
228 
-                      lecteur
223 
+                    <div className='dashboard__memberlist__list__item__info'>
224 
+                      <div className='dashboard__memberlist__list__item__info__name'>
225 
+                        Aldwin Vinel
226 
+                      </div>
227 
+                      <div className='dashboard__memberlist__list__item__info__role'>
228 
+                        lecteur
229 
+                      </div>
229 230 
                     </div>
230 
-                  </div>
231 
-                </li>
231 
+                  </li>
232 232
233 
-                <li className='dashboard__memberlist__list__item'>
234 
-                  <div className='dashboard__memberlist__list__item__avatar'>
235 
-                    <img src={imgProfil} alt='avatar' />
236 
-                  </div>
237 
-                  <div className='dashboard__memberlist__list__item__info'>
238 
-                    <div className='dashboard__memberlist__list__item__info__name'>
239 
-                      William Himme
233 
+                  <li className='dashboard__memberlist__list__item'>
234 
+                    <div className='dashboard__memberlist__list__item__avatar'>
235 
+                      <img src={imgProfil} alt='avatar' />
240 236 
                     </div>
241 
-                    <div className='dashboard__memberlist__list__item__info__role'>
242 
-                      contributeur
237 
+                    <div className='dashboard__memberlist__list__item__info'>
238 
+                      <div className='dashboard__memberlist__list__item__info__name'>
239 
+                        William Himme
240 
+                      </div>
241 
+                      <div className='dashboard__memberlist__list__item__info__role'>
242 
+                        contributeur
243 
+                      </div>
243 244 
                     </div>
244 
-                  </div>
245 
-                </li>
245 
+                  </li>
246 246
247 
-                <li className='dashboard__memberlist__list__item'>
248 
-                  <div className='dashboard__memberlist__list__item__avatar'>
249 
-                    <img src={imgProfil} alt='avatar' />
250 
-                  </div>
251 
-                  <div className='dashboard__memberlist__list__item__info'>
252 
-                    <div className='dashboard__memberlist__list__item__info__name'>
253 
-                      Yacine Lite
247 
+                  <li className='dashboard__memberlist__list__item'>
248 
+                    <div className='dashboard__memberlist__list__item__avatar'>
249 
+                      <img src={imgProfil} alt='avatar' />
254 250 
                     </div>
255 
-                    <div className='dashboard__memberlist__list__item__info__role'>
256 
-                      Gestionnaire de contenu
251 
+                    <div className='dashboard__memberlist__list__item__info'>
252 
+                      <div className='dashboard__memberlist__list__item__info__name'>
253 
+                        Yacine Lite
254 
+                      </div>
255 
+                      <div className='dashboard__memberlist__list__item__info__role'>
256 
+                        Gestionnaire de contenu
257 
+                      </div>
257 258 
                     </div>
258 
-                  </div>
259 
-                </li>
259 
+                  </li>
260 260
261 
-                <li className='dashboard__memberlist__list__item'>
262 
-                  <div className='dashboard__memberlist__list__item__avatar'>
263 
-                    <img src={imgProfil} alt='avatar' />
264 
-                  </div>
265 
-                  <div className='dashboard__memberlist__list__item__info'>
266 
-                    <div className='dashboard__memberlist__list__item__info__name'>
267 
-                      Yacine Lite
261 
+                  <li className='dashboard__memberlist__list__item'>
262 
+                    <div className='dashboard__memberlist__list__item__avatar'>
263 
+                      <img src={imgProfil} alt='avatar' />
268 264 
                     </div>
269 
-                    <div className='dashboard__memberlist__list__item__info__role'>
270 
-                      Gestionnaire de contenu
265 
+                    <div className='dashboard__memberlist__list__item__info'>
266 
+                      <div className='dashboard__memberlist__list__item__info__name'>
267 
+                        Yacine Lite
268 
+                      </div>
269 
+                      <div className='dashboard__memberlist__list__item__info__role'>
270 
+                        Gestionnaire de contenu
271 
+                      </div>
271 272 
                     </div>
272 
-                  </div>
273 
-                </li>
273 
+                  </li>
274 274
275 
-                <li className='dashboard__memberlist__list__item'>
276 
-                  <div className='dashboard__memberlist__list__item__avatar'>
277 
-                    <img src={imgProfil} alt='avatar' />
278 
-                  </div>
279 
-                  <div className='dashboard__memberlist__list__item__info'>
280 
-                    <div className='dashboard__memberlist__list__item__info__name'>
281 
-                      Yacine Lite
275 
+                  <li className='dashboard__memberlist__list__item'>
276 
+                    <div className='dashboard__memberlist__list__item__avatar'>
277 
+                      <img src={imgProfil} alt='avatar' />
282 278 
                     </div>
283 
-                    <div className='dashboard__memberlist__list__item__info__role'>
284 
-                      Gestionnaire de contenu
279 
+                    <div className='dashboard__memberlist__list__item__info'>
280 
+                      <div className='dashboard__memberlist__list__item__info__name'>
281 
+                        Yacine Lite
282 
+                      </div>
283 
+                      <div className='dashboard__memberlist__list__item__info__role'>
284 
+                        Gestionnaire de contenu
285 
+                      </div>
285 286 
                     </div>
286 
-                  </div>
287 
-                </li>
287 
+                  </li>
288 288
289 
-              </ul>
290 
-              <div className='dashboard__memberlist__btnadd'>
291 
-                <div className='dashboard__memberlist__btnadd__button'>
292 
-                  <div className='dashboard__memberlist__btnadd__button__avatar'>
293 
-                    <img src={listMemberBtn} alt='avatar' />
294 
-                  </div>
295 
-                  <div className='dashboard__memberlist__btnadd__button__text'>
296 
-                     Ajouter un membre
289 
+                </ul>
290 
+                <div className='dashboard__memberlist__btnadd'>
291 
+                  <div className='dashboard__memberlist__btnadd__button'>
292 
+                    <div className='dashboard__memberlist__btnadd__button__avatar'>
293 
+                      <img src={listMemberBtn} alt='avatar' />
294 
+                    </div>
295 
+                    <div className='dashboard__memberlist__btnadd__button__text'>
296 
+                       Ajouter un membre
297 
+                    </div>
297 298 
                   </div>
298 299 
                 </div>
299 
-              </div>
300 300
301 
-              <form className='dashboard__memberlist__addmember'>
302 
-                <input type='text' className='dashboard__memberlist__addmember__name' placeholder='Name' />
303 
-                <div className='dashboard__memberlist__addmember__role'>
304 
-                  <div className='dashboard__memberlist__addmember__role__dropdown dropdown'>
305 
-                    <button className='dashboard__memberlist__addmember__role__dropdown__button btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
306 
-                      Rôle du membre
307 
-                    </button>
308 
-                    <div className='dashboard__memberlist__addmember__role__dropdown__submenu dropdown-menu'>
309 
-                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
310 
-                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
311 
-                          <i className='fa fa-eye' />
301 
+                <form className='dashboard__memberlist__addmember'>
302 
+                  <input type='text' className='dashboard__memberlist__addmember__name form-control' placeholder='Name' />
303 
+                  <div className='dashboard__memberlist__addmember__role'>
304 
+                    <div className='dashboard__memberlist__addmember__role__dropdown dropdown'>
305 
+                      <button className='dashboard__memberlist__addmember__role__dropdown__button btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
306 
+                        Rôle du membre
307 
+                      </button>
308 
+                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu dropdown-menu'>
309 
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
310 
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
311 
+                            <i className='fa fa-eye' />
312 
+                          </div>
313 
+                          Lecteur
312 314 
                         </div>
313 
-                        Lecteur
314 
-                      </div>
315 
-                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
316 
-                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
317 
-                          <i className='fa fa-pencil' />
315 
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
316 
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
317 
+                            <i className='fa fa-pencil' />
318 
+                          </div>
319 
+                          contributeur
318 320 
                         </div>
319 
-                        contributeur
320 
-                      </div>
321 
-                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
322 
-                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
323 
-                          <i className='fa fa-graduation-cap' />
321 
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
322 
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
323 
+                            <i className='fa fa-graduation-cap' />
324 
+                          </div>
325 
+                          Gestionnaire de contenu
324 326 
                         </div>
325 
-                        Gestionnaire de contenu
326 
-                      </div>
327 
-                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
328 
-                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
329 
-                          <i className='fa fa-legal' />
327 
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
328 
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
329 
+                            <i className='fa fa-gavel' />
330 
+                          </div>
331 
+                          Responsable
330 332 
                         </div>
331 
-                        Responsable
332 333 
                       </div>
333 334 
                     </div>
334 335 
                   </div>
335 
-                </div>
336 
-                <input type='submit' className='dashboard__memberlist__addmember__submitbtn' />
337 
-              </form>
336 
+                  <input type='submit' className='dashboard__memberlist__addmember__submitbtn' />
337 
+                </form>
338 338
339 
+              </div>
339 340 
             </div>
340 341 
           </div>
341 
-        </div>
342 342
343 
-        <div className='dashboard__webdav'>
343 
+          <div className='dashboard__webdav genericWebdav'>
344 344
345 
-          <div className='dashboard__webdav__btn'>
346 
-            <div className='dashboard__webdav__btn__icon'>
347 
-              <i className='fa fa-windows' />
348 
-            </div>
345 
+            <div className='dashboard__webdav__btn genericWebdav__btn'>
346 
+              <div className='dashboard__webdav__btn__icon genericWebdav__btn__icon'>
347 
+                <i className='fa fa-windows' />
348 
+              </div>
349 349
350 
-            <div className='dashboard__webdav__btn__text'>
351 
-              Implémenter Tracim dans votre explorateur
350 
+              <div className='dashboard__webdav__btn__text genericWebdav__btn__text'>
351 
+                Implémenter Tracim dans votre explorateur
352 
+              </div>
352 353 
             </div>
353 
-          </div>
354 354
355 
-          <div className='dashboard__webdav__information'>
356 
-            <div className='dashboard__webdav__information__text'>
357 
-              Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
358 
-            </div>
355 
+            <div className='dashboard__webdav__information genericWebdav__info'>
356 
+              <div className='dashboard__webdav__information__text genericWebdav__info__text'>
357 
+                Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
358 
+              </div>
359 359
360 
-            <div className='dashboard__webdav__information__link'>
361 
-              http://algoo.trac.im/webdav/
360 
+              <div className='dashboard__webdav__information__link genericWebdav__info__link'>
361 
+                http://algoo.trac.im/webdav/
362 
+              </div>
362 363 
             </div>
363 
-          </div>
364 364
365 
+          </div>
365 366 
         </div>
366 
-
367 367 
       </div>
368 368 
     )
369 369 
   }

+ 65 - 136
src/css/Dashboard.styl View File 

@@ -1,11 +1,26 @@
1 
+flexwrap()
2 
+  display flex
3 
+  flex-wrap wrap
4 
+
5 
+btnNotification()
6 
+  margin 20px 0
7 
+  border 1px solid blue
8 
+  padding 10px 15px
9 
+
10 
+hoverfocus()
11 
+  background-color blue
12 
+  color white
13 
+
14 
+bgandcolor()
15 
+  background-color transparent
16 
+  color blue
17 
+
1 18 
 .dashboard
2 
-  margin-left 50px
19 
+  margin-left 20px
3 20 
   &__title
4 
-    margin 20px 0
5 
-    font-size 35px
6 
-  &__wkscontainer
7 
-    display flex
8 
-    flex-wrap wrap
21 
+    margin 0
22 
+  &__wkswrapper
23 
+    flexwrap()
9 24 
   &__workspace
10 25 
     margin-right 20px
11 26 
     width calc(65% - 20px) //20px => margin-right
 
@@ -20,8 +35,7 @@
20 35 
   &__userstatut
21 36 
     width 35%
22 37 
     &__role
23 
-      display flex
24 
-      flex-wrap wrap
38 
+      flexwrap()
25 39 
       margin 20px 0
26 40 
       font-size 18px
27 41 
       &__text
 
@@ -34,48 +48,28 @@
34 48 
     &__notification
35 49 
       font-size 18px
36 50 
       &__btn
37 
-        margin 20px 0
38 
-        border 1px solid blue
39 
-        padding 10px 15px
40 
-        color blue
51 
+        btnNotification()
52 
+        bgandcolor()
41 53 
         cursor pointer
42 54 
         &:hover , focus
43 
-          background-color blue
44 
-          color white
55 
+          hoverfocus()
45 56 
       &__subscribe
46 57 
         display none
47 58 
         &__btn
48 
-          margin 20px 0
49 
-          border 1px solid blue
50 
-          padding 10px 25px
51 
-          background-color transparent
52 
-          color blue
59 
+          btnNotification()
60 
+          bgandcolor()
53 61 
           &:hover,&:focus
54 
-            background-color blue
55 
-            color white
62 
+            hoverfocus()
56 63 
         &__submenu
57 64 
           padding 0
58 65 
           &__item
59 66 
             padding 10px
60 67 
             &:hover,&:focus
61 
-              background-color blue
62 
-              color white
68 
+              hoverfocus()
63 69 
   &__calltoaction
64 
-    display flex
65 
-    flex-wrap wrap
70 
+    flexwrap()
66 71 
     margin 50px 0
67 72 
     &__button
68 
-      display flex
69 
-      flex-direction column
70 
-      justify-content center
71 
-      margin 20px 30px 20px 0
72 
-      border-radius 10px
73 
-      padding 15px
74 
-      width 250px
75 
-      height 200px
76 
-      box-shadow shadow-all
77 
-      text-align center
78 
-      cursor pointer
79 73 
       &:active
80 74 
         box-shadow inset 0px 0px 5px 2px #656565
81 75 
       &__text
 
@@ -97,21 +91,16 @@
97 91 
     .explore
98 92 
       background-color explore
99 93 
   &__wksinfo
100 
-    display flex
101 
-    flex-wrap wrap
94 
+    flexwrap()
102 95 
   &__activity
103 96 
     margin 0 35px 50px 0
104 97 
     width 60%
105 98 
     &__header
106 99 
       display flex
100 
+      justify-content space-between
101 
+      align-items center
107 102 
       margin-bottom 20px
108 
-      &__title
109 
-        font-size 20px
110 
-        &__underline
111 
-          border-radius 10px
112 
-          width 150px
113 
-          height 3px
114 
-          background-color blue
103 
+      height 44px
115 104 
       &__allread
116 105 
         border 1px solid blue
117 106 
         padding 10px 25px
 
@@ -119,8 +108,7 @@
119 108 
         font-size 18px
120 109 
         cursor pointer
121 110 
         &:hover, &:focus
122 
-          background-color blue
123 
-          color white
111 
+          hoverfocus()
124 112 
     &__wrapper
125 113 
       border 1px solid grey
126 114 
       height 480px
 
@@ -148,19 +136,14 @@
148 136 
         color blue
149 137 
         cursor pointer
150 138 
         &:hover, &:focus
151 
-          background-color blue
152 
-          color white
139 
+          hoverfocus()
153 140 
   &__memberlist
154 141 
     margin 0 0 50px 0
155 142 
     width 35%
156 143 
     &__title
157 
-      margin-bottom 31px
158 
-      font-size 20px
159 
-      &__underline
160 
-        border-radius 10px
161 
-        width 150px
162 
-        height 3px
163 
-        background-color blue
144 
+      margin-bottom 20px
145 
+      padding 6px
146 
+      height 45px
164 147 
     &__wrapper
165 148 
       position relative
166 149 
       border 1px solid grey
 
@@ -175,6 +158,8 @@
175 158 
         display flex
176 159 
         border-bottom 1px solid grey
177 160 
         padding 10px 15px
161 
+        &:nth-last-child(1)
162 
+          border-bottom 0
178 163 
         &__avatar
179 164 
           margin-right 20px
180 165 
           width 50px
 
@@ -209,12 +194,13 @@
209 194 
       align-items center
210 195 
       height 100%
211 196 
       width 100%
212 
-      background-color #FDFDFD
197 
+      background-color off-white
213 198 
       &__name
214 199 
         margin-bottom 20px
215 200 
         border 1px solid grey
216 201 
         border-radius 10px
217 202 
         padding 10px 25px
203 
+        width auto
218 204 
       &__role
219 205 
         margin-bottom 20px
220 206 
         &__dropdown
 
@@ -222,69 +208,42 @@
222 208 
             border 1px solid blue
223 209 
             border-radius 10px
224 210 
             padding 10px 25px
225 
-            background-color transparent
226 
-            color blue
211 
+            bgandcolor()
212 
+            &::after
213 
+              margin 10px 0 0 20px
227 214 
             &:hover,&:focus
228 
-              background-color blue
229 
-              color white
215 
+              hoverfocus()
230 216 
           &__submenu
231 217 
             padding 0
232 218 
             &__item
233 219 
               display flex
234 220 
               padding 10px
235 221 
               &:hover,&:focus
236 
-                background-color blue
237 
-                color white
222 
+                hoverfocus()
238 223 
               &__icon
239 224 
                 margin-right 15px
240 225 
       &__submitbtn
241 226 
         border 1px solid blue
242 227 
         border-radius 5px
243 228 
         padding 5px 35px
244 
-        background-color transparent
245 
-        color blue
229 
+        bgandcolor()
246 230 
         cursor pointer
247 231 
         &:hover, &:focus
248 
-          background-color blue
249 
-          color white
232 
+          hoverfocus()
250 233 
   &__webdav
251 234 
     margin-bottom 100px
252 235 
     &__btn
253 
-      display flex
254 
-      margin-bottom 30px
255 
-      border 1px solid blue
256 
-      border-radius 10px
257 
-      padding 15px 25px
258 
-      width 350px
259 
-      color blue
260 
-      cursor pointer
261 
-      &:hover, &:focus
262 
-        background-color blue
263 
-        color white
264 
-      &__icon
265 
-        margin-right 20px
266 
-        font-size 30px
236 
+      width 300px
267 237 
     &__information
268 238 
       display none
269 
-      border 1px solid grey
270 
-      border-radius 10px
271 
-      padding 15px 25px
272 239 
       width 600px
273 
-      &__text
274 
-        margin-bottom 35px
275 
-      &__link
276 
-        margin-bottom 15px
277 
-        border 1px solid grey
278 
-        border-radius 10px
279 
-        padding 15px 25px
280 
-        width 300px
281 240
282 241 
 /****** CLASS ACTIVE *******/
283 242
284 243 
 /*** active dropdown subscribe ***/
285 244
286 245 
 .activebtnsubs
287 
-  .dashboard__wksinfo__notification
246 
+  .dashboard__userstatut__notification
288 247 
     &__btn
289 248 
       display none
290 249 
     &__subscribe
 
@@ -302,8 +261,6 @@
302 261 
   .dashboard__webdav__information
303 262 
     display block
304 263
305 
-/******************************/
306 
-
307 264 
 /**** MEDIAQUERIES *****/
308 265
309 266 
 /**** MEDIA 576px & 1199px ****/
 
@@ -331,78 +288,50 @@
331 288 
   .dashboard
332 289 
     margin-left 15px
333 290
334 
-/******************************/
335 
-
336 291 
 /**** MEDIA 768px & 991px ****/
337 292
338 293 
 @media (min-width: min-md) and (max-width: max-md)
339 294
340 295 
   .dashboard
341 
-    margin-left 0
342 
-    &__title
343 
-      margin-left 15px
344 
-    &__workspace
345 
-      margin-left 15px
346 
-    &__userstatut
347 
-      margin-left 15px
348 296 
     &__activity
349 
-      margin 25px 0
350 
-      &__header
351 
-        margin 0 15px 20px 15px
352 
-    &__memberlist
353 
-      margin-left 15px
354 
-    &__webdav
355 
-      margin-left 15px
356 
-
357 
-/******************************/
297 
+      margin 25px 15px 25px 0
358 298
359 299 
 /**** MEDIA 576px & 767px ****/
360 300
361 301 
 @media (min-width: min-sm) and (max-width: max-sm)
362 302
363 303 
   .dashboard
364 
-    margin-left 0
365 
-    &__title
366 
-      margin-left 15px
367 
-    &__workspace
368 
-      margin-left 15px
369 
-    &__userstatut
370 
-      margin-left 15px
371 304 
     &__activity
372 
-      margin 25px 0
373 
-      &__header
374 
-        margin 0 15px 20px 15px
305 
+      margin 25px 15px 25px 0
375 306 
     &__memberlist
376 307 
       margin 50px 0
377 308 
       width 90%
378 
-      &__title
379 
-        margin-left 15px
380 
-    &__webdav
381 
-      margin-left 15px
382 
-      &__information
383 
-        width 525px
384 
-
385 
-/******************************/
309 
+    &__webdav__information
310 
+      width 500px
386 311
387 312 
 /**** MEDIA 575px ****/
388 313
389 314 
 @media (max-width: max-xs)
390 315
316 
+  position()
317 
+    margin-left 10px
318 
+    width auto
319 
+
391 320 
   .dashboard
392 321 
     margin-left 0
393 322 
     &__title
394 323 
       margin-left 10px
395 324 
     &__workspace
396 
-      margin-left 10px
397 
-      width auto
325 
+      position()
398 326 
     &__userstatut
399 
-      margin-left 15px
400 
-      width auto
327 
+     position()
401 328 
     &__calltoaction
402 329 
       justify-content center
330 
+      &__button
331 
+        margin-right 0
403 332 
     &__activity
404 
-      width 100%
405 333 
       margin 25px 0
334 
+      width 100%
406 335 
       &__header
407 336 
         display block
408 337 
         height auto

+ 40 - 0
src/css/Generic.styl View File 

@@ -98,6 +98,18 @@
98 98 
 .fa-ticket
99 99 
   color issueColor
100 100
101 
+.fa-graduation-cap
102 
+  color gestionnaire
103 
+
104 
+.fa-pencil
105 
+  color contributeur
106 
+
107 
+.fa-gavel
108 
+  color responsable
109 
+
110 
+.fa-eye
111 
+  color lecteur
112 
+
101 113 
 .subTitle
102 114 
   font-size 20px
103 115 
   font-weight 500
 
@@ -122,6 +134,34 @@
122 134 
   text-align center
123 135 
   cursor pointer
124 136
137 
+.genericWebdav
138 
+  &__btn
139 
+    display flex
140 
+    margin-bottom 30px
141 
+    border 1px solid blue
142 
+    border-radius 10px
143 
+    padding 15px 25px
144 
+    color blue
145 
+    cursor pointer
146 
+    &:hover, &:focus
147 
+      background-color blue
148 
+      color white
149 
+    &__icon
150 
+      margin-right 20px
151 
+      font-size 30px
152 
+  &__info
153 
+    border 1px solid grey
154 
+    border-radius 10px
155 
+    padding 15px 25px
156 
+    &__text
157 
+      margin-bottom 35px
158 
+    &__link
159 
+      display inline-block
160 
+      margin-bottom 15px
161 
+      border 1px solid grey
162 
+      border-radius 10px
163 
+      padding 15px 25px
164 
+
125 165 
 /********************/
126 166
127 167 
 /*** PAGE FILE, THREAD, HTML, MARKDOWN, ISSUE ***/