organise configuration page

src/assets/js/blocks/form/duration-widget.js

@@ -10,12 +10,12 @@ export const init = () => {
       seconds: ko.observable(0),
     };
 
-    viewModel.value = ko.computed(() =>
+    viewModel.value = ko.computed(() => 
       // Convert viewModel.properties into int
-      parseInt(viewModel.days(), 10) * 86400) +
+      (parseInt(viewModel.days(), 10) * 86400) +
         (parseInt(viewModel.hours(), 10) * 3600) +
           (parseInt(viewModel.minutes(), 10) * 60) +
-            parseInt(viewModel.seconds(), 10);
+            parseInt(viewModel.seconds(), 10));
 
     const $this = $(this);
 

src/assets/sass/modifiers.scss

@@ -6,4 +6,5 @@
 @import "modifiers/small";
 @import "modifiers/hidden";
 @import "modifiers/tooltip";
-@import "modifiers/float";
+@import "modifiers/float";
+@import "modifiers/sticky";

src/assets/sass/modifiers/float.scss

@@ -4,4 +4,8 @@
 
 .margin-right {
     margin-right: 1em
+}
+
+.clear {
+	clear: both;
 }

src/assets/sass/modifiers/sticky.scss

@@ -0,0 +1,11 @@
+.stick-top, .stick-bottom {
+	position: -webkit-sticky; 
+}
+
+.stick-top {
+	top: 0;
+}
+
+.stick-bottom {
+	bottom: 0;
+}

src/events/configuration.py

@@ -8,10 +8,12 @@ class TicketTimeout(configuration.DurationField):
     """How long do people have to pay during purchase."""
 
     default = timedelta(minutes=10)
+    category = "Tickets"
 
 
 class WaitingListTimeout(configuration.DurationField):
 
     """How long do people have to purchase from a waiting list."""
 
     default = timedelta(days=1)
+    category = "Tickets"

src/happening/configuration.py

@@ -214,6 +214,7 @@ def _construct_field(self, *args, **kwargs):
         # This isn't a nice way of assigning the tooltip, but as we don't
         # control all field types - it'll do for now
         f.tooltip = self.__doc__
+        f.category = self.category
         return f
 
     def _construct_api_field(self, *args, **kwargs):

src/happening/templatetags/forms.py

@@ -1,10 +1,37 @@
 """Form helpers."""
 from django import template
 from django.template.loader import render_to_string
+from collections import OrderedDict
 
 register = template.Library()
 
 
+@register.filter
+def render_as_blocks(form):
+    """Render a form using blocks to contain sections."""
+    o_label_suffix = form.label_suffix
+    form.label_suffix = ""
+
+    categories = {}
+
+    for bf in form:
+        field = bf.field
+        if not hasattr(field, "category"):
+            # This should deal with EnabledDisabledFields
+            field = field.field
+        if field.category not in categories:
+            categories[field.category] = []
+        categories[field.category].append(bf)
+
+    # Sort categories alphabetically
+    categories = OrderedDict(sorted(categories.items()))
+
+    rendered = render_to_string("forms/_blocks_form.html",
+                                {"categories": categories})
+    form.label_suffix = o_label_suffix
+    return rendered
+
+
 @register.filter
 def render(form):
     """Render a form."""

src/members/configuration.py

@@ -6,6 +6,8 @@ class ProfileProperties(configuration.PropertiesField):
 
     """The custom properties added to member profiles."""
 
+    category = "Members"
+
     default = [
         # TODO: After name + bio are moved to use properties, put them here
     ]

src/notifications/configuration.py

@@ -8,6 +8,7 @@ class NotificationsEmailAddress(configuration.EmailField):
     """The email address to send notification emails from."""
 
     default = "noreply@happening.com"
+    category = "Emails"
 
 
 class EmailHeader(configuration.CharField):
@@ -16,6 +17,7 @@ class EmailHeader(configuration.CharField):
 
     default = "Hello **{{user}}**"
     field = forms.MarkdownField
+    category = "Emails"
 
 
 class EmailFooter(configuration.CharField):
