be more verbose with pages and sections

cms/static/cms/cms.scss

@@ -9,6 +9,7 @@ html, body {
 }
 
 div.wrapper {
+  box-sizing: border-box;
   max-width: 700px;
   margin: auto;
   padding: 0 1rem;
@@ -19,7 +20,7 @@ div.spacer {
   clear: both;
 }
 
-header, section, footer {
+header, nav, section, footer {
   padding: 1rem;
 }
 
@@ -119,6 +120,7 @@ div.edit {
     position: fixed;
     left: 1em;
     top: 1em;
+    z-index: 1000;
   }
 }
 
@@ -126,6 +128,7 @@ div.edit a, div.edit button, a.edit{
   font-size: 1rem !important;
   font-weight: normal !important;
   color: red !important;
+  text-transform: none !important;
   text-decoration: none;
   color: inherit;
   border: none;

cms/static/cms/cms.scss.css

@@ -4,6 +4,7 @@ html, body {
   padding: 0; }
 
 div.wrapper {
+  box-sizing: border-box;
   max-width: 700px;
   margin: auto;
   padding: 0 1rem; }
@@ -12,7 +13,7 @@ div.spacer {
   height: 1rem;
   clear: both; }
 
-header, section, footer {
+header, nav, section, footer {
   padding: 1rem; }
 
 @media (min-width: 500px) {
@@ -84,12 +85,14 @@ div.edit {
   div.edit.page {
     position: fixed;
     left: 1em;
-    top: 1em; }
+    top: 1em;
+    z-index: 1000; }
 
 div.edit a, div.edit button, a.edit {
   font-size: 1rem !important;
   font-weight: normal !important;
   color: red !important;
+  text-transform: none !important;
   text-decoration: none;
   color: inherit;
   border: none;

cms/templates/cms/edit.html

@@ -55,3 +55,25 @@
     </div>
   </form>
 {% endblock %}
+
+{% block extrabody %}
+  <script type="text/javascript" src="/static/admin/js/urlify.js"></script>
+  <script>
+    /* My own implementation of Django's prepopulate.js */
+
+    var slugfield = document.getElementById('id_slug');
+    var titlefield = document.getElementById('id_title');
+
+    if (slugfield && titlefield) {
+        var virgin = slugfield.value === '';
+
+        if (virgin) {
+            titlefield.addEventListener('input', function(event) {
+                if (virgin) {
+                    slugfield.value = URLify(titlefield.value);
+                }
+            });
+        }
+    }
+  </script>
+{% endblock %}

cms/templates/cms/page.html

@@ -1,13 +1,13 @@
 {% extends 'base.html' %}
 {% load i18n %}
 
-{% block title %}{{block.super}} - {{object.title}}{% endblock %}
+{% block title %}{{block.super}} - {{page.title}}{% endblock %}
 
 {% block content %}
   <div class="edit page">
     {% if user.is_staff %}
-      {% if object.slug %}
+      {% if page.slug %}
-        <a href="{% url 'cms:updatepage' object.pk %}">{% trans 'edit this page' %}</a>
+        <a href="{% url 'cms:updatepage' page.pk %}">{% trans 'edit this page' %}</a>
       {% else %}
         <a href="{% url 'cms:updatehomepage' %}">{% trans 'edit this page' %}</a>
       {% endif %}
@@ -16,7 +16,7 @@
     {% endif %}
   </div>
 
-  {% for section in object.sections.all %}
+  {% for section in sections %}
     <section class="{{section.type}} color{{section.color}}">
       {% include 'cms/sections/'|add:section.type|add:'.html' %}
     </section>
@@ -26,7 +26,7 @@
     <section>
       <div class="wrapper">
         <div class="edit">
-          <a href="{% url 'cms:createsection' object.pk %}">+ {% trans 'new section' %}</a>
+          <a href="{% url 'cms:createsection' page.pk %}">+ {% trans 'new section' %}</a>
         </div>
       </div>
     </section>

cms/views.py

@@ -32,6 +32,16 @@ class PageView(MenuMixin, MemoryMixin, DetailView):
     model = Page
     template_name = 'cms/page.html'
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        page = self.object
+        sections = page.sections.all()
+        context.update({
+            'page': page,
+            'sections': sections,
+        })
+        return context
+
 class CreatePage(StaffRequiredMixin, MenuMixin, CreateView):
     model = Page
     form_class = PageForm