Bootstrap update for many forms, now using django-crispy-forms

dlareau · Jan 8, 2020 · 3402a28 · 3402a28
1 parent ab49ac0
commit 3402a28
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 46 deletions.
diff --git a/huntserver/static/huntserver/info_base.css b/huntserver/static/huntserver/info_base.css
@@ -45,6 +45,14 @@ input[type="email"] {
     width:300px;
 }
 
+input[type="password"] {
+    width:300px;
+}
+
+#room_select {
+    width: auto;
+}
+
 input[readonly] {
     background: #dddddd;
     opacity: 0.8;

diff --git a/huntserver/templates/create_account.html b/huntserver/templates/create_account.html
@@ -1,4 +1,5 @@
 {% extends "info_base.html" %}
+{% load crispy_forms_tags %}
 {% block title %}Registration{% endblock title %}
 
 {% block includes %}
@@ -9,25 +10,10 @@
   <div class="container">
     <h1>Registration</h1>
     <form method="POST" action="">
-      <table>
       {% csrf_token %}
-      {% for field in uf %}
-        <tr class="required">
-          <th>
-            {{ field.label_tag }}
-          </th>
-          <td>
-            {{ field }}
-            <br>
-            <div class="help_text">{{ field.help_text }}</div>
-            <div class="field_errors">{{ field.errors }}</div>
-          </td>
-        </tr>
-      {% endfor %}
-      <tr><th></th><td><br></td></tr>
-      {{pf.as_table}}
-      <tr><td><input type="submit"></td></tr>
-      </table>
+      {{uf|crispy}}
+      {{pf|crispy}}
+      <input class="btn btn-primary" type="submit">
     </form>
   </div>
 {% endblock content %}
diff --git a/huntserver/templates/email.html b/huntserver/templates/email.html
@@ -1,4 +1,5 @@
 {% extends "staff_base.html" %}
+{% load crispy_forms_tags %}
 {% block title %}Email{% endblock title %}
 
 {% block includes %}
@@ -7,11 +8,11 @@
     border: none;
   }
   #id_subject {
-    width: 400px;
+    width: 500px;
   }
   #id_message {
-    width: 400px;
-    height: 200px;
+    width: 500px;
+    height: 300px;
   }
 </style>
 {% endblock includes %}
@@ -21,11 +22,9 @@ <h1>Email</h1>
   <h3> Send email to all hunt competitors: </h3>
   <form method="POST" action="/staff/emails/">
     {% csrf_token %}
-    <table>
-      {{ email_form.as_table }}
-    </table>
+    {{ email_form|crispy }}
     <div class="submit-row">
-      <input type="submit" value="Send Email" onclick="return confirm('Are you sure?')">
+      <input class="btn btn-primary" type="submit" value="Send Email" onclick="return confirm('Are you sure?')">
     </div>
   </form>
 

diff --git a/huntserver/templates/puzzle.html b/huntserver/templates/puzzle.html
@@ -48,7 +48,7 @@ <h3 style="float: right;">Published solution not available</h3>
           {% csrf_token %}
           <div>
             {{ form }}
-            <input type='submit' value='Submit'/>
+            <input class="btn btn-sm btn-default" type='submit' value='Submit'/>
           </div>
         </form>
       </fieldset>

diff --git a/huntserver/templates/registration.html b/huntserver/templates/registration.html
@@ -57,7 +57,7 @@ <h3>The code to join this team is <b>{{registered_team.join_code}}</b></h3>
       <form method="Post">
         {% csrf_token %}
         <input type="hidden" name="form_type" value="leave_team">
-        <input type="submit" value="Remove me from this team" onclick="return confirm('Are you sure?')">
+        <input class="btn btn-danger" type="submit" value="Remove me from this team" onclick="return confirm('Are you sure?')">
       </form>
     </p>
     <script type="text/javascript">
@@ -80,19 +80,18 @@ <h3>The code to join this team is <b>{{registered_team.join_code}}</b></h3>
       {% endif %}
       <div class="row">
         <div class="col-md-6">
-          <div class="container col-md-12" style="height:320px">
+          <div class="container col-md-12" style="height:350px">
             <h2>Create New Team</h2>
             <hr style="border-width:2px; border-color: black;">
             <form method="Post">
               {% csrf_token %}
               <input type="hidden" name="form_type" value="new_team">
               Please enter a new team name:
