Tidy up video edit screen

settings.py

@@ -6,3 +6,7 @@ DATABASES = {
         'NAME': 'tests.sqlite3',
     },
 }
+
+INSTALLED_APPS += [
+    'wagtail.contrib.styleguide',
+]

wagtailvideos/templates/wagtailvideos/videos/edit.html

@@ -5,8 +5,14 @@
 {% block titletag %}{% blocktrans with title=video.title %}Editing video {{ title }}{% endblocktrans %}{% endblock %}
 
 {% block extra_css %}
-<link rel="stylesheet" href="{% static 'wagtailvideos/css/edit-video.css' %}" type="text/css" /> {% endblock %} {% block extra_js %} {{ block.super }} {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'wagtailvideos/css/edit-video.css' %}" type="text/css" /> {% endblock %}
+
+{% block extra_js %}
+{{ block.super }}
+{% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
 <script>
+    {{ form.media.css }}
     $(function() {
         $('#id_tags').tagit({
             autocomplete: {
@@ -22,18 +28,17 @@
 {% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=video.title icon="media" %}
 
 <div class="row row-flush nice-padding">
-
     <div class="col5">
         <form action="{% url 'wagtailvideos:edit' video.id %}" method="POST" enctype="multipart/form-data">
             {% csrf_token %}
             <ul class="fields">
                 {% for field in form %}
                   {% if field.name == 'file' %}
-                    {% include "wagtailvideos/videos/_file_field_as_li.html" %}
+                    {% include "wagtailvideos/videos/_file_field_as_li.html"  with li_classes="label-above label-uppercase" %}
                   {% elif field.is_hidden %}
                     {{ field }}
                   {% else %}
-                    {% include "wagtailadmin/shared/field_as_li.html" %}
+                    {% include "wagtailadmin/shared/field_as_li.html" with li_classes="label-above label-uppercase" %}
                   {% endif %}
                   {% endfor %}
                 <li>
@@ -44,12 +49,12 @@
         </form>
     </div>
     <div class="col5 divider-after">
-        <h2 class="label">{% trans "Video preview" %}</h2> {% video video controls style=max-width:100% %}
+        <h2 class="label no-float u-text-transform-uppercase">{% trans "Video preview" %}</h2> {% video video controls style=max-width:100% %}
         {% if can_transcode %}
-            <h3 class="label">Transcodes</h3>
+            <h3 class="label no-float u-text-transform-uppercase">Transcodes</h3>
             <p>If you wish to generate HTML5 compliant transcodes use the form below. This may take a while depending on the length of the video.</p>
             {% if transcodes %}
-            <h3 class="label">Available Transcodes</h3>
+            <h3 class="label no-float u-text-transform-uppercase">Available Transcodes</h3>
             <ul>
                 {% for transcode in transcodes %}
                 <li>
@@ -63,12 +68,12 @@
                 {% endfor %}
             </ul>
             {% endif %}
-            <h3 class="label">Create transcode</h3>
+            <h3 class="label no-float u-text-transform-uppercase">Create transcode</h3>
             <form action="{% url 'wagtailvideos:create_transcode' video.id %}" method="POST">
                 <ul class="fields">
                     {% csrf_token %}
-                    {% include "wagtailadmin/shared/field_as_li.html" with field=transcode_form.media_format %}
-                    {% include "wagtailadmin/shared/field_as_li.html" with field=transcode_form.quality %}
+                    {% include "wagtailadmin/shared/field_as_li.html" with field=transcode_form.media_format li_classes="label-above label-uppercase" %}
+                    {% include "wagtailadmin/shared/field_as_li.html" with field=transcode_form.quality li_classes="label-above label-uppercase" %}
                     <li>
                         <input class="button" type='submit' value="Start" />
                     </li>