Explorar el Código

Adding Bootstrap to login/register forms

David Leonard hace 10 años
padre
commit
b48e7934a4

+ 0 - 4
hackathon_starter/hackathon/forms.py

@@ -9,7 +9,3 @@ class UserForm(forms.ModelForm):
     class Meta:
         model = User
         fields = ('username', 'email', 'password')
-
-class UserProfileForm(forms.ModelForm):
-    class Meta:
-        model = UserProfile

+ 1 - 1
hackathon_starter/hackathon/templates/hackathon/base.html

@@ -3,7 +3,7 @@
     <head>
       <title> Django Hackathon Starter </title>
       <script src="/static/bower_components/jquery/dist/jquery.js"></script>
-      <script type="text/javascript" src="/static/bower_components/bootstrap/dist/bootstrap.min.js"></script>
+      <script type="text/javascript" src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
       
       
       <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">

+ 22 - 9
hackathon_starter/hackathon/templates/hackathon/login.html

@@ -3,17 +3,30 @@
     {% include 'hackathon/base.html' %}
 
     <body>
-        <h1>Login to Django Hackathon Starter</h1>
+        <h2 class="form-signin-heading">Login to Django Hackathon Starter</h2>
 
-        <form id="login_form" method="post" action="/hackathon/login/">
-            {% csrf_token %}
-            Username: <input type="text" name="username" value="" size="50" />
-            <br />
-            Password: <input type="password" name="password" value="" size="50" />
-            <br />
+        <div class='container text-center'>
+              <h2 class="form-signin-heading">Sign Up</h2>
+              <br>
+              <form class="form-horizontal" id="login_form" method="post" action="/hackathon/login/">
+                {% csrf_token %}
+                {% load bootstrap %} 
 
-            <input type="submit" value="submit" />
-        </form>
+                <table>
+                  <tr>
+                     
+                      <td class="container text-center">Username: <input type="text" name="username" value="" size="50" /></td>
+                  </tr>
 
+                  <tr>
+                     
+                      <td class="container text-center">Password: <input type="password" name="password" value="" size="50" /></td>
+                  </tr>
+
+                </table>
+                <button class="btn btn-lg btn-primary" type="submit">Login</button>
+                <input type="hidden" name="submit" value="submit" />
+              </form>
+        </div>
     </body>
 </html>

+ 31 - 17
hackathon_starter/hackathon/templates/hackathon/register.html

@@ -1,28 +1,42 @@
 <!DOCTYPE html>
 <html>
     {% include 'hackathon/base.html' %}
+    <link rel="stylesheet" href="/static/css/form.css">
     <body>
-        <h1>Register with Django Hackathon Starter</h1>
-
         {% if registered %}
-        Django Hackathon says: <strong>thank you for registering!</strong>
-        <a href="/hackathon/">Return to the homepage.</a><br />
+          <strong>Thank you for registering!</strong>
+          <a href="/hackathon/">Return to the homepage.</a><br />
+        
         {% else %}
-        Django Hackathon says: <strong>register here!</strong><br />
-
-        <form id="user_form" method="post" action="/hackathon/register/"
+          <div class='container text-center'>
+              <h2 class="form-signin-heading">Sign Up</h2>
+              <br>
+              <form class="form-horizontal" id="user_form" method="post" action="/hackathon/register/"
                 enctype="multipart/form-data">
+                {% csrf_token %}
+                {% load bootstrap %} 
 
-            {% csrf_token %}
+                <table>
+                  <tr>
+                     
+                      <td class="container text-center">{{ user_form.username | bootstrap_horizontal}}</td>
+                  </tr>
 
-            <!-- Display each form. The as_p method wraps each element in a paragraph
-                 (<p>) element. This ensures each element appears on a new line,
-                 making everything look neater. -->
-            {{ user_form.as_p }}
+                  <tr>
+                     
+                      <td class="container text-center">{{ user_form.email | bootstrap_horizontal}}</td>
+                  </tr>
 
-            <!-- Provide a button to click to submit the form. -->
-            <input type="submit" name="submit" value="Register" />
-        </form>
-        {% endif %}
+                  <tr>
+                     
+                      <td class="container text-center">{{ user_form.password | bootstrap_horizontal}}</td>
+                  </tr>
+                </table>
+                <button class="btn btn-lg btn-primary" type="submit">Register</button>
+                <input type="hidden" name="submit" value="Register" />
+              </form>
+            </div>
+          {% endif %}
     </body>
-</html>
+</html>
+

+ 1 - 0
hackathon_starter/hackathon_starter/settings.py

@@ -37,6 +37,7 @@ INSTALLED_APPS = (
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'hackathon',
+    'bootstrapform',
 )
 
 MIDDLEWARE_CLASSES = (