switch to anchors for browserid buttons to avoid css positioning bug (bug 708507)

apps/addons/templates/addons/paypal_start.html

@@ -52,11 +52,11 @@
       <p>{{ loc('Complete your purchase with PayPal.  No PayPal account is necessary.') }}</p>
       {% else %}
       <div class="paypal-user login">
-        <button class="browserid-login button prominent" type="button"
+        <a class="browserid-login button prominent"
           data-url="{{ url('users.browserid_login') }}" data-event="login-complete"
           data-profile-form-url="{{ url('users.complete_profile_form') }}">
           {{ loc('Log in / Register') }}
-        </button>
+        </a>
       </div>
       <p>{{ loc('You need to be logged in to download and install apps to your browser.') }}}</p>
       {% endif %}

apps/users/templates/users/login_form.html

@@ -11,11 +11,11 @@
   {% endif %}
   {% if waffle.switch('browserid-login') %}
   <fieldset id="browserid-login">
-    <button class="browserid-login" type="button"
+    <a class="browserid-login button"
       data-url="{{ url('users.browserid_login') }}"
       data-profile-form-url="{{ url('users.complete_profile_form') }}">
       {{ loc('Log in / Register') }}
-    </button>
+    </a>
     <div class="user-message">
       {% trans %}
       Are you an <a href="#" id="show-normal-login">admin or editor</a>?

apps/users/templates/users/mobile/login.html

@@ -33,11 +33,11 @@
   <section id="content">
     {% if waffle.switch('browserid-login') %}
       <section id="browserid">
-        <button class="browserid-login button" type="submit"
+        <a class="browserid-login button"
                 data-url="{{ url('users.browserid_login') }}"
                 data-profile-form-url="{{ url('users.complete_profile_form') }}">
           {{ _('Log in with BrowserID') }}
-        </button>
+        </a>
       </section>
     {% else %}
       <form method="post" action="" class="form-mobile featured-inner object-lead user-input">

media/css/impala/forms.less

@@ -385,7 +385,16 @@ button.loading-submit:after {
     top: 0;
     width: 16px;
 }
-.login button.loading-submit:after {
+
+.browserid-login.loading-submit:after {
+    background-image: url("../../img/zamboni/loading-white.gif");
+    content: "";
+    display: block;
+    height: 16px;
+    margin-left: 10px;
+    position: absolute;
     right: -24px;
     top: 5px;
+    width: 16px;
 }
+

media/css/impala/header.less

@@ -3,6 +3,20 @@
 .amo-header {
     font-family: @head-sans;
     margin-bottom: 25px;
+
+    /* Log in link loader */
+    a.loading-submit:before {
+        background-image: url("../../img/zamboni/loading-white.gif");
+        content: "";
+        display: block;
+        height: 16px;
+        left: -20px;
+        margin-right: 10px;
+        margin-top: -8px;
+        position: absolute;
+        top: 50%;
+        width: 16px;
+    }
 }
 
 #masthead {
@@ -496,17 +510,3 @@ button.search-button {
 .developer-hub .site-tip {
     display: none !important;
 }
-
-/* Log in link loader */
-a.loading-submit:before {
-    background-image: url("../../img/zamboni/loading-white.gif");
-    content: "";
-    display: block;
-    height: 16px;
-    left: -20px;
-    margin-right: 10px;
-    margin-top: -8px;
-    position: absolute;
-    top: 50%;
-    width: 16px;
-}

media/css/mobile/forms.less

@@ -91,14 +91,14 @@
     }
 }
 
-.loading-submit:after {
+.browserid-login.loading-submit:after {
     background-image: url("../../img/zamboni/loading-white.gif");
     content: "";
     display: block;
     height: 16px;
     margin-left: 10px;
     position: absolute;
-    right: -10px;
-    top: 0;
+    right: -32px;
+    top: 12px;
     width: 16px;
 }

media/css/zamboni/mobile.css

@@ -1262,9 +1262,11 @@ button:active,
 
 #browserid {
     margin-bottom: 2em;
+    text-align: center;
 }
 #browserid .button {
     margin: auto;
+    display: inline-block;
 }
 
 /************************************/