-              <input name="team_name" type="text">
-              <br>
+              <input class="form-control" name="team_name" type="text">
               <br>
               {% if not curr_hunt.in_reg_lockdown %}
               Does your team need a room for the hunt?
-              <select name="need_room">
+              <select id="room_select" class="form-control" name="need_room">
                 <option value="need_a_room">Yes</option>
                 <option value="has_a_room">Our team has a room</option>
                 <option value="off_campus">Our team is off-campus</option>
@@ -102,37 +101,34 @@ <h2>Create New Team</h2>
               <br>
               Please indicate if you are solving remotely:
               <br>
-              <select name="need_room">
+              <select id="room_select" class="form-control" name="need_room">
                 <option value="has_a_room">Our team is on campus and has a room</option>
                 <option value="off_campus">Our team is off-campus</option>
               </select>
               {% endif %}
               <br>
-              <br>
-              <input type="submit" value="Create and Join Team">
+              <input class="btn btn-primary" type="submit" value="Create and Join Team">
             </form>
           </div>
         </div>
         <div class="col-md-6">
-          <div class="container col-md-12" style="height:320px">
+          <div class="container col-md-12" style="height:330px">
             <h2>Join Existing Team</h2>
             <hr style="border-width:2px; border-color: black;">
             <form method="Post">
               {% csrf_token %}
               <input type="hidden" name="form_type" value="join_team">
               Select a team to join:
-              <select name="team_name" style="width: 200px;">
+              <select class="form-control" name="team_name" style="width: 200px;">
                 {% for team in teams %}
                   <option value="{{team.team_name}}">{{team.team_name}}</option>
                 {% endfor %}
               </select>
               <br>
-              <br>
               Enter the team join code:
-              <input name="join_code" type="text" style="width:100px;" maxlength="5">
-              <br>
+              <input class="form-control" name="join_code" type="text" style="width:100px;" maxlength="5">
               <br>
-              <input type="submit" value="Join Team">
+              <input class="btn btn-primary" type="submit" value="Join Team">
             </form>
           </div>
         </div>

diff --git a/huntserver/templates/registration/login.html b/huntserver/templates/registration/login.html
@@ -1,4 +1,5 @@
 {% extends "info_base.html" %}
+{% load crispy_forms_tags %}
 {% load i18n %}
 
 {% block content %}
@@ -7,9 +8,9 @@
     <p>Please enter your puzzlehuntCMU username and password:<p>
     <form method="post" action="/accounts/login/">
       {% csrf_token %}
-      {{ form.as_p }}
+      {{ form|crispy }}
 
-      <input type="submit" value="{% trans 'Log in' %}" />
+      <input class="btn btn-default" type="submit" value="{% trans 'Log in' %}" />
       <input type="hidden" name="next" value="{{ next }}" />
     </form>
   </div>

diff --git a/huntserver/templates/user_profile.html b/huntserver/templates/user_profile.html
@@ -1,16 +1,17 @@
 {% extends "info_base.html" %}
+{% load crispy_forms_tags %}
 
 {% block content %}
 <div class="container">
 <h2>Change User Details</h2>
 <form method="POST">
   {% csrf_token %}
   <div>
-    {{ user_form.as_p }}
-    {{ person_form.as_p }}
+    {{ user_form|crispy }}
+    {{ person_form|crispy }}
   </div>
   <div class="submit-row">
-    <input type="submit" value="Update Info" class="default" />
+    <input class="btn btn-default" type="submit" value="Update Info" class="default" />
   </div>
 </form>
 </div>

diff --git a/puzzlehunt_server/settings/base_settings.py b/puzzlehunt_server/settings/base_settings.py
@@ -24,6 +24,7 @@
     'django.contrib.humanize',
     'huntserver',
     'django_nose',
+    'crispy_forms',
 )
 
 TEST_RUNNER = 'django_nose.NoseTestSuiteRunner'
@@ -32,6 +33,8 @@
     '--cover-erase',
 ]
 
+CRISPY_TEMPLATE_PACK = 'bootstrap3'
+
 MIDDLEWARE_CLASSES = (
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -105,7 +108,6 @@
 PROTECTED_URL = '/protected/'
 LOGIN_URL = '/login-selection/'
 
-
 # Shibboleth options
 USE_SHIBBOLETH = True