Use fieldset. Improved profile

Dmitriy Zaporozhets
1 parent cc539151
Showing 8 changed files with 66 additions and 73 deletions Show diff stats
app/assets/stylesheets/common.scss
app/assets/stylesheets/sections/header.scss
app/assets/stylesheets/sections/nav.scss
app/assets/stylesheets/sections/profile.scss
app/views/keys/index.html.haml
app/views/profile/account.html.haml
app/views/profile/design.html.haml
app/views/profile/show.html.haml
@@ -20,18 +20,6 @@ body {
   float:right;
 }
-.profile_avatar_holder {
-  float:left;
-  width:60px;
-  height:60px;
-  margin-right:20px;
-  img {
-    width:60px;
-    height:60px;
-    background:#eee;
-  }
-}
-
 .visible_link,
 .author_link {
@@ -156,12 +156,7 @@ header {
   display: block; } }
   .account-links {
-    background: #79C3E0;
-    display: none;
     border-radius: 5px;
-    width: 100px;
-    margin-top: 0;
-    float: right;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
     position: relative;
     &:before {
@@ -171,33 +166,33 @@ header {
       position: absolute;
       border: 5px solid transparent;
       border-color: rgba(255, 255, 255, 0);
-      border-bottom-color: #333;
+      border-bottom-color: #555;
       text-indent: -9999px;
       top: -10px;
       line-height: 0;
       right: 10px;
     z-index: 10; }
-    background: #333;
+    background: #555;
     display: none;
     z-index: 100000;
     @include border-radius(4px);
     width: 100px;
     position: absolute;
-    right: 10px;
-    top: 42px;
+    right: 5px;
+    top: 38px;
     margin-top: 0;
     float: right;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
     a {
-      color: #EEE;
-      padding: 6px 10px;
+      color: #fff;
+      padding: 7px 10px;
       display: block;
       text-shadow: none;
-      border-bottom: 1px solid #555;
+      border-bottom: 1px solid #666;
       font-size: 12px;
       &:hover {
-        color:#eee;
-        background: #444;
+        color:#fff;
+        background: #333;
       }
     }
   }
@@ -6,7 +6,7 @@ ul.main_menu {
   border-radius: 4px;
   margin: auto;
   margin:30px 0;
-  border:1px solid #AAA;
+  border:1px solid #BBB;
   height:37px;
   @include bg-gray-gradient;
   position:relative;
@@ -6,3 +6,17 @@
     }
   }
 }
+
+.profile_avatar_holder {
+  float:left;
+  width:60px;
+  height:60px;
+  margin-right:20px;
+  img {
+    width:60px;
+    height:60px;
+    background:#fff;
+    padding: 1px;
+    border: 1px solid #ddd;
+  }
+}
@@ -18,5 +18,5 @@
   - if @keys.blank?
     %tr
       %td{colspan: 3}
-        %h3.nothing_here_message There are no SSH keys with access to your account.
+        %p.nothing_here_message There are no SSH keys with access to your account.
 - if Gitlab.config.omniauth_enabled?
   %fieldset
-    %legend
-      %h3.page_title Social Accounts
+    %legend Social Accounts
     .oauth_select_holder
       %p.hint Tip: Click on icon to activate sigin with one of the following services
       - User.omniauth_providers.each do |provider|
@@ -11,10 +10,9 @@
 %fieldset
   %legend
-    %h3.page_title
-      Private token
-      %span.cred.right
-        keep it secret!
+    Private token
+    %span.cred.right
+      keep it secret!
   .padded
     = form_for @user, url: profile_reset_private_token_path, method: :put do |f|
       .data
@@ -31,8 +29,7 @@
             = f.submit 'Generate', class: "btn success btn-build-token"
 %fieldset
-  %legend
-    %h3.page_title Password
+  %legend Password
   = form_for @user, url: profile_password_path, method: :put do |f|
     .padded
       %p.slead After successful password update you will be redirected to login page where you should login with new password
 = form_for @user, url: profile_update_path, remote: true, method: :put do |f|
-  %div
-    %h3.page_title Application theme
-    %br
+  %fieldset
+    %legend Application theme
     .themes_opts
       = label_tag do
         .prev
@@ -23,19 +22,19 @@
     %br
     .clearfix
