[extensions-web/wip/tomtryf/redesign: 13/18] Adjust forms to the new style

[Tom Tryfonidis <tomtryf src gnome org>]

commit f8b525c21804aafd160c0cfa2f81e895b8ddddf0
Author: Tom Tryfonidis <tomtryf gnome org>
Date:   Thu Feb 23 20:43:30 2017 +0200

    Adjust forms to the new style

 sweettooth/auth/templates/registration/login.html  |   43 +++++++-------
 .../registration/password_change_form.html         |   17 +++---
 .../registration/password_reset_confirm.html       |   16 ++---
 .../registration/password_reset_form.html          |   18 +++---
 .../templates/registration/registration_form.html  |   14 ++--
 .../extensions/templates/extensions/upload.html    |    6 +-
 sweettooth/static/css/sweettooth.css               |   61 ++++++++++++++++----
 7 files changed, 106 insertions(+), 69 deletions(-)
---
diff --git a/sweettooth/auth/templates/registration/login.html 
b/sweettooth/auth/templates/registration/login.html
index 1cfd850..e76599d 100644
--- a/sweettooth/auth/templates/registration/login.html
+++ b/sweettooth/auth/templates/registration/login.html
@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% block body %}
-<form action="" method="POST" id="auth_form">
+<div class="col-sm-8 col-md-6 col-centered">
+<form action="" method="POST" class="form" id="auth_form">
+  <h3>User Login</h3>
   <input type="hidden" name="next" value="{{ next }}">
   {% csrf_token %}
 
@@ -8,29 +10,30 @@
     <p class="error">{{ error }}</p>
   {% endfor %}
 
-  <ol>
-    <li>
-      {% for error in form.username.errors %}
-        <p class="error">{{ error }}</p>
-      {% endfor %}
+    <div class="form-group has-error">
       {{ form.username.label_tag }}
       {{ form.username }}
-    </li>
-
-    <li>
-      {% for error in form.password.errors %}
-        <p class="error">{{ error }}</p>
+    {% for error in form.username.errors %}
+        <span class="help-block">{{ error }}</span>
       {% endfor %}
-      {{ form.password.label_tag }}
+    </div>
+
+    <div class="form-group has-error">
+      {{ form.password.label_tag }} <a class="right" href="{% url 'auth_password_reset' %}">Forgot your 
password?</a>
+
       {{ form.password }}
-    </li>
+    {% for error in form.password.errors %}
+        <span class="help-block">{{ error }}</span>
+      {% endfor %}
+    </div>
 
-    <li class="submit">
-      <input type="submit" value="Log in">
-    </li>
-  </ol>
+    <div class="form-group">
+      <button type="submit" class="btn btn-primary btn-block">Log in</button>
+    </div>
 </form>
-
-<a href="{% url 'registration_register' %}">Register</a>
-<a href="{% url 'auth_password_reset' %}">Forgot your password?</a>
+<!--<a href="{% url 'auth_password_reset' %}">Forgot your password?</a>-->
+<hr>
+<p class="text-center main_feature" style="margin-bottom: 30px;">Don't have an account?</p>
+<a href="{% url 'registration_register' %}" class="btn btn-success btn-block no-decoration">Register</a>
+</div>
 {% endblock %}
diff --git a/sweettooth/auth/templates/registration/password_change_form.html 
b/sweettooth/auth/templates/registration/password_change_form.html
index bb7aad4..80487f7 100644
--- a/sweettooth/auth/templates/registration/password_change_form.html
+++ b/sweettooth/auth/templates/registration/password_change_form.html
@@ -1,14 +1,13 @@
 {% extends "base.html" %}
 {% block body %}
-<h3>Change your password</h3>
-<form action="" method="POST">
+<div class="col-sm-8 col-md-6 col-centered">
+<form action="" method="POST" id="auth_form">
   {% csrf_token %}
-  <ol>
-    {{ form.as_ul }}
-
-    <li class="submit">
-      <input type="submit" value="Change password">
-    </li>
-  </ol>
+  <h3>Change your password</h3>
+  <ul>
+      {{ form.as_ul }}
+  </ul>
+  <button type="submit" class="btn btn-primary">Change password</button>
 </form>
+</div>
 {% endblock %}
diff --git a/sweettooth/auth/templates/registration/password_reset_confirm.html 
b/sweettooth/auth/templates/registration/password_reset_confirm.html
index 86ef87c..0b1e35d 100644
--- a/sweettooth/auth/templates/registration/password_reset_confirm.html
+++ b/sweettooth/auth/templates/registration/password_reset_confirm.html
@@ -1,16 +1,14 @@
 {% extends "base.html" %}
 {% block body %}
 {% if validlink %}
-<h3> Password reset </h3>
-<form action="" method="POST">
+<div class="col-sm-8 col-md-6 col-centered">
+<form action="" method="POST" id="auth_form">
   {% csrf_token %}
-  <ol>
-    {{ form.as_ul }}
-
-    <li class="submit">
-      <input type="submit" value="Reset your password">
-    </li>
-  </ol>
+  <h3>Password reset</h3>
+  <ul>
+  {{ form.as_ul }}
+  </ul>
+  <button type="submit" class="btn btn-primary">Reset your password</button>
 </form>
 {% else %}
 <p>The token for the password reset is incorrect. Please check your link and try again.</p>
