Improve the look of the OpenID enabled login form on mobile devices

diff --git a/app/views/user/login.html.erb b/app/views/user/login.html.erb
index 556843c2a0fe97d55203c61277fe417d045beca7..0616d76f8aa23c4c31ebb7f09b853aaa42457860 100644 (file)
--- a/app/views/user/login.html.erb
+++ b/app/views/user/login.html.erb
@@ -15,15 +15,17 @@
       </table>
       <%= submit_tag t('user.login.login_button'), :tabindex => 3 %>
 
+      <br clear="all" />
+
       <p><%= t 'user.login.with openid' %></p>
 
-      <table id="login_openid_buttons">
+      <table id="login_openid_buttons_wide">
         <tr>
           <td>
             <%=
               link_to_function(image_tag("openid_large.png", :alt => t("user.login.openid_providers.openid.title")), nil, :title => t("user.login.openid_providers.openid.title")) do |page|
                 page[:login_form][:openid_url].value = "http://"
-                page[:login_openid_buttons].hide
+                page[:login_openid_buttons_wide].hide
                 page[:login_openid_url].show
                 page[:login_openid_submit].show
               end
@@ -39,6 +41,30 @@
         </tr>
       </table>
 
+      <table id="login_openid_buttons_narrow">
+        <tr>
+          <td>
+            <%=
+              link_to_function(image_tag("openid_large.png", :alt => t("user.login.openid_providers.openid.title")), nil, :title => t("user.login.openid_providers.openid.title")) do |page|
+                page[:login_form][:openid_url].value = "http://"
+                page[:login_openid_buttons_narrow].hide
+                page[:login_openid_url].show
+                page[:login_openid_submit].show
+              end
+            %>
+          </td>
+          <td><%= openid_button "google", "gmail.com" %></td>
+        </tr>
+        <tr>
+          <td><%= openid_button "yahoo", "me.yahoo.com" %></td>
+          <td><%= openid_button "myopenid", "myopenid.com" %></td>
+        </tr>
+        <tr>
+          <td><%= openid_button "wordpress", "wordpress.com" %></td>
+          <td><%= openid_button "aol", "aol.com" %></td>
+        </tr>
+      </table>
+
       <table>
         <tr id="login_openid_url">
           <td class="fieldName nowrap">

diff --git a/public/stylesheets/large.css b/public/stylesheets/large.css
index 458099add6b855137b1800e8b75eb211882c5b98..95490fddc657dea617883416898617bf5ecb3e13 100644 (file)
--- a/public/stylesheets/large.css
+++ b/public/stylesheets/large.css
@@ -21,8 +21,6 @@
 
 /* Rules for the login form */
 
-.loginBox {
-  width: 400px;
-  height: 200px;
-  margin-bottom: 40px;
+#login_openid_buttons_narrow {
+  display: none;
 }

diff --git a/public/stylesheets/small.css b/public/stylesheets/small.css
index 76fea4fccc3034b1f90216ab0e035365a66b3588..2c6f669df021b4d60ea988a58ae1e34f831547c1 100644 (file)
--- a/public/stylesheets/small.css
+++ b/public/stylesheets/small.css
@@ -126,23 +126,18 @@ h1 {
 
 /* Rules for the login form */
 
-.loginBox {
-  width: 90%;
-}
-
-.loginBox input#user_email {
+#loginForm input#user_email {
   width: 100%;
   max-width: 18em;
 }
 
-.loginBox input#user_password {
+#loginForm input#user_password {
   width: 100%;
   max-width: 18em;
 }
 
-.loginBox input#user_openid_url {
-  width: 100%;
-  max-width: 18em;
+#login_openid_buttons_wide {
+  display: none;
 }
 
 /* Rules for the profile page */