Refactors all speaker-facing forms and editing pages to use the new theme (#27)

* Themes speaker_edit.html

* speaker_create now uses takeflight theme

* proposal_submit_kind now uses takeflight theme

* fixes bug in form_snippet

* Optimises proposals_submit_kind

* proposal_submit now uses wagtail theme

* Proposal_edit now uses new theme

* More forms

* Proposal details page now loads from take flight theme

* proposal_fields now looks nicer under the take flight theme

* proposal_speaker_manage rethemed

pinaxcon/templates/_form_snippet.html

@@ -0,0 +1,27 @@
+{% load lca2017_tags %}
+
+{% for field in form %}
+  {% if not field.is_hidden %}
+    <div class="fieldWrapper">
+      {% classname field.field.widget as widget %}
+      {% if widget != "CheckboxInput" %}
+        <h4><label for="{{ field.id_for_label }}">{{ field.label }}</label></h4>
+        {{ field.errors }}
+        {{ field }}
+      {% else %}
+        <label for="{{ field.id_for_label }}"><strong>{{ field.label }}</strong></label>
+        {{ field }}
+        {{ field.errors }}
+      {% endif %}
+
+      {% if field.help_text %}
+        {% if widget != "CheckboxInput" or not field.errors %}
+          <br />
+        {% endif %}
+        <span class="help_text">{{ field.help_text|safe }}</span>
+      {% endif %}
+
+      <p></p>
+    </div>
+  {% endif %}
+{% endfor %}

pinaxcon/templates/symposion/proposals/_proposal_fields.html

@@ -1,15 +1,14 @@
 {% load i18n %}
 
-<dl class="dl-horizontal">
-    <dt>{% trans "Submitted by" %}</dt>
-    <dd>{{ proposal.speaker }}</dd>
+    <h4>{% trans "Submitted by" %}</h4>
+    <p>{{ proposal.speaker }}</p>
 
-    <dt>{% trans "Target Audience" %}</dt>
-    <dd>{{ proposal.get_target_audience_display }}&nbsp;</dd>
+    <h4>{% trans "Target Audience" %}</h4>
+    <p>{{ proposal.get_target_audience_display }}&nbsp;</p>
 
     {% if proposal.additional_speakers.all %}
-        <dt>{% trans "Additional Speakers" %}</dt>
-        <dd>
+        <h4>{% trans "Additional Speakers" %}</h4>
+        <ul>
             {% for speaker in proposal.additional_speakers.all %}
                 <li>
                     {% if speaker.user %}
@@ -19,32 +18,36 @@
                     {% endif %}
                 </li>
             {% endfor %}
-        </dd>
+        </ul>
+        <p></p>
     {% endif %}
 
-    <dt>{% trans "Abstract" %}</dt>
-    <dd>{{ proposal.abstract_html|safe }}&nbsp;</dd>
+    <h4>{% trans "Abstract" %}</h4>
+    <div class="abstract">{{ proposal.abstract_html|safe }}&nbsp;</div>
 
-    <dt>{% trans "Private Abstract" %}</dt>
-    <dd>{{ proposal.private_abstract_html|safe }}&nbsp;</dd>
+    <h4>{% trans "Private Abstract" %}</h4>
+    <div class="private_abstract">{{ proposal.private_abstract_html|safe }}&nbsp;</div>
 
-    <dt>{% trans "Project" %}</dt>
-    <dd>{{ proposal.project|safe }}&nbsp;</dd>
+    <h4>{% trans "Project" %}</h4>
+    <p>{{ proposal.project|safe }}&nbsp;</p>
 
-    <dt>{% trans "Project URL" %}</dt>
-    <dd><a href="{{ proposal.project_url|safe }}">{{ proposal.project_url|safe }}</a></dd>
+    <h4>{% trans "Project URL" %}</h4>
+    <p><a href="{{ proposal.project_url|safe }}">{{ proposal.project_url|safe }}</a>&nbsp;</p>
 
-    <dt>{% trans "Video URL" %}</dt>
-    <dd><a href="{{ proposal.video_url|safe }}">{{ proposal.video_url|safe }}</a></dd>
+    <h4>{% trans "Video URL" %}</h4>
+    <p><a href="{{ proposal.video_url|safe }}">{{ proposal.video_url|safe }}</a>&nbsp;</p>
 
-    <dt>{% trans "Special Requirements" %}</dt>
-    <dd>{{ proposal.technical_requirements_html|safe }}&nbsp;</dd>
+    <h4>{% trans "Special Requirements" %}</h4>
+    <div class="special_requirements">{{ proposal.technical_requirements_html|safe }}</div>
 
-    <dt>{% trans "Speaker Bio" %}</dt>
-    <dd>{{ proposal.speaker.biography_html|safe }}&nbsp;</dd>
+    <h4>{% trans "Speaker Bio" %}</h4>
+    <div class="biography">{{ proposal.speaker.biography_html|safe }}&nbsp;</div>
 
-    <dt>{% trans "Documents" %}</dt>
-    <dd>
+    <h4>{% trans "Speaker Experience" %}</h4>
+    <div class="biography">{{ proposal.speaker.experience_html|safe }}&nbsp;</div>
+
+    <h4>{% trans "Documents" %}</h4>
+    <div>
         {% if proposal.supporting_documents.exists %}
             <table class="table table-striped">
                 {% for document in proposal.supporting_documents.all %}
@@ -60,14 +63,12 @@
                 {% endfor %}
             </table>
         {% else %}
-            No supporting documents attached to this proposal.
+            <p>No supporting documents attached to this proposal.</p>
         {% endif %}
-    </dd>
+    </div>
 
-    <dt>{% trans "Recording Release" %}</dt>
-    <dd>{{ proposal.recording_release }}&nbsp;</dd>
+    <h4>{% trans "Recording Release" %}</h4>
+    <p>{{ proposal.recording_release }}&nbsp;</p>
 
-    <dt>{% trans "Materials Release" %}</dt>
-    <dd>{{ proposal.materials_release }}&nbsp;</dd>
-
-</dl>
+    <h4>{% trans "Materials Release" %}</h4>
+    <p>{{ proposal.materials_release }}&nbsp;</p>

pinaxcon/templates/symposion/proposals/base.html

@@ -1,6 +1,16 @@
-{% extends "site_base.html" %}
+{% extends "site_base_wagtail.html" %}
 {% load staticfiles %}
 
+{% block body %}
+  <div class="l-content-page">
+    <div class="l-content-page--richtext">
+      <h2>{% block page_title %}{% endblock %}</h2>
+      {% block proposals_body %}
+      {% endblock %}
+    </div>
+  </div>
+{% endblock %}
+
 {% block extra_script %}
 <script src="{% static 'js/site-92ae8d0d6c.js' %}" type="text/javascript"></script>
 {% endblock %}

pinaxcon/templates/symposion/proposals/document_create.html

@@ -4,11 +4,11 @@
 
 {% block page_title %}Upload Document to '{{ proposal.title }}'{% endblock %}
 
-{% block body %}
+{% block proposals_body %}
     <form method="POST" action="" enctype="multipart/form-data" class="form form-horizontal">
         {% csrf_token %}
         <fieldset>
-            {{ form|bootstrap_horizontal }}
+          {% include "_form_snippet.html" with form=form %}
         </fieldset>
         <div class="form-actions">
             <input class="btn btn-primary" type="submit" value="Upload" />

pinaxcon/templates/symposion/proposals/proposal_cancel.html

@@ -3,10 +3,9 @@
 {% load i18n %}
 
 {% block head_title %}{% trans 'Cancel Proposal' %}{% endblock %}
+{% block page_title %}Cancel: {{ proposal.title }}{% endblock %}
 
-{% block body %}
-    <h1>Cancel: {{ proposal.title }}</h1>
-
+{% block proposals_body %}
     <form method="POST" action="" enctype="multipart/form-data">
         {% csrf_token %}
         <p>Are you sure you want to cancel <b>{{ proposal.title }}</b>?</p>

pinaxcon/templates/symposion/proposals/proposal_detail.html

@@ -6,8 +6,22 @@
 
 {% block head_title %}{{ proposal.title }}{% endblock %}
 
+
 {% block body %}
-    <div class="pull-right">
+
+<div class="panel panel__compact">
+  <div class="panel--content">
+
+      <h2>{% block page_title %}#{{ proposal.number }}: {{ proposal.title }} ({{ proposal.speaker }}){% endblock %}</h2>
+
+        <div class="panel--tab-controls">
+          <div class="panel--tabs"><a data-tab-control="Details" class="panel--tab-switch is-active">{% trans "Proposal Details" %}</a><a data-tab-control="Documents" class="panel--tab-switch">{% trans "Supporting Documents" %}</a><a data-tab-control="Feedback" class="panel--tab-switch">{% trans "Reviewer Feedback" %} ({{ proposal.messages.all|length }})</a>
+          </div>
+        </div>
+        <div data-tab-content="Details" class="panel--tab-content is-active">
+          {% include "symposion/proposals/_proposal_fields.html" %}
+
+          <div class="btn-group">
               {% if not proposal.cancelled %}
                   {% if request.user == proposal.speaker.user %}
                       <a href="{% url "proposal_edit" proposal.pk %}" class="btn btn-default">
@@ -25,27 +39,9 @@
                   {% trans 'Cancelled' }
               {% endif %}
           </div>
-
-    <h3>#{{ proposal.number }}: {{ proposal.title }} ({{ proposal.speaker }})</h3>
-
-    <div class="tabbable">
-        <ul class="nav nav-tabs">
-            <li class="active"><a href="#proposal-detail" data-toggle="tab">{% trans "Proposal Details" %}</a></li>
-            {% if request.user == proposal.speaker.user %}
-                <li><a href="#proposal-documents" data-toggle="tab">{% trans "Supporting Documents" %}</a></li>
-            {% endif %}
-            {% if message_form %}
-                <li><a href="#proposal-feedback" data-toggle="tab">{% trans "Reviewer Feedback" %} <span class="badge">{{ proposal.messages.all|length }}</span></a></li>
-            {% endif %}
-        </ul>
-        <div class="tab-content">
-            <div class="tab-pane active" id="proposal-detail">
-                {% include "symposion/proposals/_proposal_fields.html" %}
         </div>
-            {% if request.user == proposal.speaker.user %}
-                <div class="tab-pane" id="proposal-documents">
-                    <h3>{% trans 'Supporting Documents' %}</h3>
 
+        <div data-tab-content="Documents" class="panel--tab-content">
           {% if proposal.supporting_documents.exists %}
               <table class="table table-striped">
                   {% for document in proposal.supporting_documents.all %}
@@ -65,19 +61,15 @@
           {% endif %}
           <a class="btn btn-default btn-sm{% if proposal.cancelled %} btn-disabled{% endif %}" href="{% url "proposal_document_create" proposal.pk %}"><i class="fa fa-upload"></i> {% trans 'Add Document' %}</a>
         </div>
-            {% endif %}
-
-    {% if message_form %}
-        <div class="tab-pane" id="proposal-feedback">
+        <div data-tab-content="Feedback" class="panel--tab-content">
 
           <h3>{% trans 'Conversation with Reviewers' %}</h3>
-
           {% for message in proposal.messages.all %}
               <div class="review-box">
-                    <div class="comment">{{ message.message|safe }}</div>
+                  <div class="comment"><em>{{ message.message|safe }}</em></div>
                   <div class="dateline"><b>{% user_display message.user %}</b> {{ message.submitted_at|timesince }} ago</div>
               </div>
-                <div class="clear"></div>
+              <br />
           {% endfor %}
 
           <h3>{% trans 'Leave a Message' %}</h3>
@@ -87,16 +79,16 @@
           <form action="" method="POST" accept-charset="utf-8">
               {% csrf_token %}
               <fieldset>
-                    {{ message_form|bootstrap }}
+                {% include "_form_snippet.html" with form=message_form %}
               </fieldset>
               <div class="actions">
                   <button type="submit" name="message_submit" class="btn btn-primary">{% trans 'Submit' %}</button>
               </div>
           </form>
         </div>
-    {% endif %}
       </div>
     </div>
+
 {% endblock %}
 
 {% block extra_script %}

pinaxcon/templates/symposion/proposals/proposal_edit.html

@@ -3,16 +3,15 @@
 {% load bootstrap %}
 
 {% block head_title %}Editing {{ proposal.title }}{% endblock %}
+{% block page_title %}Edit: {{ proposal.title }}{% endblock %}
 
-{% block body %}
-    <h1>Edit: {{ proposal.title }}</h1>
-
+{% block proposals_body %}
   <p><a href="{% url "proposal_speaker_manage" proposal.pk %}">Manage speakers</a></p>
 
   <form method="POST" action="" enctype="multipart/form-data">
       {% csrf_token %}
       <fieldset>
-            {{ form|bootstrap }}
+        {% include "_form_snippet.html" with form=form %}
       </fieldset>
       <div class="form-actions">
           <input class="btn btn-primary" type="submit" value="Save" />

pinaxcon/templates/symposion/proposals/proposal_speaker_manage.html

@@ -3,15 +3,17 @@
 {% load i18n %}
 {% load bootstrap %}
 
-{% block body %}
-    <h1>{% trans 'Proposal:' %} {{ proposal.title }}</h1>
+{% block page_title %}{% trans 'Proposal:' %} {{ proposal.title }}{% endblock %}
+
+{% block proposals_body %}
+    <h1></h1>
 
     <p>
       <a href="{% url "proposal_edit" proposal.pk %}">{% trans 'Edit proposal' %}
       </a>
     </p>
 
-    <h2>{% trans 'Current Speakers' %}</h2>
+    <h3>{% trans 'Current Speakers' %}</h3>
 
     {% for speaker in speakers %}
         {% if speaker.user %}
@@ -21,11 +23,11 @@
         {% endif %}
     {% endfor %}
 
-    <h2>{% trans 'Add another speaker' %}</h2>
+    <h3>{% trans 'Add another speaker' %}</h3>
 
     <form method="POST" action="" enctype="multipart/form-data">
         {% csrf_token %}
-        {{ add_speaker_form|bootstrap }}
+        {% include "_form_snippet.html" with form=add_speaker_form %}
         <div class="form-action">
             <input type="submit" value="Add speaker" class="btn btn-primary" />
         </div>

pinaxcon/templates/symposion/proposals/proposal_submit.html

@@ -5,8 +5,7 @@
 
 {% block page_title %}{% trans "Submit A Proposal" %}{% endblock %}
 
-{% block body %}
-    {% box "proposal_submit" %}
+{% block proposals_body %}
 
     {% if kinds %}
         <p>Select what kind of proposal you'd like to submit:</p>

pinaxcon/templates/symposion/proposals/proposal_submit_kind.html

@@ -1,18 +1,14 @@
 {% extends "symposion/proposals/base.html" %}
 
-{% load bootstrap %}
-{% load pinax_boxes_tags %}
 {% load i18n %}
 
 {% block page_title %}Submit a Proposal for a {{ kind.name }}{% endblock %}
 
-{% block body %}
-    {% box "example_proposal" %}
-
-    <form method="POST" action="" enctype="multipart/form-data" class="form-horizontal">
+{% block proposals_body %}
+    <form method="POST" action="" enctype="multipart/form-data">
         {% csrf_token %}
         <fieldset>
-            {{ proposal_form|bootstrap_horizontal }}
+          {% include "_form_snippet.html" with form=proposal_form %}
         </fieldset>
         <div class="form-actions">
           <p>

pinaxcon/templates/symposion/speakers/base.html

@@ -1 +1 @@
-{% extends "site_base_onecolumn.html" %}
+{% extends "site_base_wagtail.html" %}

pinaxcon/templates/symposion/speakers/speaker_create.html

@@ -7,17 +7,19 @@
 {% block page_title %}{% trans "Create Speaker Profile" %}{% endblock %}
 
 {% block body %}
-    {% box "speaker-profile" %}
-
+<div class="l-content-page">
+  <div class="l-content-page--richtext">
     <form method="POST" action="" enctype="multipart/form-data">
         {% csrf_token %}
-        <legend>{% trans "Create Speaker Profile" %}</legend>
+        <h2>{% trans "Create Speaker Profile" %}</h2>
         <fieldset>
-            {{ speaker_form|bootstrap }}
+          {% include "_form_snippet.html" with form=speaker_form %}
         </fieldset>
         <div class="form-actions">
             <input class="btn btn-primary" type="submit" value="Save" />
             <a class="btn btn-default" href="{% url "dashboard" %}">Cancel</a>
         </div>
     </form>
+  </div>
+</div>
 {% endblock %}

pinaxcon/templates/symposion/speakers/speaker_edit.html

@@ -7,17 +7,19 @@
 {% block page_title %}{% trans "Edit Speaker Profile" %}{% endblock %}
 
 {% block body %}
-    {% box "speaker-profile" %}
-
+<div class="l-content-page">
+  <div class="l-content-page--richtext">
     <form method="POST" action="" enctype="multipart/form-data">
         {% csrf_token %}
-        <legend>{% trans "Edit Speaker Profile" %}</legend>
+        <h2>{% trans "Edit Speaker Profile" %}</h2>
         <fieldset>
-            {{ speaker_form|bootstrap }}
+          {% include "_form_snippet.html" with form=speaker_form %}
         </fieldset>
         <div class="form-actions">
             <input class="btn btn-primary" type="submit" value="Save" />
             <a class="btn btn-default" href="{% url "dashboard" %}">Cancel</a>
         </div>
     </form>
+  </div>
+</div>
 {% endblock %}

pinaxcon/templatetags/lca2017_tags.py

@@ -0,0 +1,6 @@
+from django import template
+register = template.Library()
+
+@register.assignment_tag()
+def classname(ob):
+    return ob.__class__.__name__