@@ -24,3 +26,4 @@ class EmailFooter(configuration.CharField):
 
     default = "Thanks\nAdmin"
     field = forms.MarkdownField
+    category = "Emails"

src/pages/configuration.py

@@ -8,6 +8,7 @@ class NameOfEvents(configuration.CharField):
     """The term used to refer to an event, e.g. "match", "rally"."""
 
     default = "event"
+    category = "Display"
 
 
 class GoogleAnalyticsCode(configuration.CharField):
@@ -17,20 +18,23 @@ class GoogleAnalyticsCode(configuration.CharField):
     default = ""
     can_be_disabled = True
     default_enabled = False
+    category = "Analytics"
 
 
 class SiteTitle(configuration.CharField):
 
     """The title of the website."""
 
     default = "Happening Demo Site"
+    category = "Display"
 
 
 class ForceSSL(configuration.BooleanField):
 
     """Should SSL be forced."""
 
     default = False
+    category = "Security"
 
 
 class PrimaryEvent(configuration.ChoiceField):
@@ -39,6 +43,7 @@ class PrimaryEvent(configuration.ChoiceField):
 
     can_be_disabled = True
     default_enabled = False
+    category = "Display"
 
     def __init__(self, *args, **kwargs):
         """Setup choices."""

src/templates/admin/configuration.html

@@ -6,16 +6,18 @@
 {% block admin_content %}
     <div class="l-container">
         <div class="l-primary-content block-list">
-            <div class="block block-list__item">
-                <header class="block__header">
-                    <h2 class="block__header-text">Configuration</h2>
-                </header>
-                <form method="POST" action="{% url "configuration" %}" class="form">
-                    {% csrf_token %}
-                    {{form|render}}
-                    <button type="submit">Save</button>
-                </form>
-            </div>
+            <form method="POST" action="{% url "configuration" %}" class="form">
+                {% csrf_token %}
+
+                {{form|render_as_blocks}}
+
+                <div class="block block-list__item stick-bottom">
+                    <div class="float-right">
+                        <button type="submit">Save</button>
+                    </div>
+                    <div class="clear"></div>
+                </div>
+            </form>
         </div>
         <div class="l-secondary-content block-list">
             <div class="block block-list__item">

src/templates/forms/_blocks_form.html

@@ -0,0 +1,11 @@
+{% for name, fields in categories.items %}
+	<div class="block-list__item block">
+		<header class="block__header">
+            <h2 class="block__header-text">{{name}}</h2>
+        </header>
+
+        {% for field in fields %}
+        	{% include "forms/_field.html" %}
+        {% endfor %}
+	</div>
+{% endfor %}

src/templates/forms/_field.html

@@ -0,0 +1,16 @@
+<div class="form__field">
+        <div class="form__field__errors">{{ field.errors }}</div>
+        {% if field.is_hidden %}
+            {{ field }}
+        {% else %}
+            {% if not field.field.widget.hide_label %}
+                <div class="form__field__label">
+                    {{ field.label_tag }}
+                    {% if field.field.tooltip %}
+                        <span class="tooltip" title="{{field.field.tooltip}}"><i class="fa fa-question-circle form__field__info"></i></span>
+                    {% endif %}
+                </div>
+            {% endif %}
+            {{ field }}
+        {% endif %}
+    </div>

src/templates/forms/_form.html

@@ -8,20 +8,5 @@
     {% endfor %}
 {% endif %}
 {% for field in form %}
-    <div class="form__field">
-        <div class="form__field__errors">{{ field.errors }}</div>
-        {% if field.is_hidden %}
-            {{ field }}
-        {% else %}
-            {% if not field.field.widget.hide_label %}
-                <div class="form__field__label">
-                    {{ field.label_tag }}
-                    {% if field.field.tooltip %}
-                        <span class="tooltip" title="{{field.field.tooltip}}"><i class="fa fa-question-circle form__field__info"></i></span>
-                    {% endif %}
-                </div>
-            {% endif %}
-            {{ field }}
-        {% endif %}
-    </div>
+    {% include "forms/_field.html" %}
 {% endfor %}