Working with forms

youmap/settings/base.py

@@ -28,6 +28,7 @@ INSTALLED_APPS = (
     'chickpea',
     'foundation',
     'endless_pagination',
+    'youmap',
 
     #'south',
 

youmap/static/youmap/youmap.css

@@ -38,4 +38,32 @@ input::-webkit-input-placeholder, ::-webkit-input-placeholder {
 
 input:-moz-placeholder, :-moz-placeholder {
    color: #a5a5a5;
+}
+
+/* Forms */
+
+.help-text small, small.help-text {
+    display: block;
+    padding: 6px 4px;
+    margin-top: -13px;
+    margin-bottom: 12px;
+    background: #a5a5a5;
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    -moz-border-radius-bottomleft: 2px;
+    -webkit-border-bottom-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    -moz-border-radius-bottomright: 2px;
+    -webkit-border-bottom-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+.formbox {
+    border: 1px #a5a5a5 solid;
+    min-height: 32px;
+    line-height: 32px;
+    padding-left: 10px;
+}
+#reveal-container textarea {
+    height: 100px;
 }

youmap/templates/chickpea/category_form.html

@@ -0,0 +1,25 @@
+{% load youmap_tags %}
+<form action="{{ action_url }}" method="post" id="category_edit">
+    {% csrf_token %}
+    {% for error in form.errors %}
+        <small class="error">{{ error }}</small>
+    {% endfor %}
+    {% foundation_field form.name %}
+    {% foundation_field form.description %}
+    {% foundation_field form.color %}
+    <div class="row formbox">
+        <div class="six columns">
+            {% foundation_field form.icon_class %}
+        </div>
+        <div class="six columns">
+            {% foundation_field form.pictogram %}
+        </div>
+    </div>
+    {% foundation_field form.rank %}
+    <div class="row formbox">
+        <span>{{ form.preset.label }}</span>{{ form.preset }}
+    </div>
+    <small class="help-text">{{ form.preset.help_text }}</small>
+    {{ form.map }}
+    <input type="submit" class="button" />
+</form>

youmap/templates/youmap/field.html

@@ -0,0 +1,10 @@
+{% if field.label %}
+<label for="{{ field.html_name }}">{{ field.label }}</label>
+{% endif %}
+{{ field }}
+{% for error in field.errors %}
+    <small class="error">{{ error|escape }}</small>
+{% endfor %}
+{% if field.help_text %}
+<small class="help-text">{{ field.help_text }}</small>
+{% endif %}

youmap/templatetags/youmap_tags.py

@@ -0,0 +1,10 @@
+from django import template
+
+register = template.Library()
+
+
+@register.inclusion_tag('youmap/field.html')
+def foundation_field(field):
+    return {
+        'field': field,
+    }