Make forms save and look pretty

TODO: handle bug in show_relevant_fields()

cms/forms.py

@@ -34,6 +34,35 @@ class ContactForm(forms.Form):
         email.send()
 
 class PageForm(forms.ModelForm):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.formsets = [SectionFormSet(
+            data=self.data if self.is_bound else None,
+            files=self.files if self.is_bound else None,
+            instance=self.instance,
+            form_kwargs={'label_suffix': self.label_suffix},
+        )]
+
+    def is_valid(self):
+        return super().is_valid() and self.formsets[0].is_valid()
+
+    def clean(self):
+        super().clean()
+        if not self.formsets[0].is_valid():
+            self.add_error(None, _('There’s a problem saving one of the sections'))
+        if not self.instance and not self.formsets[0].has_changed():
+            self.add_error(None, _('You can’t save a new page without adding any sections!'))
+
+    def save(self, *args, **kwargs):
+        page = super().save()
+        formset = self.formsets[0]
+        formset.instance = page
+        formset.save()
+        if page.slug and not page.sections.exists():
+            page.delete()
+            return None
+        return page
+
     class Meta:
         model = Page
         fields = '__all__'
@@ -107,11 +136,17 @@ class BaseSectionFormSet(forms.BaseInlineFormSet):
         form.formsets = []
         for field in section._meta.get_fields():
             if field.one_to_many:
-                formset = forms.inlineformset_factory(Section, field.related_model, fields='__all__', extra=1)(
+                if getattr(section, field.name).exists():
+                    extra = 1
+                else:
+                    extra = 2
+                formset = forms.inlineformset_factory(Section, field.related_model, fields='__all__', extra=extra)(
                     instance=section,
                     data=form.data if self.is_bound else None,
                     files=form.files if self.is_bound else None,
-                    prefix=f'{form.prefix}-{field.name}')
+                    prefix=f'{form.prefix}-{field.name}',
+                    form_kwargs=self.form_kwargs,
+                )
                 formset.name = field.name
                 form.formsets.append(formset)
 
@@ -126,16 +161,10 @@ class BaseSectionFormSet(forms.BaseInlineFormSet):
     def save(self, commit=True):
         result = super().save(commit=commit)
         for form in self:
-            if hasattr(form, 'formset'):
+            for formset in form.formsets:
-                form.formset.save(commit=commit)
+                formset.save(commit=commit)
         return result
 