-  %h3.page_title Code review
-  %br
-  .themes_opts
-    = label_tag do
-      .prev
-        = image_tag "white.png"
-      = f.radio_button :dark_scheme, false
-      White code preview
-    = label_tag do
-      .prev
-        = image_tag "dark.png"
-      = f.radio_button :dark_scheme, true
-      Dark code preview
+  %fieldset
+    %legend Code review
+    .themes_opts
+      = label_tag do
+        .prev
+          = image_tag "white.png"
+        = f.radio_button :dark_scheme, false
+        White code preview
+      = label_tag do
+        .prev
+          = image_tag "dark.png"
+        = f.radio_button :dark_scheme, true
+        Dark code preview
 :javascript
   $(function(){
 .profile_avatar_holder
-  = image_tag gravatar_icon(@user.email, 90), class: "styled_image"
+  = image_tag gravatar_icon(@user.email, 90)
 %h3.page_title
   = @user.name
   %br
@@ -19,21 +19,23 @@
       .control-group
         = f.label :name, class: "control-label"
         .controls
-          = f.text_field :name, class: "input-xlarge"
+          = f.text_field :name, class: "input-xlarge", required: true
           %span.help-block Enter your name, so people you know can recognize you.
       .control-group
         = f.label :email, class: "control-label"
         .controls
-          = f.text_field :email, class: "input-xlarge"
+          = f.text_field :email, class: "input-xlarge", required: true
           %span.help-block We also use email for avatar detection.
     .span5.right
-      %div.tips
-        %h6 Tips:
+      %fieldset.tips
+        %legend Tips:
         %ul
+          %li
+            %p You can change your password on Account page
           -unless Gitlab.config.disable_gravatar?
             %li
-              %p.hint You can change your avatar at #{link_to "gravatar.com", "http://gravatar.com"}
+              %p You can change your avatar at #{link_to "gravatar.com", "http://gravatar.com"}
           - if Gitlab.config.omniauth_enabled? && @user.provider?
             %li
@@ -41,7 +43,6 @@
                 You can login through #{@user.provider.titleize}!
                 = link_to "click here to change", profile_account_path
-  %hr
   .row
     .span7
       .control-group
@@ -59,23 +60,22 @@
           = f.text_area :bio, rows: 6, class: "input-xlarge", maxlength: 250
           %span.help-block Tell us about yourself in fewer than 250 characters.
     .span5.right
-      .ui-box.white
-        .ui-box-body
-          %h4
-            Personal projects:
-            %small.right
-              %span= current_user.my_own_projects.count
-              of
-              %span= current_user.projects_limit
+      %fieldset
+        %legend
+          Personal projects:
+          %small.right
+            %span= current_user.my_own_projects.count
+            of
+            %span= current_user.projects_limit
+        .padded
           .progress
             .bar{style: "width: #{current_user.projects_limit_percent}%;"}
-      .ui-box.white
-        .ui-box-body
-          %h4
-            SSH public keys:
-            %strong.right= link_to current_user.keys.count, keys_path
-
+      %fieldset
+        %legend
+          SSH public keys:
+          %strong.right= link_to current_user.keys.count, keys_path
+        .padded
           = link_to "Add Public Key", new_key_path, class: "btn small"
   .form-actions
	@@ -20,18 +20,6 @@ body {		@@ -20,18 +20,6 @@ body {
20	float:right;	20	float:right;
21	}	21	}
22		22
23	-.profile_avatar_holder {
24	- float:left;
25	- width:60px;
26	- height:60px;
27	- margin-right:20px;
28	- img {
29	- width:60px;
30	- height:60px;
31	- background:#eee;
32	- }
33	-}
34	-
35		23
36	.visible_link,	24	.visible_link,
37	.author_link {	25	.author_link {
	@@ -6,7 +6,7 @@ ul.main_menu {		@@ -6,7 +6,7 @@ ul.main_menu {
6	border-radius: 4px;	6	border-radius: 4px;
7	margin: auto;	7	margin: auto;
8	margin:30px 0;	8	margin:30px 0;
9	- border:1px solid #AAA;	9	+ border:1px solid #BBB;
10	height:37px;	10	height:37px;
11	@include bg-gray-gradient;	11	@include bg-gray-gradient;
12	position:relative;	12	position:relative;
	@@ -6,3 +6,17 @@		@@ -6,3 +6,17 @@
6	}	6	}
7	}	7	}
8	}	8	}
		9	+
		10	+.profile_avatar_holder {
		11	+ float:left;
		12	+ width:60px;
		13	+ height:60px;
		14	+ margin-right:20px;
		15	+ img {
		16	+ width:60px;
		17	+ height:60px;
		18	+ background:#fff;
		19	+ padding: 1px;
		20	+ border: 1px solid #ddd;
		21	+ }
		22	+}
	@@ -18,5 +18,5 @@		@@ -18,5 +18,5 @@
18	- if @keys.blank?	18	- if @keys.blank?
19	%tr	19	%tr
20	%td{colspan: 3}	20	%td{colspan: 3}
21	- %h3.nothing_here_message There are no SSH keys with access to your account.	21	+ %p.nothing_here_message There are no SSH keys with access to your account.
22		22