improve templates

cms/forms.py

@@ -6,4 +6,4 @@ class PageForm(forms.ModelForm):
         model = Page
         fields = '__all__'
 
-SectionFormSet = forms.inlineformset_factory(Page, Section, exclude='__all__', extra=0)
+SectionFormSet = forms.inlineformset_factory(Page, Section, exclude='__all__', extra=1)

cms/static/cms/cms.scss

@@ -12,7 +12,7 @@ div.wrapper {
   margin: auto;
 }
 
-header {
+header, section, footer {
   padding: 1rem;
 }
 
@@ -106,13 +106,6 @@ nav {
   }
 }
 
-article {
-  section {
-    padding: 1rem;
-  }
-}
-
-
 div.edit {
   position: fixed;
   left: 1em;
@@ -142,21 +135,49 @@ a.edit {
   color: red !important;
 }
 
-div.video {
+article {
-  padding: 0;
+  section {
-  margin: -10px 0;
+    div.image {
+      img {
+        width: 100%;
+      }
+    }
 
-  div.iframe {
+    div.title {
-    width: 100%;
+      font-size: 2em;
-    padding-bottom: 56%;
+      text-align: center;
-    position: relative;
+    }
 
-    iframe {
+    div.content {
-      position: absolute;
+    }
-      width: 100%;
+
-      height: 100%;
+    div.video {
-      left: 0;
+      div.iframe {
-      top: 0;
+        width: 100%;
+        padding-bottom: 56%;
+        position: relative;
+
+        iframe {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+        }
+      }
+    }
+
+    div.button {
+      text-align: center;
+      a {
+        text-decoration: none;
+        background: black;
+        color: white;
+        padding: 5px 15px;
+        font-size: 1.5em;
+        border-radius: 3px;
+        display: inline-block;
+      }
     }
   }
 }
@@ -164,6 +185,15 @@ div.video {
 /* Form elements */
 
 form {
+  div.global_error {
+    border: 2px dotted red;
+    padding: 10px;
+    margin: 1em -10px;
+    background: #f001;
+    color: red;
+    font-weight: bold;
+  }
+
   fieldset {
     padding: 2em;
     margin-bottom: 2em;
@@ -185,11 +215,10 @@ form {
     font-size: 1rem;
   }
   div.formfield.error {
-    border: 1px solid red;
+    border: 2px dotted red;
-    border-radius: 10px;
+    padding: 10px;
-    div.errors ul li:before {
+    margin: 0 -10px;
-      content: "Oeps! ";
+    background: #f001;
-    }
   }
   div.formfield.required {
     div.label {
@@ -258,6 +287,7 @@ form {
 
   ul.errorlist {
     margin: 0;
+    margin-bottom: 1em;
     padding: 0;
     list-style: none;
     color: red;

cms/static/cms/cms.scss.css

@@ -7,7 +7,7 @@ div.wrapper {
   max-width: 700px;
   margin: auto; }
 
-header {
+header, section, footer {
   padding: 1rem; }
 
 @media (min-width: 500px) {
@@ -74,9 +74,6 @@ header {
     nav ul#menu.visible {
       transform: translatex(0); } }
 
-article section {
-  padding: 1rem; }
-
 div.edit {
   position: fixed;
   left: 1em;
@@ -99,21 +96,44 @@ div.edit {
 a.edit {
   color: red !important; }
 
-div.video {
+article section div.image img {
-  padding: 0;
+  width: 100%; }
-  margin: -10px 0; }
+
-  div.video div.iframe {
+article section div.title {
+  font-size: 2em;
+  text-align: center; }
+
+article section div.video div.iframe {
+  width: 100%;
+  padding-bottom: 56%;
+  position: relative; }
+  article section div.video div.iframe iframe {
+    position: absolute;
     width: 100%;
-    padding-bottom: 56%;
+    height: 100%;
-    position: relative; }
+    left: 0;
-    div.video div.iframe iframe {
+    top: 0; }
-      position: absolute;
+
-      width: 100%;
+article section div.button {
-      height: 100%;
+  text-align: center; }
-      left: 0;
+  article section div.button a {
-      top: 0; }
+    text-decoration: none;
+    background: black;
+    color: white;
+    padding: 5px 15px;
+    font-size: 1.5em;
+    border-radius: 3px;
+    display: inline-block; }
 
 /* Form elements */
+form div.global_error {
+  border: 2px dotted red;
+  padding: 10px;
+  margin: 1em -10px;
+  background: #f001;
+  color: red;
+  font-weight: bold; }
+
 form fieldset {
   padding: 2em;
   margin-bottom: 2em;
@@ -131,10 +151,10 @@ form div.formfield > * {
   font-size: 1rem; }
 
 form div.formfield.error {
-  border: 1px solid red;
+  border: 2px dotted red;
-  border-radius: 10px; }
+  padding: 10px;
-  form div.formfield.error div.errors ul li:before {
+  margin: 0 -10px;
-    content: "Oeps! "; }
+  background: #f001; }
 
 form div.formfield.required div.label {
   font-weight: 700; }
@@ -191,6 +211,7 @@ form div.filefield {
 
 form ul.errorlist {
   margin: 0;
+  margin-bottom: 1em;
   padding: 0;
   list-style: none;
   color: red;

cms/templates/cms/base.html

@@ -18,34 +18,30 @@
       {% block main %}
 
         <header>
-          <div class="wrapper">
+          {% block header %}
-            {% block header %}
+          {% endblock %}
-            {% endblock %}
-          </div>
         </header>
 
         <nav>
-          <div class="wrapper">
+          {% block nav %}
-            {% block nav %}
+            <ul id="menu">
-              <ul id="menu">
+              {% for p in pages %}
-                {% for p in pages %}
+                {% if p.slug %}
-                  {% if p.slug %}
+                  <li><a href="{% url 'cms:page' p.slug %}" {% if p.pk == object.pk %}class="current"{% endif %}>{{p.title}}</a></li>
-                    <li><a href="{% url 'cms:page' p.slug %}" {% if p.pk == object.pk %}class="current"{% endif %}>{{p.title}}</a></li>
+                {% else %}
-                  {% else %}
+                  <li><a href="{% url 'cms:homepage' %}" {% if p.pk == object.pk %}class="current"{% endif %}>{{p.title}}</a></li>
-                    <li><a href="{% url 'cms:homepage' %}" {% if p.pk == object.pk %}class="current"{% endif %}>{{p.title}}</a></li>
-                  {% endif %}
-                {% endfor %}
-                {% if user.is_staff %}
-                  <li><a class="edit" href="{% url 'cms:createpage' %}">+ {% trans 'new page' %}</a></li>
                 {% endif %}
-              </ul>
+              {% endfor %}
-            {% endblock %}
+              {% if user.is_staff %}
-          </div>
+                <li><a class="edit" href="{% url 'cms:createpage' %}">+ {% trans 'new page' %}</a></li>
-          <button class="hamburger hamburger--collapse" id='hamburger'>
+              {% endif %}
-            <span class="hamburger-box">
+            </ul>
-              <span class="hamburger-inner"></span>
+            <button class="hamburger hamburger--collapse" id='hamburger'>
-            </span>
+              <span class="hamburger-box">
-          </button>
+                <span class="hamburger-inner"></span>
+              </span>
+            </button>
+          {% endblock %}
         </nav>
 
         <article>
@@ -54,10 +50,8 @@
         </article>
 
         <footer>
-          <div class="wrapper">
+          {% block footer %}
-            {% block footer %}
+          {% endblock %}
-            {% endblock %}
-          </div>
         </footer>
 
       {% endblock %}

cms/templates/cms/edit.html

@@ -7,6 +7,13 @@
     {{form.media}}
 
     <div class="wrapper">
+      {% if form.errors or formset.errors %}
+        <div class="global_error">
+          {% blocktrans %}
+            Please correct the errors below and save again
+          {% endblocktrans %}
+        </div>
+      {% endif %}
       {% for field in form %}
         {% include 'cms/formfield.html' with field=field %}
       {% endfor %}

cms/templates/cms/sections/base.html

@@ -1,7 +1,7 @@
 {% load thumbnail embed_video_tags %}
 
 {% if section.image %}
-  <div class="photo">
+  <div class="image">
     <img alt="" src="{% thumbnail section.image 800x800 %}">
   </div>
 {% endif %}
@@ -25,3 +25,9 @@
     </div>
   </div>
 {% endif %}
+
+{% if section.button_text and section.button_link %}
+  <div class="button">
+    <a href="{{section.button_link}}">{{section.button_text}}</a>
+  </div>
+{% endif %}

cms/templates/cms/sections/pages.html

@@ -1,22 +0,0 @@
-{% load thumbnail %}
-
-<ul>
-  {% for p in pages %}
-    {% if p.slug %}
-      <li>
-        <a href="{{p.get_absolute_url}}">
-          <div class="image" {% if p.image %}style="background-image: url('{% thumbnail p.image 500x500 %}')"{% endif %}></div>
-        </a>
-
-        <div class="text">
-          <h1>{{p.title}}</h1>
-          {{p.content|safe}}
-          {% if user.is_staff %}
-            <a class="edit" href="{% url 'updatepage' p.slug %}">[ bewerken ]</a>
-          {% endif %}
-          <a class="readmore" href="{{p.get_absolute_url}}">Lees meer &raquo;</a>
-        </div>
-      </li>
-    {% endif %}
-  {% endfor %}
-</ul>

cms/templates/cms/sections/photo.html

@@ -1 +0,0 @@
-{% extends 'cms/sections/base.html' %}

cms/templates/cms/sections/video.html

@@ -1 +0,0 @@
-{% extends 'cms/sections/base.html' %}

cms/templates/registration/login.html

@@ -1,16 +1,23 @@
 {% extends "base.html" %}
 {% load i18n %}
 
+{% block nav %}
+{% endblock %}
+
 {% block content %}
   <form method="post">
     {% csrf_token %}
-    <fieldset>
+
-      <legend>{% trans 'Log in' %}</legend>
+    <section>
       {{form.non_field_errors}}
-      {% for field in form %}
+      <div class="wrapper">
-        {% include 'cms/formfield.html' with field=field %}
+        <h1>{% trans 'Log in' %}</h1>
-      {% endfor %}
+        {% for field in form %}
-    </fieldset>
+          {% include 'cms/formfield.html' with field=field %}
-    <input type="submit" value="{% trans 'Log in' %}">
+        {% endfor %}
+        <button>{% trans 'Log in' %}</button>
+      </div>
+    </section>
+
   </form>
 {% endblock %}

cms/views.py

@@ -33,7 +33,7 @@ class EditPageMixin:
     def post(self, request, *args, **kwargs):
         self.object = self.get_object()
         form = self.get_form()
-        formset = SectionFormSet(request.POST, instance=self.object)
+        formset = SectionFormSet(request.POST, request.FILES, instance=self.object)
         if form.is_valid() and formset.is_valid():
             return self.form_valid(form, formset)
         else: