Improve forms

cms/forms.py

@@ -8,6 +8,9 @@ from django.utils.translation import gettext_lazy as _
 Page = swapper.load_model('cms', 'Page')
 Section = swapper.load_model('cms', 'Section')
 
+class ConfirmationForm(forms.Form):
+    pass
+
 class ContactForm(forms.Form):
     sender = forms.EmailField(label=_('Your email address'))
     spam_protection = forms.CharField(label=_('Your message'), widget=forms.Textarea())

cms/static/cms/cms.scss

@@ -284,8 +284,7 @@ form.cms {
   }
 
   div.formfield {
-    margin: 5px 0;
-    padding: 10px 0;
+    margin-bottom: 10px;
     clear: both;
     box-sizing: border-box;
 
@@ -314,7 +313,7 @@ form.cms {
     }
   }
 
-  div.label {
+  div.label, label {
     font-size: 0.8rem;
     font-weight: 400;
     text-align: left;
@@ -322,7 +321,6 @@ form.cms {
 
   div.input {
     overflow: hidden;
-    margin: 5px 0;
   }
 
   div.helptext, span.required {
@@ -340,13 +338,20 @@ form.cms {
     color: black;
     border: 1px solid #aaa;
     font-size: 1rem;
-    display: inline-block;
+    display: block;
     width: 100%;
     box-sizing: border-box;
     margin: 0;
     padding: 5px;
+    font-family: inherit;
+  }
+  input[type=checkbox] {
+    display: inline-block;
+    vertical-align: middle;
   }
   textarea {
+    font-size: 1rem;
+    padding: 5px 5px;
     height: 15em;
   }
 

cms/static/cms/cms.scss.css

@@ -202,8 +202,7 @@ form.cms fieldset {
     font-size: 1.15em; }
 
 form.cms div.formfield {
-  margin: 5px 0;
-  padding: 10px 0;
+  margin-bottom: 10px;
   clear: both;
   box-sizing: border-box; }
   form.cms div.formfield.type, form.cms div.formfield.number {
@@ -226,14 +225,13 @@ form.cms div.formfield.required div.label {
 form.cms div.formfield.required input, form.cms div.formfield.required select, form.cms div.formfield.required .textarea, form.cms div.formfield.required div.textarea {
   border: 1px solid black; }
 
-form.cms div.label {
+form.cms div.label, form.cms label {
   font-size: 0.8rem;
   font-weight: 400;
   text-align: left; }
 
 form.cms div.input {
-  overflow: hidden;
-  margin: 5px 0; }
+  overflow: hidden; }
 
 form.cms div.helptext, form.cms span.required {
   color: #666;
@@ -248,13 +246,20 @@ form.cms input, form.cms select, form.cms textarea {
   color: black;
   border: 1px solid #aaa;
   font-size: 1rem;
-  display: inline-block;
+  display: block;
   width: 100%;
   box-sizing: border-box;
   margin: 0;
-  padding: 5px; }
+  padding: 5px;
+  font-family: inherit; }
+
+form.cms input[type=checkbox] {
+  display: inline-block;
+  vertical-align: middle; }
 
 form.cms textarea {
+  font-size: 1rem;
+  padding: 5px 5px;
   height: 15em; }
 
 form.cms input[type=checkbox] {

cms/templates/cms/confirm.html

@@ -30,7 +30,10 @@
             {{deleted|unordered_list}}
           </ul>
 
-          <button name="confirm">{% trans 'delete' %}</button>
+          <form method="post">
+            {% csrf_token %}
+            <button name="confirm">{% trans 'delete' %}</button>
+          </form>
         {% endif %}
 
       </div>

cms/templates/cms/edit.html

@@ -20,15 +20,16 @@
           </div>
         {% endif %}
         {% for field in form %}
-          {% include 'cms/formfield.html' with field=field %}
+          {% if field.field.widget.input_type == 'checkbox' %}
+            {% include 'cms/formfield_checkbox.html' with field=field %}
+          {% else %}
+            {% include 'cms/formfield.html' with field=field %}
+          {% endif %}
         {% endfor %}
         {% if form.instance.pk %}
           <div class="formfield">
-            <div class="label">
-              <label for="id_delete">{% trans 'Delete' %}:</label>
-            </div>
             <div class="input">
-              <input type="checkbox" name="delete" id="id_delete">
+              <input type="checkbox" name="delete" id="id_delete"> <label for="id_delete">{% trans 'Delete' %}</label>
             </div>
           </div>
         {% endif %}
@@ -50,6 +51,8 @@
               {% for field in form.visible_fields %}
                 {% if field.name == 'DELETE' and not form.instance.pk %}
                   
+                {% elif field.field.widget.input_type == 'checkbox' %}
+                  {% include 'cms/formfield_checkbox.html' with field=field counter=forloop.parentloop.counter0 %}
                 {% else %}
                   {% include 'cms/formfield.html' with field=field counter=forloop.parentloop.counter0 %}
                 {% endif %}

cms/templates/cms/formfield_checkbox.html

@@ -0,0 +1,11 @@
+<div class="formfield{% if field.errors %} error{% endif %}{% if field.field.required %} required{% endif %} {{field.name}}" id="{{field.name}}{{counter}}">
+  <div class="errors">
+    {{field.errors}}
+  </div>
+  <div class="input">
+    {{field}} {{field.label_tag}}
+  </div>
+  <div class="helptext">
+      {{field.help_text}}
+  </div>
+</div>

cms/templates/cms/page.html

@@ -9,16 +9,10 @@
     {% include_section section %}
   {% endfor %}
 
-  <div class="edit page">
-    {% if user.is_staff %}
-      {% if page.slug %}
-        <a href="{% url 'cms:updatepage' page.pk %}">{% trans 'edit this page' %}</a>
-      {% else %}
-        <a href="{% url 'cms:updatehomepage' %}">{% trans 'edit this page' %}</a>
-      {% endif %}
-    {% else %}
-      <a href="{% url 'login' %}">{% trans 'login' %}</a>
-    {% endif %}
-  </div>
+  {% if user.is_staff %}
+    <div class="edit page">
+      <a href="{% if page.slug %}{% url 'cms:updatepage' page.pk %}{% else %}{% url 'cms:updatehomepage' %}{% endif %}">{% trans 'edit this page' %}</a>
+    </div>
+  {% endif %}
 
 {% endblock %}

cms/views.py

@@ -160,12 +160,21 @@ class TypeMixin(MenuMixin):
 class BaseUpdateView(generic.UpdateView):
     template_name = 'cms/edit.html'
 
+    def get_form_kwargs(self):
+        kwargs = super().get_form_kwargs()
+        kwargs.update({'label_suffix': ''})
+        return kwargs
+
     def form_valid(self, form):
         if 'delete' in self.request.POST:
             collector = NestedObjects(using='default')
             collector.collect([self.object])
             self.template_name = 'cms/confirm.html'
-            return self.render_to_response(self.get_context_data(deleted=collector.nested(), protected=collector.protected))
+            return self.render_to_response(self.get_context_data(
+                deleted = collector.nested(),
+                protected = collector.protected,
+                object = self.object,
+            ))
         else:
             form.save()
         return redirect(self.request.session.get('previous_url'))
@@ -177,7 +186,7 @@ class UpdatePage(StaffRequiredMixin, TypeMixin, BaseUpdateView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         if 'formset' not in context:
-            context['formset'] = SectionFormSet(instance=self.object)
+            context['formset'] = SectionFormSet(instance=self.object, form_kwargs={'label_suffix': ''})
         return context
 
     def post(self, request, *args, **kwargs):