settings: Move success / failure indicator to the top

And scroll there on any error (previously, we would scroll only if we end up
submitting the form).

(imported from commit 63597c4da78ac92cd5c2314d6d174d178b1caaf3)

templates/zephyr/settings.html

@@ -7,6 +7,8 @@
       {# One text line worth of space #}
       <div>&nbsp;</div>
 
+      <div class="alert" id="settings-status"></div>
+
       <div class="form-horizontal" id="api_key_button_box">
           <div class="control-group">
               <label class="control-label label_for_text">API key</label>
@@ -118,8 +120,6 @@
     </form>
     </div>
 
-    <div class="alert" id="settings-status"></div>
-
     <hr class="settings_separator" />
 
     <p><button class="btn declare_bankruptcy_button" data-dismiss="modal" aria-hidden="true">

zephyr/static/js/ui.js

@@ -765,6 +765,9 @@ $(function () {
     var settings_status = $('#settings-status');
 
     function settings_change_error(message) {
+        // Scroll to the top so the error message is visible.
+        // We would scroll anyway if we end up submitting the form.
+        viewport.scrollTop(0);
         settings_status.removeClass(status_classes)
             .addClass('alert-error')
             .text(message).stop(true).fadeTo(0,1);