style changes for account pages

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 () {
+    changeName: function(){
-        $(".changePass").click();
+        $('.accountName').hide();
-        $(".noChangePass").click();
+        $('.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('');
     }
 };
 

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;
+    top: 22px;
-    left: 40px;
+    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;
 
 }
-
+.accountName:hover .nameEdit:after {
-.name: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;
+    color: #424242 !important;
-    border: 1px solid #d9d9d9;
+    border: none;
-    border-top: 1px solid #c0c0c0;
+    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: none;
-    border-top: 1px solid #c0c0c0;
     -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;
 }

app/assets/stylesheets/clean.css

@@ -806,13 +806,3 @@ 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;
-}

app/views/users/edit.html.erb

@@ -9,21 +9,27 @@
 <%= form_for @user, url: user_url, :html =>{ :class => "edit_user centerGreyForm"} do |form| %>
   <h3>Edit Account</h3>
   <div class="userImage">
-    <%= image_tag @user.image.url(:round), :size => "120x120" %>
+    <%= image_tag @user.image.url(:round), :size => "84x84" %>
     <div class="editPhoto"></div>
   </div>
-  <div class="name"> <%= @user.name %> </div>
+  <div class="accountName" onclick="Metamaps.Account.changeName()">
+    <div class="nameEdit"><%= @user.name %></div>
+  </div>
+  <div class="changeName"><%= form.label :name, "Name:", :class => "firstFieldText" %>
+  <%= form.email_field :name  %></div>
   <div><%= form.label :email, "Email:", :class => "firstFieldText" %>
   <%= form.email_field :email  %></div>
   <div class="changePass" onclick="Metamaps.Account.showPass()">Change Password</div>
   <div class="toHide">
-  <div><%= form.label :password, "Current Password:", :class => "firstFieldText" %>
+  <div>
-  <%= form.password_field :password, :autocomplete => :off%></div>
+    <%= form.label :current_password, "Current Password:", :class => "firstFieldText" %>
+    <%= password_field_tag :current_password, params[:current_password] %>
+  </div>
    <div><%= form.label :password, "New Password:", :class => "firstFieldText" %>
   <%= form.password_field :password, :autocomplete => :off%></div>
    <div><%= form.label :password_confirmation, "Confirm New Password:", :class => "firstFieldText" %>
   <%= form.password_field :password_confirmation, :autocomplete => :off%></div>
-  <div class="noChangePass" onclick="Metamaps.Account.hidePass()">oops, don't change password</div>
+  <div class="noChangePass" onclick="Metamaps.Account.hidePass()">Oops, don't change password</div>
 </div>
   <%= form.submit "Update", class: "update" %>
 <% end %>

app/views/users/sessions/new.html.erb

@@ -6,22 +6,27 @@
   
   <div class="accountImage"></div>
   <div>
-  <%= f.email_field :email, :autofocus => true %></div>
+  <%= f.email_field :email, :autofocus => true, :placeholder => "Email" %></div>
 
   <div>
-  <%= f.password_field :password %></div>
+  <%= f.password_field :password, :placeholder => "Password" %></div>
+
+  <div class="accountSubmit"><%= f.submit "Sign in" %></div>
   
-  <div><%= f.submit "Sign in" %></div>
   <% if devise_mapping.rememberable? -%>
-    <div><%= f.check_box :remember_me %></div>
+  <div class="accountRememberMe">
+    <%= f.label :remember_me, "Stay signed in" %>
+    <%= f.check_box :remember_me %>
+    <div class="clearfloat"></div>
+  </div>
   <% end -%>
-
+  <div class="clearfloat"></div>
-  <br />
+  <div class="accountForgotPass">
-  <%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
+    <%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
-    <%= link_to "Forgot your password?", new_password_path(resource_name), :class => "forgotPasswordText" , 
+      <%= link_to "Forgot password?", new_password_path(resource_name), 
-        :data => { :bypass => 'true'}%><br />
+        :data => { :bypass => 'true'} %>
-  <% end -%>
+    <% end -%>
-  <br />
+  </div>
 <% end %>
 </div>