Improve Profile#account page UI

Dmitriy Zaporozhets
1 parent 1935b494
Showing 3 changed files with 40 additions and 22 deletions Show diff stats
app/assets/stylesheets/common.scss
app/assets/stylesheets/sections/profile.scss
app/views/profiles/accounts/show.html.haml
@@ -270,26 +270,6 @@ li.note {
   }
 }
  
-.oauth_select_holder {
-  img {
-    padding: 5px;
-    margin-right: 10px;
-  }
-  .active {
-    img {
-      border: 1px solid #ccc;
-      background: $hover;
-      @include border-radius(5px);
-    }
-  }
-}
-
-.btn-build-token {
-  float: left;
-  padding: 6px 20px;
-  margin-right: 12px;
-}
-
 .gitlab-promo {
   a {
     color: #aaa;
@@ -4,3 +4,41 @@
     margin-bottom: 0;
   }
 }
+
+.account-page {
+  fieldset {
+    margin-bottom: 15px;
+    border-bottom: 1px dashed #ddd;
+    padding-bottom: 15px;
+
+    &:last-child {
+      border: none;
+    }
+
+    legend {
+      border: none;
+      margin: 0;
+    }
+  }
+}
+
+.oauth_select_holder {
+  img {
+    padding: 2px;
+    margin-right: 10px;
+  }
+  .active {
+    img {
+      border: 1px solid #4BD;
+      background: $hover;
+      @include border-radius(5px);
+    }
+  }
+}
+
+.btn-build-token {
+  float: left;
+  padding: 6px 20px;
+  margin-right: 12px;
+}
+
@@ -7,7 +7,7 @@
 %hr
  
  
-%div
+.account-page
   %fieldset.update-token
     %legend
       Private token
@@ -33,7 +33,7 @@
   - if show_profile_social_tab?
     %fieldset
       %legend Social Accounts
-      .oauth_select_holder
+      .oauth_select_holder.append-bottom-10
         %p Click on icon to activate signin with one of the following services
         - enabled_social_providers.each do |provider|
           %span{class: oauth_active_class(provider) }
...	...	@@ -270,26 +270,6 @@ li.note {
270	270	}
271	271	}
272	272
273		-.oauth_select_holder {
274		- img {
275		- padding: 5px;
276		- margin-right: 10px;
277		- }
278		- .active {
279		- img {
280		- border: 1px solid #ccc;
281		- background: $hover;
282		- @include border-radius(5px);
283		- }
284		- }
285		-}
286		-
287		-.btn-build-token {
288		- float: left;
289		- padding: 6px 20px;
290		- margin-right: 12px;
291		-}
292		-
293	273	.gitlab-promo {
294	274	a {
295	275	color: #aaa;
...	...
...	...	@@ -4,3 +4,41 @@
4	4	margin-bottom: 0;
5	5	}
6	6	}
	7	+
	8	+.account-page {
	9	+ fieldset {
	10	+ margin-bottom: 15px;
	11	+ border-bottom: 1px dashed #ddd;
	12	+ padding-bottom: 15px;
	13	+
	14	+ &:last-child {
	15	+ border: none;
	16	+ }
	17	+
	18	+ legend {
	19	+ border: none;
	20	+ margin: 0;
	21	+ }
	22	+ }
	23	+}
	24	+
	25	+.oauth_select_holder {
	26	+ img {
	27	+ padding: 2px;
	28	+ margin-right: 10px;
	29	+ }
	30	+ .active {
	31	+ img {
	32	+ border: 1px solid #4BD;
	33	+ background: $hover;
	34	+ @include border-radius(5px);
	35	+ }
	36	+ }
	37	+}
	38	+
	39	+.btn-build-token {
	40	+ float: left;
	41	+ padding: 6px 20px;
	42	+ margin-right: 12px;
	43	+}
	44	+
...	...
...	...	@@ -7,7 +7,7 @@
7	7	%hr
8	8
9	9
10		-%div
	10	+.account-page
11	11	%fieldset.update-token
12	12	%legend
13	13	Private token
...	...	@@ -33,7 +33,7 @@
33	33	- if show_profile_social_tab?
34	34	%fieldset
35	35	%legend Social Accounts
36		- .oauth_select_holder
	36	+ .oauth_select_holder.append-bottom-10
37	37	%p Click on icon to activate signin with one of the following services
38	38	- enabled_social_providers.each do \|provider\|
39	39	%span{class: oauth_active_class(provider) }
...	...