From b5ed50ac2b69db3ef62b584642af88faecab6c27 Mon Sep 17 00:00:00 2001
From: Matt Claypotch <thepotch@gmail.com>
Date: Thu, 8 Dec 2011 16:49:09 -0800
Subject: [PATCH] switch to anchors for browserid buttons to avoid css
 positioning bug (bug 708507)

---
 .../addons/templates/addons/paypal_start.html |  4 +--
 apps/users/templates/users/login_form.html    |  4 +--
 apps/users/templates/users/mobile/login.html  |  4 +--
 media/css/impala/forms.less                   | 11 +++++++-
 media/css/impala/header.less                  | 28 +++++++++----------
 media/css/mobile/forms.less                   |  6 ++--
 media/css/zamboni/mobile.css                  |  2 ++
 7 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/apps/addons/templates/addons/paypal_start.html b/apps/addons/templates/addons/paypal_start.html
index 1470753646..972195ef12 100644
--- a/apps/addons/templates/addons/paypal_start.html
+++ b/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 %}
diff --git a/apps/users/templates/users/login_form.html b/apps/users/templates/users/login_form.html
index 53032c1911..ce7c51e4b5 100644
--- a/apps/users/templates/users/login_form.html
+++ b/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>?
diff --git a/apps/users/templates/users/mobile/login.html b/apps/users/templates/users/mobile/login.html
index ed2153eb90..895151586b 100644
--- a/apps/users/templates/users/mobile/login.html
+++ b/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">
diff --git a/media/css/impala/forms.less b/media/css/impala/forms.less
index 4815805ed7..997bc8dd6c 100644
--- a/media/css/impala/forms.less
+++ b/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;
 }
+
diff --git a/media/css/impala/header.less b/media/css/impala/header.less
index cb5880cca1..7abbfe79eb 100644
--- a/media/css/impala/header.less
+++ b/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;
-}
diff --git a/media/css/mobile/forms.less b/media/css/mobile/forms.less
index f3dc277de2..26d9decd98 100644
--- a/media/css/mobile/forms.less
+++ b/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;
 }
diff --git a/media/css/zamboni/mobile.css b/media/css/zamboni/mobile.css
index 0c8ffec52e..b0fd23e706 100644
--- a/media/css/zamboni/mobile.css
+++ b/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;
 }
 
 /************************************/