[damned-lies] Style the registration form



commit 5ce78a04d63af4deeac869b61ae7cb92db8f3ca1
Author: Tom Tryfonidis <tomtryf gmail com>
Date:   Wed Oct 3 15:54:22 2012 +0300

    Style the registration form
    
    https://bugzilla.gnome.org/show_bug.cgi?id=685166

 common/static/css/login.css          |   37 ++++++++++++++++++++++++----
 common/static/css/text.css           |   12 ++++++++-
 templates/registration/register.html |   43 +++++++++++++++++++--------------
 3 files changed, 67 insertions(+), 25 deletions(-)
---
diff --git a/common/static/css/login.css b/common/static/css/login.css
index 90e75ef..be125f7 100644
--- a/common/static/css/login.css
+++ b/common/static/css/login.css
@@ -1,8 +1,33 @@
 /* LOGIN FORM */
 
-.login #container { background:white; border:1px solid #ccc; width:28em; min-width:300px; margin-left:auto; margin-right:auto; margin-top:100px; }
-.login #content-main { width:100%; }
-.login form { margin-top:1em; }
-.login .form-row { padding:4px 0; float:left; width:100%; }
-.login .form-row label, .login .submit-row label { float:left; width:11em; padding-right:0.5em; line-height:1.1em; text-align:right; font-size:1em; color:#333; }
-.login .form-row #id_username, .login .form-row #id_password { width:14em; }
+.login{
+	max-width: 890px;
+}
+.login #password{
+	float:left;
+}
+.login #openid{
+	float:right;
+	margin-top:2em;
+}
+.login form {
+	margin-top:1em;
+}
+.login .form-row {
+	padding:4px 0;
+	width:100%;
+}
+.login .form-row label, .login .submit-row label {
+	float:left;
+	width:11em;
+	padding: 0.4em 0.5em 0 0;
+	line-height:1.1em;
+	text-align:right;
+	font-size:1em;
+	color:#333;
+	vertical-align: top;
+}
+.login .form-row #id_username,#id_password, #id_email{
+	width:14em;
+	vertical-align: middle;
+}
diff --git a/common/static/css/text.css b/common/static/css/text.css
index 4c47bd4..a3f809c 100644
--- a/common/static/css/text.css
+++ b/common/static/css/text.css
@@ -70,7 +70,12 @@ code {
 }
 
 .main_feature {
-    font-size: 16pt;
+    font-size: 21px;
+    line-height: 130%;
+}
+
+.main_register {
+    font-size: 17px;
     line-height: 130%;
 }
 
@@ -82,6 +87,11 @@ code {
     color: #888a85;
 }
 
+.help{
+	font-size: 12px;
+	color: #888a85;
+}
+
 .more {
     background: url(../images/more-arrow.png) right 6px no-repeat;
     cursor: pointer;
diff --git a/templates/registration/register.html b/templates/registration/register.html
index 8ee96ee..b3bffa6 100644
--- a/templates/registration/register.html
+++ b/templates/registration/register.html
@@ -10,7 +10,7 @@
 {% if user.is_authenticated %}
   <p>{% blocktrans with user.username as username %}You are already logged in as {{ username }}.{% endblocktrans %}</p>
 {% else %}
-<p>{% trans "You can register here for an account on this site. This is only useful if you plan to contribute to GNOME translations." %}</p>
+<p class="main_register">{% trans "You can register here for an account on this site. This is only useful if you plan to contribute to GNOME translations." %}</p>
 <p>{% trans "After registration and connection, you will be able to join an existing team from your profile page." %}</p>
 
 <form action="/register/" method="post" id="login-form" class="login">
@@ -23,30 +23,37 @@
     {{ form.email.errors }}
     <label for="id_email">{{ form.email.label }}</label> {{ form.email }}
   </div>
-  <table style="clear:both"><tr><td colspan="2">
-    <div style="clear:both">{{ form.non_field_errors }}</div>
+
+	<p class="main_register">{% trans "Authenticate via OpenID <strong>or</strong> password:" %}</p>
+	<div style="clear:both">{{ form.non_field_errors }}</div>
+
+<div class="login">
+	<div id="password">
+		<div class="form-row">
+			{{ form.password1.errors }}
+			<label for="id_password">{{ form.password1.label }}</label> {{ form.password1 }} <span class="help">{{ form.password1.help_text }}</span>
+		</div>
+  <div class="form-row">
+    <label for="id_password">{{ form.password2.label }}</label> {{ form.password2 }}
+  </div>
+  <div class="form-row">
+    <label>&nbsp;</label><input type="submit" value="{% trans 'Register with password' %}" />
+  </div>
+</div>
+
 {% if openid_path %}
-    <p>{% trans "Authenticate via OpenID <strong>or</strong> password:" %}</p></td></tr><tr><td valign="bottom">
-  <div>
+<div id="openid">
+	<div class="form-row">
     {{ form.openid_url.errors }}
     <label for="id_openid"><img src="{{ openid_path }}logo/" alt=""> {{ form.openid_url.label }}</label> {{ form.openid_url }}
   </div>
-  <div style="text-align:center; padding-top:8px;">
+	<div class="form-row">
     <label>&nbsp;</label><input type="submit" value="{% trans 'Register with OpenID' %}" />
   </div>
-  </td><td valign="bottom">
+</div>
 {% endif %}
-  <div class="form-row">
-    {{ form.password1.errors }}
-    <label for="id_password">{{ form.password1.label }}</label> {{ form.password1 }} <span class="help">{{ form.password1.help_text }}</span>
-  </div>
-  <div class="form-row">
-    <label for="id_password">{{ form.password2.label }}</label> {{ form.password2 }}
-  </div>
-  <div style="text-align:center; padding-top:8px;">
-    <label>&nbsp;</label><input type="submit" value="{% trans 'Register with password' %}" />
-  </div>
-  </td></tr></table>
+
+</div> <!-- ends div.login -->
 </form>
 
 <script type="text/javascript">



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]