-    def get_form_kwargs(self, index):
-        kwargs = super().get_form_kwargs(index)
-        kwargs.update({'label_suffix': ''})
-        return kwargs
-
-
 SectionFormSet = forms.inlineformset_factory(
     parent_model = Page,
     model = Section,
@@ -143,9 +172,3 @@ SectionFormSet = forms.inlineformset_factory(
     formset = BaseSectionFormSet,
     extra=1,
 )
-
-# class ImagesForm(forms.ModelForm):
-#     class Meta:
-#         model = SectionImage
-#         exclude = ['section']
-# ImagesFormSet = forms.inlineformset_factory(Section, SectionImage, form=ImagesForm, extra=3)

cms/static/cms/admin.scss

@@ -0,0 +1,171 @@
+$font: Merriweather, sans-serif;
+
+body {
+  font-family: $font;
+  line-height: 2;
+}
+
+/* Form elements */
+
+form.cms {
+  background: #bfb;
+  overflow: hidden;
+  min-height: 100vh;
+  $background: #fff6;
+  padding-bottom: 125px;
+
+  div.wrapper {
+    margin: 0 auto;
+    padding: 0 0.5em;
+  }
+
+  fieldset {
+    background: $background;
+    border: 0.5px solid #ccc;
+    clear: both;
+    margin: 0.5em 0em;
+    padding: 0.5em;
+    border-radius: 0.25em;
+  }
+
+  img {
+    display: block;
+    clear: both;
+    width: 50px;
+    cursor: pointer;
+    float: right;
+  }
+
+  div.formfield {
+    margin-bottom: 10px;
+    clear: both;
+    box-sizing: border-box;
+
+    &.type, &.number, &.slug {
+      width: 77%;
+      clear: none;
+      float: left;
+    }
+    &.number {
+      width: 20%;
+      float: right;
+    }
+  }
+  div.formfield.error {
+    border: 2px dotted red;
+    border-radius: 3px;
+    padding: 0.5em;
+    //margin: 10px -50px;
+    background: #f001;
+
+    select, input, textarea {
+      background: white;
+    }
+  }
+  div.formfield.required {
+    div.label {
+      font-weight: 700;
+    }
+  }
+
+  div.label, label {
+    font-size: 0.7rem;
+    font-weight: 400;
+    text-align: left;
+    margin-bottom: 2px;
+  }
+
+  div.input {
+    overflow: hidden;
+  }
+
+  div.helptext, span.required {
+    color: #666;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+  }
+
+  span.required {
+    font-style: italic;
+  }
+
+  input, select, textarea {
+    background: $background;
+    color: black;
+    border: 0.5px solid #ccc;
+    border-radius: 3px;
+    font-size: 1rem;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 5px 8px;
+    font-family: inherit;
+  }
+  input[type=checkbox] {
+    width: auto;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  input[name$=title] {
+    font-weight: 700;
+  }
+  textarea {
+    font-size: 1rem;
+    height: 15em;
+    line-height: 1.5;
+  }
+  select {
+    padding-left: 3px;
+  }
+
+  ul.errorlist {
+    margin: 0;
+    margin-bottom: 1em;
+    padding: 0;
+    list-style: none;
+    color: red;
+    font-size: 12px;
+
+    li {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  div.global_error {
+    border: 2px dotted red;
+    border-radius: 3px;
+    padding: 10px;
+    margin: 0.5em 0;
+    background: #f001;
+    color: red;
+    font-weight: 700;
+
+    ul.errorlist {
+      margin: 0;
+      font-size: inherit;
+    }
+  }
+
+  .errors {
+    color: red;
+    font-weight: 700;
+  }
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 300;
+  src: url('Merriweather_300.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 700;
+  src: url('Merriweather_700.woff2') format('woff2');
+}
+
+

cms/static/cms/admin.scss.css

@@ -0,0 +1,121 @@
+body {
+  font-family: Merriweather, sans-serif;
+  line-height: 2; }
+
+/* Form elements */
+form.cms {
+  background: #bfb;
+  overflow: hidden;
+  min-height: 100vh;
+  padding-bottom: 125px; }
+  form.cms div.wrapper {
+    margin: 0 auto;
+    padding: 0 0.5em; }
+  form.cms fieldset {
+    background: #fff6;
+    border: 0.5px solid #ccc;
+    clear: both;
+    margin: 0.5em 0em;
+    padding: 0.5em;
+    border-radius: 0.25em; }
+  form.cms img {
+    display: block;
+    clear: both;
+    width: 50px;
+    cursor: pointer;
+    float: right; }
+  form.cms div.formfield {
+    margin-bottom: 10px;
+    clear: both;
+    box-sizing: border-box; }
+    form.cms div.formfield.type, form.cms div.formfield.number, form.cms div.formfield.slug {
+      width: 77%;
+      clear: none;
+      float: left; }
+    form.cms div.formfield.number {
+      width: 20%;
+      float: right; }
+  form.cms div.formfield.error {
+    border: 2px dotted red;
+    border-radius: 3px;
+    padding: 0.5em;
+    background: #f001; }
+    form.cms div.formfield.error select, form.cms div.formfield.error input, form.cms div.formfield.error textarea {
+      background: white; }
+  form.cms div.formfield.required div.label {
+    font-weight: 700; }
+  form.cms div.label, form.cms label {
+    font-size: 0.7rem;
+    font-weight: 400;
+    text-align: left;
+    margin-bottom: 2px; }
+  form.cms div.input {
+    overflow: hidden; }
+  form.cms div.helptext, form.cms span.required {
+    color: #666;
+    font-size: 12px !important;
+    font-weight: 400 !important; }
+  form.cms span.required {
+    font-style: italic; }
+  form.cms input, form.cms select, form.cms textarea {
+    background: #fff6;
+    color: black;
+    border: 0.5px solid #ccc;
+    border-radius: 3px;
+    font-size: 1rem;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 5px 8px;
+    font-family: inherit; }
+  form.cms input[type=checkbox] {
+    width: auto;
+    display: inline-block;
+    vertical-align: middle; }
+  form.cms input[name$=title] {
+    font-weight: 700; }
+  form.cms textarea {
+    font-size: 1rem;
+    height: 15em;
+    line-height: 1.5; }
+  form.cms select {
+    padding-left: 3px; }
+  form.cms ul.errorlist {
+    margin: 0;
+    margin-bottom: 1em;
+    padding: 0;
+    list-style: none;
+    color: red;
+    font-size: 12px; }
+    form.cms ul.errorlist li {
+      margin: 0;
+      padding: 0; }
+  form.cms div.global_error {
+    border: 2px dotted red;
+    border-radius: 3px;
+    padding: 10px;
+    margin: 0.5em 0;
+    background: #f001;
+    color: red;
+    font-weight: 700; }
+    form.cms div.global_error ul.errorlist {
+      margin: 0;
+      font-size: inherit; }
+  form.cms .errors {
+    color: red;
+    font-weight: 700; }
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 300;
+  src: url("Merriweather_300.woff2") format("woff2"); }
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 700;
+  src: url("Merriweather_700.woff2") format("woff2"); }
+
+/*# sourceMappingURL=admin.scss.css.map */

cms/static/cms/admin.scss.css.map

@@ -0,0 +1,9 @@
+{
+	"version": 3,
+	"file": "admin.css",
+	"sources": [
+		"admin.scss"
+	],
+	"names": [],
+	"mappings": "AAEA,AAAA,IAAI,CAAC;EACH,WAAW,EAHN,YAAY,EAAE,UAAU;EAI7B,WAAW,EAAE,CAAC,GACf;;AAED,mBAAmB;AAEnB,AAAA,IAAI,AAAA,IAAI,CAAC;EACP,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE,MAAM;EAChB,UAAU,EAAE,KAAK;EAEjB,cAAc,EAAE,KAAK,GA4ItB;EAjJD,AAOE,IAPE,AAAA,IAAI,CAON,GAAG,AAAA,QAAQ,CAAC;IACV,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO,GACjB;EAVH,AAYE,IAZE,AAAA,IAAI,CAYN,QAAQ,CAAC;IACP,UAAU,EATC,KAAK;IAUhB,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,KAAK;IACd,aAAa,EAAE,MAAM,GACtB;EAnBH,AAqBE,IArBE,AAAA,IAAI,CAqBN,GAAG,CAAC;IACF,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,KAAK,GACb;EA3BH,AA6BE,IA7BE,AAAA,IAAI,CA6BN,GAAG,AAAA,UAAU,CAAC;IACZ,aAAa,EAAE,IAAI;IACnB,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,UAAU,GAWvB;IA3CH,AAkCI,IAlCA,AAAA,IAAI,CA6BN,GAAG,AAAA,UAAU,AAKV,KAAK,EAlCV,IAAI,AAAA,IAAI,CA6BN,GAAG,AAAA,UAAU,AAKF,OAAO,EAlCpB,IAAI,AAAA,IAAI,CA6BN,GAAG,AAAA,UAAU,AAKQ,KAAK,CAAC;MACvB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,IAAI;MACX,KAAK,EAAE,IAAI,GACZ;IAtCL,AAuCI,IAvCA,AAAA,IAAI,CA6BN,GAAG,AAAA,UAAU,AAUV,OAAO,CAAC;MACP,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK,GACb;EA1CL,AA4CE,IA5CE,AAAA,IAAI,CA4CN,GAAG,AAAA,UAAU,AAAA,MAAM,CAAC;IAClB,MAAM,EAAE,cAAc;IACtB,aAAa,EAAE,GAAG;IAClB,OAAO,EAAE,KAAK;IAEd,UAAU,EAAE,KAAK,GAKlB;IAtDH,AAmDI,IAnDA,AAAA,IAAI,CA4CN,GAAG,AAAA,UAAU,AAAA,MAAM,CAOjB,MAAM,EAnDV,IAAI,AAAA,IAAI,CA4CN,GAAG,AAAA,UAAU,AAAA,MAAM,CAOT,KAAK,EAnDjB,IAAI,AAAA,IAAI,CA4CN,GAAG,AAAA,UAAU,AAAA,MAAM,CAOF,QAAQ,CAAC;MACtB,UAAU,EAAE,KAAK,GAClB;EArDL,AAwDI,IAxDA,AAAA,IAAI,CAuDN,GAAG,AAAA,UAAU,AAAA,SAAS,CACpB,GAAG,AAAA,MAAM,CAAC;IACR,WAAW,EAAE,GAAG,GACjB;EA1DL,AA6DE,IA7DE,AAAA,IAAI,CA6DN,GAAG,AAAA,MAAM,EA7DX,IAAI,AAAA,IAAI,CA6DK,KAAK,CAAC;IACf,SAAS,EAAE,MAAM;IACjB,WAAW,EAAE,GAAG;IAChB,UAAU,EAAE,IAAI;IAChB,aAAa,EAAE,GAAG,GACnB;EAlEH,AAoEE,IApEE,AAAA,IAAI,CAoEN,GAAG,AAAA,MAAM,CAAC;IACR,QAAQ,EAAE,MAAM,GACjB;EAtEH,AAwEE,IAxEE,AAAA,IAAI,CAwEN,GAAG,AAAA,SAAS,EAxEd,IAAI,AAAA,IAAI,CAwEQ,IAAI,AAAA,SAAS,CAAC;IAC1B,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,eAAe;IAC1B,WAAW,EAAE,cAAc,GAC5B;EA5EH,AA8EE,IA9EE,AAAA,IAAI,CA8EN,IAAI,AAAA,SAAS,CAAC;IACZ,UAAU,EAAE,MAAM,GACnB;EAhFH,AAkFE,IAlFE,AAAA,IAAI,CAkFN,KAAK,EAlFP,IAAI,AAAA,IAAI,CAkFC,MAAM,EAlFf,IAAI,AAAA,IAAI,CAkFS,QAAQ,CAAC;IACtB,UAAU,EA/EC,KAAK;IAgFhB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,gBAAgB;IACxB,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,UAAU;IACtB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,OAAO;IAChB,WAAW,EAAE,OAAO,GACrB;EA9FH,AA+FE,IA/FE,AAAA,IAAI,CA+FN,KAAK,CAAA,AAAA,IAAC,CAAD,QAAC,AAAA,EAAe;IACnB,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,YAAY;IACrB,cAAc,EAAE,MAAM,GACvB;EAnGH,AAoGE,IApGE,AAAA,IAAI,CAoGN,KAAK,CAAA,AAAA,IAAC,EAAD,KAAC,AAAA,EAAa;IACjB,WAAW,EAAE,GAAG,GACjB;EAtGH,AAuGE,IAvGE,AAAA,IAAI,CAuGN,QAAQ,CAAC;IACP,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,IAAI;IACZ,WAAW,EAAE,GAAG,GACjB;EA3GH,AA4GE,IA5GE,AAAA,IAAI,CA4GN,MAAM,CAAC;IACL,YAAY,EAAE,GAAG,GAClB;EA9GH,AAgHE,IAhHE,AAAA,IAAI,CAgHN,EAAE,AAAA,UAAU,CAAC;IACX,MAAM,EAAE,CAAC;IACT,aAAa,EAAE,GAAG;IAClB,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,GAAG;IACV,SAAS,EAAE,IAAI,GAMhB;IA5HH,AAwHI,IAxHA,AAAA,IAAI,CAgHN,EAAE,AAAA,UAAU,CAQV,EAAE,CAAC;MACD,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC,GACX;EA3HL,AA8HE,IA9HE,AAAA,IAAI,CA8HN,GAAG,AAAA,aAAa,CAAC;IACf,MAAM,EAAE,cAAc;IACtB,aAAa,EAAE,GAAG;IAClB,OAAO,EAAE,IAAI;IACb,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,GAAG;IACV,WAAW,EAAE,GAAG,GAMjB;IA3IH,AAuII,IAvIA,AAAA,IAAI,CA8HN,GAAG,AAAA,aAAa,CASd,EAAE,AAAA,UAAU,CAAC;MACX,MAAM,EAAE,CAAC;MACT,SAAS,EAAE,OAAO,GACnB;EA1IL,AA6IE,IA7IE,AAAA,IAAI,CA6IN,OAAO,CAAC;IACN,KAAK,EAAE,GAAG;IACV,WAAW,EAAE,GAAG,GACjB;;AAGH,UAAU;EACR,WAAW,EAAE,cAAc;EAC3B,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,6BAA6B,CAAC,eAAe;;AAGpD,UAAU;EACR,WAAW,EAAE,cAAc;EAC3B,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,6BAA6B,CAAC,eAAe"
+}

cms/static/cms/cms.scss

@@ -258,145 +258,3 @@ section.contact {
     display: none;
   }
 }
-
-/* Form elements */
-
-form.cms {
-  //margin: 0.5em auto;
-
-  div.wrapper {
-    margin: 0 auto;
-    padding: 0 0.5em;
-  }
-
-  fieldset {
-    border: 0.5px solid #ccc;
-    clear: both;
-    margin: 0.5em 0em;
-    padding: 0.5em;
-    border-radius: 0.25em;
-  }
-
-  img {
-    display: block;
-    clear: both;
-    width: 50px;
-    cursor: pointer;
-  }
-
-  div.formfield {
-    margin-bottom: 10px;
-    clear: both;
-    box-sizing: border-box;
-
-    &.type, &.number, &.slug {
-      width: 77%;
-      clear: none;
-      float: left;
-    }
-    &.number {
-      width: 20%;
-      float: right;
-    }
-  }
-  div.formfield.error {
-    border: 2px dotted red;
-    padding: 10px;
-    margin: 10px -10px;
-    background: #f001;
-  }
-  div.formfield.required {
-    div.label {
-      font-weight: 700;
-    }
-    input {
-      //font-weight: bold;
-    }
-  }
-
-  div.label, label {
-    font-size: 0.7rem;
-    font-weight: 400;
-    text-align: left;
-    margin-bottom: 2px;
-  }
-
-  div.input {
-    overflow: hidden;
-  }
-
-  div.helptext, span.required {
-    color: #666;
-    font-size: 12px !important;
-    font-weight: 400 !important;
-  }
-
-  span.required {
-    font-style: italic;
-  }
-
-  input, select, textarea {
-    background: white;
-    color: black;
-    border: 0.5px solid #ccc;
-    border-radius: 3px;
-    font-size: 1rem;
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 5px 8px;
-    font-family: inherit;
-  }
-  input[type=checkbox] {
-    width: auto;
-    display: inline-block;
-    vertical-align: middle;
-  }
-  input[name$=title] {
-    font-weight: bold;
-  }
-  textarea {
-    font-size: 1rem;
-    height: 15em;
-    line-height: 1.5;
-  }
-  select {
-    background: white;
-    padding-left: 3px;
-  }
-
-  ul.errorlist {
-    margin: 0;
-    margin-bottom: 1em;
-    padding: 0;
-    list-style: none;
-    color: red;
-    font-size: 12px;
-
-    li {
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  div.global_error {
-    border: 2px dotted red;
-    padding: 10px;
-    margin: 1em -10px;
-    background: #f001;
-    color: red;
-    font-weight: bold;
-
-    ul.errorlist {
-      margin: 0;
-      font-size: inherit;
-    }
-  }
-
-  .errors {
-    color: red;
-    font-weight: bold;
-  }
-}
-

cms/static/cms/cms.scss.css

@@ -182,116 +182,4 @@ section {
 section.contact div#message {
   display: none; }
 
-/* Form elements */
-form.cms div.wrapper {
-  margin: 0 auto;
-  padding: 0 0.5em; }
-
-form.cms fieldset {
-  border: 0.5px solid #ccc;
-  clear: both;
-  margin: 0.5em 0em;
-  padding: 0.5em;
-  border-radius: 0.25em; }
-
-form.cms img {
-  display: block;
-  clear: both;
-  width: 50px;
-  cursor: pointer; }
-
-form.cms div.formfield {
-  margin-bottom: 10px;
-  clear: both;
-  box-sizing: border-box; }
-  form.cms div.formfield.type, form.cms div.formfield.number, form.cms div.formfield.slug {
-    width: 77%;
-    clear: none;
-    float: left; }
-  form.cms div.formfield.number {
-    width: 20%;
-    float: right; }
-
-form.cms div.formfield.error {
-  border: 2px dotted red;
-  padding: 10px;
-  margin: 10px -10px;
-  background: #f001; }
-
-form.cms div.formfield.required div.label {
-  font-weight: 700; }
-
-form.cms div.label, form.cms label {
-  font-size: 0.7rem;
-  font-weight: 400;
-  text-align: left;
-  margin-bottom: 2px; }
-
-form.cms div.input {
-  overflow: hidden; }
-
-form.cms div.helptext, form.cms span.required {
-  color: #666;
-  font-size: 12px !important;
-  font-weight: 400 !important; }
-
-form.cms span.required {
-  font-style: italic; }
-
-form.cms input, form.cms select, form.cms textarea {
-  background: white;
-  color: black;
-  border: 0.5px solid #ccc;
-  border-radius: 3px;
-  font-size: 1rem;
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 5px 8px;
-  font-family: inherit; }
-
-form.cms input[type=checkbox] {
-  width: auto;
-  display: inline-block;
-  vertical-align: middle; }
-
-form.cms input[name$=title] {
-  font-weight: bold; }
-
-form.cms textarea {
-  font-size: 1rem;
-  height: 15em;
-  line-height: 1.5; }
-
-form.cms select {
-  background: white;
-  padding-left: 3px; }
-
-form.cms ul.errorlist {
-  margin: 0;
-  margin-bottom: 1em;
-  padding: 0;
-  list-style: none;
-  color: red;
-  font-size: 12px; }
-  form.cms ul.errorlist li {
-    margin: 0;
-    padding: 0; }
-
-form.cms div.global_error {
-  border: 2px dotted red;
-  padding: 10px;
-  margin: 1em -10px;
-  background: #f001;
-  color: red;
-  font-weight: bold; }
-  form.cms div.global_error ul.errorlist {
-    margin: 0;
-    font-size: inherit; }
-
-form.cms .errors {
-  color: red;
-  font-weight: bold; }
-
 /*# sourceMappingURL=cms.scss.css.map */

cms/templates/cms/admin.html

@@ -8,6 +8,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{% static 'cms/cms.scss.css' %}">
+    <link rel="stylesheet" href="{% static 'cms/admin.scss.css' %}">
     {% block extrahead %}{% endblock %}
   </head>
   <body>

cms/templates/cms/edit.html

@@ -4,7 +4,7 @@
 {% block title %}{% trans 'Edit' %} {{form.instance}}{% endblock %}
 
 {% block content %}
-  <form method="POST" enctype="multipart/form-data" class="cms">
+  <form method="POST" enctype="multipart/form-data" class="cms" novalidate>
     <div class="wrapper">
       {% csrf_token %}
 
@@ -17,7 +17,7 @@
       {% include 'cms/form.html' %}
 
       <div class="edit page">
-        <button><img src="{% static 'cms/save.png' %}"></button>
+        <button><img src="{% static 'cms/save.png' %}" width="75"></button>
       </div>
     </div>
   </form>
@@ -47,10 +47,10 @@
             increment(el, 'id_' + prefix, 'for');
         }
 
-        extra_form.style.display = 'block';
         node.remove();
         parent.appendChild(extra_form);
         parent.appendChild(node);
+        base.hidden = false;
         counter.value = parseInt(counter.value) + 1;
         setEventHandlers();
         resizeTextareas();
@@ -75,24 +75,22 @@
             tx[i].setAttribute('style', 'height:0;overflow-y:hidden;');
             tx[i].style.height = (tx[i].scrollHeight) + 'px';
             tx[i].addEventListener('input', function() {
-                console.log(this.scrollHeight);
                 this.style.height = (this.scrollHeight) + 1 + 'px'; // why the 1???
             });
         }
     }
 
     function showRelevantFields(form, type) {
-        console.log(form, type);
         let fields_per_type = {{fields_per_type|safe}};
         for (let field of form.querySelectorAll(`fieldset#${form.id} > div`)) {
-            field.style.display = 'none';
+            field.hidden = true;
         }
         for (let field of form.querySelectorAll(`fieldset#${form.id} > div.DELETE`)) {
-            field.style.display = 'block';
+            field.hidden = false;
         }
         for (let name of fields_per_type[type]) {
             for (let field of form.querySelectorAll(`fieldset#${form.id} > div.${name}`)) {
-                field.style.display = 'block';
+                field.hidden = false;
             }
         }
     }

cms/templates/cms/form.html

@@ -1,6 +1,6 @@
 {% load static %}
 
-<fieldset id="{{form.prefix}}" class="form">
+<fieldset id="{{form.prefix}}" class="form" {% if forloop.last %}hidden{% endif %}>
   {{form.media}}
   {% for field in form.hidden_fields %}
     {{field}}
@@ -14,7 +14,7 @@
       {% for form in formset %}
         {% include 'cms/form.html' %}
       {% endfor %}
-      <img onclick="addForm(this, '{{formset.prefix}}')" src="{% static 'cms/add.png' %}">
+      <img onclick="addForm(this, '{{formset.prefix}}')" src="{% static 'cms/add.png' %}" width="75">
     </div>
   {% endfor %}
 </fieldset>

cms/views.py

@@ -157,7 +157,6 @@ class EditPage(UserPassesTestMixin, edit.ModelFormMixin, base.TemplateResponseMi
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
-        context['form'].formsets = [context['formset']]
         fields_per_type = {}
         for model, _ in Section.TYPES:
             ctype = ContentType.objects.get(
@@ -179,32 +178,18 @@ class EditPage(UserPassesTestMixin, edit.ModelFormMixin, base.TemplateResponseMi
 
     def get(self, request, *args, **kwargs):
         self.object = self.get_object()
-        formset = self.get_formset()
+        return self.render_to_response(self.get_context_data())
-        return self.render_to_response(self.get_context_data(formset=formset))
-
-    def get_formset(self):
-        if self.request.POST:
-            return SectionFormSet(self.request.POST, self.request.FILES, instance=self.object)
-        return SectionFormSet(instance=self.object)
 
     def post(self, request, *args, **kwargs):
         self.object = self.get_object()
         form = self.get_form()
-        formset = self.get_formset()
 
-        if form.is_valid() and formset.is_valid():
+        if form.is_valid():
-            if not self.object and not formset.has_changed():
+            page = form.save()
-                form.add_error(None, _('You can’t save a new page without adding any sections!'))
+            if page:
-            else:
-                page = form.save()
-                formset.instance = page
-                formset.save()
-                if page.slug and not page.sections.exists():
-                    page.delete()
-                    return HttpResponseRedirect('/')
                 return HttpResponseRedirect(page.get_absolute_url())
-
+            return HttpResponseRedirect('/')
-        return self.render_to_response(self.get_context_data(form=form, formset=formset))
+        return self.render_to_response(self.get_context_data(form=form))
 
 class CreatePage(EditPage):
     def get_object(self):