From 8d38da6b77b6e10afdf6edccc7bc69e1b567ff5b Mon Sep 17 00:00:00 2001
From: Tom Hughes <tom@compton.nu>
Date: Sun, 29 May 2011 10:17:30 +0100
Subject: [PATCH] Improve the look of the OpenID enabled login form on mobile
 devices

---
 app/views/user/login.html.erb | 30 ++++++++++++++++++++++++++++--
 public/stylesheets/large.css  |  6 ++----
 public/stylesheets/small.css  | 13 ++++---------
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/app/views/user/login.html.erb b/app/views/user/login.html.erb
index 556843c2a..0616d76f8 100644
--- 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 458099add..95490fddc 100644
--- 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 76fea4fcc..2c6f669df 100644
--- 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 */
-- 
2.43.2