diff --git a/sweettooth/auth/templates/registration/password_reset_form.html 
b/sweettooth/auth/templates/registration/password_reset_form.html
index 8c2921c..e100ef2 100644
--- a/sweettooth/auth/templates/registration/password_reset_form.html
+++ b/sweettooth/auth/templates/registration/password_reset_form.html
@@ -1,14 +1,14 @@
 {% extends "base.html" %}
 {% block body %}
-<h3> Password reset </h3>
-<form action="" method="POST">
+<div class="col-sm-8 col-md-6 col-centered">
+<form action="" method="POST" id="auth_form">
   {% csrf_token %}
-  <ol>
-    {{ form.as_ul }}
-
-    <li class="submit">
-      <input type="submit" value="Reset your password">
-    </li>
-  </ol>
+  <h3>Password reset</h3>
+  <p>Forgotten your password? Enter your e-mail address below, and we’ll e-mail instructions for setting a 
new one.</p>
+  <ul>
+  {{ form.as_ul }}
+  </ul>
+  <button type="submit" class="btn btn-primary">Reset your password</button>
 </form>
+</div>
 {% endblock %}
diff --git a/sweettooth/auth/templates/registration/registration_form.html 
b/sweettooth/auth/templates/registration/registration_form.html
index a074183..4c39ea2 100644
--- a/sweettooth/auth/templates/registration/registration_form.html
+++ b/sweettooth/auth/templates/registration/registration_form.html
@@ -1,13 +1,13 @@
 {% extends "base.html" %}
 {% block body %}
+<div class="col-sm-8 col-md-6 col-centered">
 <form action="" method="POST" id="auth_form">
   {% csrf_token %}
-  <ol>
-    {{ form.as_ul }}
-
-    <li class="submit">
-      <input type="submit" value="Register">
-    </li>
-  </ol>
+  <h3>Account Registration</h3>
+  <ul>
+  {{ form.as_ul }}
+  </ul>
+  <button type="submit" class="btn btn-primary btn-block">Register</button>
 </form>
+</div>
 {% endblock %}
diff --git a/sweettooth/extensions/templates/extensions/upload.html 
b/sweettooth/extensions/templates/extensions/upload.html
index d49dde8..2e2f12d 100644
--- a/sweettooth/extensions/templates/extensions/upload.html
+++ b/sweettooth/extensions/templates/extensions/upload.html
@@ -20,8 +20,7 @@
     Use <code>zip -j</code> when making your zipfile to ensure this. Other files like <code 
class="file">stylesheet.css</code> are optional.
   </p>
 
-  <form enctype="multipart/form-data" action=""
-        method="POST">
+  <form enctype="multipart/form-data" action="" method="POST">
     {% csrf_token %}
 
     {{ form.source }}
@@ -39,8 +38,7 @@
 
     <p>Make sure that you read <a 
href="http://blog.mecheye.net/2012/02/requirements-and-tips-for-getting-your-gnome-shell-extension-approved/";>Requirements
 and Tips for getting your GNOME Shell Extension approved</a> &mdash; it goes over some of the things that 
reviewers look for.</p>
 
-    <br>
-    <input type="submit" value="Upload extension">
+    <button type="submit" class="btn btn-primary">Upload extension</button>
   </form>
 
 </div>
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 88774d2..262c7af 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -9,6 +9,13 @@ span.action_button {
     margin: 10px;
 }
 
+/* User Profile */
+/* ==================================================================== */
+
+.profile ul {
+    padding-left: 0px;
+}
+
 /* Unreviewed Extension Counter */
 /* ==================================================================== */
 
@@ -31,31 +38,47 @@ span.action_button {
 /* Login Area */
 /* ==================================================================== */
 
-#auth_form ol {
+#auth_form  {
+    padding: 0;
+    margin: 0;
+}
+
+#auth_form h3 {
+    color: #0489B7;
+}
+
+#auth_form li, #auth_form ol {
     list-style-type: none;
-    font-size: 2em;
 }
 
-#auth_form .helptext {
-    font-size: 0.5em;
-    display: block;
+#auth_form ul {
+    padding: 0px;
 }
 
-#auth_form li.submit input {
-    width: 86.5%;
-    margin: 0 5%;
+#auth_form ul > li {
+    margin-bottom: 15px;
+}
+
+#auth_form .helptext {
+    display: block;
 }
 
 #auth_form label {
     display: inline-block;
-    width: 45%;
-    margin-left: 5%;
     line-height: 1.8;
     vertical-align: top;
 }
 
 #auth_form input {
-    width: 40%;
+    width: 100%;
+    height: 34px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+}
+#auth_form input:focus {
+    border-color: #66afe9;
+    outline: 0;
 }
 
 
@@ -623,6 +646,10 @@ p.message.warning {
     padding-right: 20px;
 }
 
+.errorlist {
+    color: #a94442;
+}
+
 /* Forms */
 /* ==================================================================== */
 
@@ -631,6 +658,12 @@ input, textarea, input[type=submit], button {
     border-radius: 4px;
 }
 
+input:focus,
+textarea:focus {
+    border-color: #66afe9;
+    outline: 0;
+}
+
 /* Opinion form */
 /* ==================================================================== */
 
@@ -653,6 +686,12 @@ input, textarea, input[type=submit], button {
     border-radius: 4px;
 }
 
+#opinion_form p input:focus,
+#opinion_form p textarea:focus {
+    border-color: #66afe9;
+    outline: 0;
+}
+
 #opinion_form p textarea {
     resize: vertical;
     min-height: 150px;