[geeklog-cvs] geeklog: newpro: Localised OAuth and OpenID login buttons

[geeklog-cvs at lists.geeklog.net]

changeset 8539:b8f2df9ad0a7
url:  http://project.geeklog.net/cgi-bin/hgwebdir.cgi/geeklog/rev/b8f2df9ad0a7
user: Rouslan Placella <rouslan at placella.com>
date: Thu Mar 15 00:14:36 2012 +0000
description:
newpro: Localised OAuth and OpenID login buttons

diffstat:

 public_html/layout/newpro/css/form.css           |  39 +++++++++++++++++++++++-
 public_html/layout/newpro/loginform.thtml        |  18 ++++------
 public_html/layout/newpro/loginform_oauth.thtml  |   5 +-
 public_html/layout/newpro/loginform_openid.thtml |  17 ++++++---
 4 files changed, 59 insertions(+), 20 deletions(-)

diffs (141 lines):

diff -r 93121cbd9f23 -r b8f2df9ad0a7 public_html/layout/newpro/css/form.css
--- a/public_html/layout/newpro/css/form.css	Wed Mar 14 23:56:35 2012 +0000
+++ b/public_html/layout/newpro/css/form.css	Thu Mar 15 00:14:36 2012 +0000
@@ -68,6 +68,15 @@
   Login Form
 --------------------------------------*/
 
+/* Input sizing */
+form#loginform input,
+form.third-party-login input {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
 /* Form Item */
 form#loginform dl {
   margin: 0;
@@ -84,11 +93,15 @@
   padding: 0;
 }
 
+form#loginform input.submit {
+  height: 28px;
+  font-size: 12px;
+}
+
 /* Form Option Menu */
 form#loginform ul.navi {
   list-style-position: outside;
   list-style-type: none;
-  margin: 0;
   padding: 0;
 }
 
@@ -97,3 +110,27 @@
   padding: 0;
 }
 
+/* Third party login */
+form.third-party-login {
+  margin: 0.1em 0;
+}
+
+form.third-party-login div {
+  position: relative;
+}
+
+form.third-party-login div img {
+  position: absolute;
+  left: 6px;
+  top: 6px;
+}
+
+form.third-party-login div input.submit {
+  text-indent: 24px;
+  font-size: 12px;
+  height: 28px;
+}
+
+div.third-party-login {
+  width: 164px;
+}
diff -r 93121cbd9f23 -r b8f2df9ad0a7 public_html/layout/newpro/loginform.thtml
--- a/public_html/layout/newpro/loginform.thtml	Wed Mar 14 23:56:35 2012 +0000
+++ b/public_html/layout/newpro/loginform.thtml	Thu Mar 15 00:14:36 2012 +0000
@@ -2,9 +2,7 @@
 <!-- loginform.thtml { -->
 
 <form action="{site_url}/users.php" method="post" id="loginform" class="basic">
-  <fieldset>
-    <legend>{lang_login}</legend>
-
+  <div>
     <dl>
       <dt><label for="loginform-loginname">{lang_username}</label></dt>
       <dd><input type="text" size="12" value="" name="loginname" id="loginform-loginname" class="text"{xhtml}></dd>
@@ -18,14 +16,12 @@
     <ul class="submit">
       <li><input type="submit" value="{lang_login}" class="submit"{xhtml}></li>
     </ul>
-
-    <ul class="navi">
-      <li>{lang_signup}</li>
-      <li>{lang_forgetpassword}</li>
-    </ul>
-  </fieldset>
+  </div>
+  <ul class="navi">
+    <li>{lang_signup}</li>
+    <li>{lang_forgetpassword}</li>
+  </ul>
 </form>
+{oauth_login}
 {openid_login}
-{oauth_login}
-
 <!-- } loginform.thtml -->
diff -r 93121cbd9f23 -r b8f2df9ad0a7 public_html/layout/newpro/loginform_oauth.thtml
--- a/public_html/layout/newpro/loginform_oauth.thtml	Wed Mar 14 23:56:35 2012 +0000
+++ b/public_html/layout/newpro/loginform_oauth.thtml	Thu Mar 15 00:14:36 2012 +0000
@@ -1,8 +1,9 @@
 <!-- loginform_oauth.thtml { -->
 
-<form action="{site_url}/users.php?oauth_login={oauth_service}" method="post">
+<form class="third-party-login" action="{site_url}/users.php?oauth_login={oauth_service}" method="post">
   <div>
-    <input src="{oauth_sign_in_image}"{oauth_sign_in_image_style} type="image"{xhtml}>
+    <img alt="" src="{oauth_sign_in_image}"{xhtml}>
+    <input value="{lang_oauth_service}" type="submit" class="submit"{xhtml}>
   </div>
 </form>
 
diff -r 93121cbd9f23 -r b8f2df9ad0a7 public_html/layout/newpro/loginform_openid.thtml
--- a/public_html/layout/newpro/loginform_openid.thtml	Wed Mar 14 23:56:35 2012 +0000
+++ b/public_html/layout/newpro/loginform_openid.thtml	Thu Mar 15 00:14:36 2012 +0000
@@ -1,12 +1,17 @@
 
 <!-- loginform_openid.thtml { -->
-
-<form action="{site_url}/users.php?openid_login=1" method="post">
+<form class="third-party-login" action="{site_url}/users.php?openid_login=1" method="post">
   <div>
-    <label for="identity_url">{lang_openid_login}</label><br{xhtml}>
-    <input name="identity_url" id="identity_url" style='background: url("{site_url}/images/openid_login_icon.png") no-repeat;background-color:#fff;background-position:0 50%;color:#000;padding-left:18px;font-family:monospace;font-size:10px' value="http://" size="{input_field_size}"{xhtml}>
-    <input src="{site_url}/images/right_arrow.png" style="padding:1px;margin-bottom:-5px;height:16px;width:16px;border:1px" type="image"{xhtml}>
+    <div style="display: none;">
+      <!-- this is revealed by login.js -->
+      <img alt="" src="{site_url}/images/openid_login_icon.png"{xhtml}>
+      <input value="{lang_openid_login}" type="submit" class="submit"{xhtml}>
+    </div>
+    <noscript>
+      <label for="identity_url">{lang_openid_login}</label><br{xhtml}>
+      <input name="identity_url" id="identity_url" style='background: url("{site_url}/images/openid_login_icon.png") no-repeat;background-color:#fff;background-position:0 50%;color:#000;padding-left:18px;font-family:monospace;font-size:10px' value="http://" size="{input_field_size}"{xhtml}>
+      <input src="{site_url}/images/right_arrow.png" style="padding:1px;margin-bottom:-5px;height:16px;width:16px;border:1px" type="image"{xhtml}>
+    </noscript>
   </div>
 </form>
-
 <!-- } loginform_openid.thtml -->