From 32908c7717e80c03b2e0e3886abbdf34e1d3c61e Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Fri, 26 Sep 2014 22:31:06 -0400 Subject: [PATCH] style changes for account pages --- app/assets/javascripts/src/Metamaps.js | 23 +++---- app/assets/stylesheets/application.css | 86 ++++++++++++++------------ app/assets/stylesheets/clean.css | 12 +--- app/views/users/edit.html.erb | 16 +++-- app/views/users/sessions/new.html.erb | 27 ++++---- 5 files changed, 84 insertions(+), 80 deletions(-) diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js index 7ded91f1..d0f6057d 100644 --- a/app/assets/javascripts/src/Metamaps.js +++ b/app/assets/javascripts/src/Metamaps.js @@ -3466,23 +3466,12 @@ Metamaps.Map.InfoBox = { Metamaps.Account = { init: function () { var self = Metamaps.Account; - $(".changePass").click(function(){ - $(".toHide").show(); - $(".changePass").hide(); - }); - }, - load: function(){ - var self = Metamaps.Account; - $(".changePass").click(function(){ - $(".toHide").show(); - $(".changePass").hide(); - }); - self.attachEventListeners(); + }, - attachEventListeners: function () { - $(".changePass").click(); - $(".noChangePass").click(); + changeName: function(){ + $('.accountName').hide(); + $('.changeName').show(); }, showPass: function(){ $(".toHide").show(); @@ -3491,6 +3480,10 @@ Metamaps.Account = { hidePass: function(){ $(".toHide").hide(); $(".changePass").show(); + + $('#current_password').val(''); + $('#user_password').val(''); + $('#user_password_confirmation').val(''); } }; diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 38b61813..8ae9967a 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -51,6 +51,22 @@ img { display: block; text-indent: -9999px; } + +::-webkit-input-placeholder { /* WebKit browsers */ + color: #BDBDBD; +} +:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #BDBDBD; + opacity: 1; +} +::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #BDBDBD; + opacity: 1; +} +:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: #BDBDBD; +} + html, body, .main, @@ -109,10 +125,10 @@ body, } .edit_user .userImage { - width: 120px; + width: 84px; margin: 0 auto; position: relative; - margin-top: 40px; + margin-top: 32px; } .edit_user .editPhoto { display: none; @@ -120,8 +136,8 @@ body, height: 40px; background-image: url(photo.png); position: absolute; - top: 40px; - left: 40px; + top: 22px; + left: 22px; cursor: pointer; } .edit_user .userImage:hover .editPhoto { @@ -294,8 +310,11 @@ input[type="submit"]:active { line-height: 18px; } +.edit_user label.firstFieldText { + padding-top: 8px; +} .firstFieldText{ - font-family: din-regular; + font-family: 'din-regular', helvetica, sans-serif; font-size: 14px; color:#424242; padding-top:24px; @@ -324,17 +343,16 @@ input[type="submit"]:active { text-transform: none; } -.name { +.accountName { font-size: 24px; text-align: center; - font-family: din-meduim; + font-family: 'din-medium', helvetica, sans-serif; color:#424242; margin-top: 24px; text-transform: none; } - -.name:after { +.accountName:hover .nameEdit:after { background:url(edit.png)no-repeat; content:" "; position:absolute; @@ -342,6 +360,10 @@ input[type="submit"]:active { height:25px; margin:5px 0px 0px 5px; } +.changeName { + display: none; + margin-top: 24px; +} .changePass { font-family: din-regular; @@ -377,11 +399,11 @@ input[type="submit"]:active { appearance: none; display: inline-block; margin: 0px 0px; - padding: 10px 0px 0px 9px; + padding: 5px 0px 0px 9px; background: #fff; - color: #bdbdbd; - border: 1px solid #d9d9d9; - border-top: 1px solid #c0c0c0; + color: #424242 !important; + border: none; + outline:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -396,7 +418,7 @@ input[type="submit"]:active { text-indent: 0px; text-shadow: none; display: inline-block; - font-family: din-medium; + font-family: 'din-regular', helvetica, sans-serif; text-align: left; } @@ -406,28 +428,17 @@ input[type="submit"]:active { height:32px; border-radius: 2px; background-color:#ffffff; - color:#bdbdbd; + color: #424242 !important; font-family: din-medium; font-size: 14px; text-align: left; - padding: 11px 0px 0px 10px; + padding: 5px 0px 0px 10px; } .login input[type="email"] { margin-bottom:10px; } -.centerGreyForm input[type="text"]:hover, -.centerGreyForm input[type="email"]:hover, -.centerGreyForm input[type="password"]:hover { - border: 1px solid #b9b9b9; - border-top: 1px solid #a0a0a0; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - color: #424242; -} - .new_topic { /* start it off screen while it initializes the spinner, then it will be hidden with jquery */ top: -1000px; @@ -758,8 +769,7 @@ li.accountInvite span { margin: 0; padding: 0 10px; background: #fff; - border: 1px solid #d9d9d9; - border-top: 1px solid #c0c0c0; + border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -767,7 +777,7 @@ li.accountInvite span { -moz-border-radius: 2px; border-radius: 2px; font: -webkit-small-control; - color: #BDBDBD; + color: #424242 !important; letter-spacing: normal; word-spacing: normal; text-transform: none; @@ -776,14 +786,6 @@ li.accountInvite span { text-align: start; font-family: 'din-medium', helvetica, sans-serif; } -.sidebarAccountBox input[type="email"]:hover, -.sidebarAccountBox input[type="password"]:hover { - border: 1px solid #b9b9b9; - border-top: 1px solid #a0a0a0; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -} .accountSubmit { float:left; } @@ -2267,7 +2269,15 @@ float: left; display: none; } + /* collabCompass section */ +.collabCompass { + position:fixed; + top:50%; + left:50%; + z-index: 4; +} + .collabCompass:hover p { display: block; } diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css index 4548ad71..918af0c3 100644 --- a/app/assets/stylesheets/clean.css +++ b/app/assets/stylesheets/clean.css @@ -805,14 +805,4 @@ box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24); body a#barometer_tab:hover { background-position: 0 -110px; -} - - -/* REALTIME */ - -.collabCompass { - position:fixed; - top:50%; - left:50%; - z-index: 4; -} +} \ No newline at end of file diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb index 56afbb88..82166dbf 100644 --- a/app/views/users/edit.html.erb +++ b/app/views/users/edit.html.erb @@ -9,21 +9,27 @@ <%= form_for @user, url: user_url, :html =>{ :class => "edit_user centerGreyForm"} do |form| %>

Edit Account

- <%= image_tag @user.image.url(:round), :size => "120x120" %> + <%= image_tag @user.image.url(:round), :size => "84x84" %>
-
<%= @user.name %>
+
+
<%= @user.name %>
+
+
<%= form.label :name, "Name:", :class => "firstFieldText" %> + <%= form.email_field :name %>
<%= form.label :email, "Email:", :class => "firstFieldText" %> <%= form.email_field :email %>
Change Password
-
<%= form.label :password, "Current Password:", :class => "firstFieldText" %> - <%= form.password_field :password, :autocomplete => :off%>
+
+ <%= form.label :current_password, "Current Password:", :class => "firstFieldText" %> + <%= password_field_tag :current_password, params[:current_password] %> +
<%= form.label :password, "New Password:", :class => "firstFieldText" %> <%= form.password_field :password, :autocomplete => :off%>
<%= form.label :password_confirmation, "Confirm New Password:", :class => "firstFieldText" %> <%= form.password_field :password_confirmation, :autocomplete => :off%>
-
oops, don't change password
+
Oops, don't change password
<%= form.submit "Update", class: "update" %> <% end %> diff --git a/app/views/users/sessions/new.html.erb b/app/views/users/sessions/new.html.erb index 0ce0e56c..16836175 100644 --- a/app/views/users/sessions/new.html.erb +++ b/app/views/users/sessions/new.html.erb @@ -6,22 +6,27 @@
- <%= f.email_field :email, :autofocus => true %>
+ <%= f.email_field :email, :autofocus => true, :placeholder => "Email" %>
- <%= f.password_field :password %>
+ <%= f.password_field :password, :placeholder => "Password" %> -
<%= f.submit "Sign in" %>
+
<%= f.submit "Sign in" %>
+ <% if devise_mapping.rememberable? -%> -
<%= f.check_box :remember_me %>
+
+ <%= f.label :remember_me, "Stay signed in" %> + <%= f.check_box :remember_me %> +
+
<% end -%> - -
- <%- if devise_mapping.recoverable? && controller_name != 'passwords' %> - <%= link_to "Forgot your password?", new_password_path(resource_name), :class => "forgotPasswordText" , - :data => { :bypass => 'true'}%>
- <% end -%> -
+
+
+ <%- if devise_mapping.recoverable? && controller_name != 'passwords' %> + <%= link_to "Forgot password?", new_password_path(resource_name), + :data => { :bypass => 'true'} %> + <% end -%> +
<% end %>