Merge

profile.html

@@ -29,8 +29,9 @@ $(function() {
 
            loc=false;
 
-           $("#location_sub").html('<input id="id_loc_text" type="text" name="loc_text" />'+
-                                   '<input type="button" id="change_loc_button" value="Change" />');
+           $("#location_sub").html('<form>'+'<input id="id_loc_text" type="text" name="loc_text" />'+
+             '<input type="submit" id="change_loc_button" value="Save" />'+'</form>');
+
            $("#change_loc_button").click(function() {
              $("#change_location").show();
 
@@ -50,8 +51,8 @@ $(function() {
 
          if(lang) {
            lang=false;
-           $("#language_sub").html('<input id="id_lang_text" type="text" name="lang_text" />'+
-                                   '<input type="button" id="change_lang_button" value="Change" />');
+           $("#language_sub").html('<form>'+'<input id="id_lang_text" type="text" name="lang_text" />'+
+             '<input type="submit" id="change_lang_button" value="Save" />'+'</form>');
            $("#change_lang_button").click(function() {
              $("#change_language").show();
               postJSON('/change_setting', {'language':$("#id_lang_text").attr("value")}, function(json) {
@@ -140,15 +141,13 @@ $(function() {
         <li>Forum name: <strong>${username}</strong></li>
         <li>E-mail: <strong>${email}</strong></li>
         <li>
-          Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Change</a>
+          Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Edit</a>
         </li>
         <li>
-          Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Change</a>
+          Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Edit</a>
         </li>
       </ul>
 
-      <!-- <div><a class="modal" href="#change_password_pop">Reset password</a></div> -->
-
       <div id="change_password_pop">
         <h2>Password change</h2>
         <p>We'll e-mail a password reset link to ${email}.</p>

sass/_profile.scss

@@ -26,13 +26,26 @@ div.profile-wrapper {
         @include box-shadow(0 1px 0 #eee);
         padding: 7px lh();
         border-bottom: 1px solid #d3d3d3;
+        position: relative;
 
         div#location_sub, div#language_sub {
           font-weight: bold;
           @include inline-block();
 
+          form {
+            width: 100%;
+          }
+
           input {
-            margin: lh(.5) 0;
+
+            &[type="text"] {
+              margin: lh(.5) 0;
+              width: 100%;
+              @include box-sizing(border-box);
+            }
+
+            &[type="input"]{
+            }
           }
 
           &:empty {
@@ -43,6 +56,19 @@ div.profile-wrapper {
         div#description {
           font-size: 12px;
         }
+
+        a#change_language, a#change_location {
+          position: absolute;
+          top: 9px;
+          right: lh(.5);
+          text-transform: uppercase;
+          font-size: 12px;
+          color: #999;
+
+          &:hover {
+            color: #555;
+          }
+        }
       }
     }