Add basic content page

static/src/scss/_content.scss

@@ -0,0 +1,3 @@
+.content {
+  font-size: 1.25rem;
+}

static/src/scss/_hero.scss

@@ -0,0 +1,43 @@
+section.hero {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  margin-top: 2.5rem;
+  padding-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  background-color: $white;
+
+  .hero-body {
+    padding: 0;
+  }
+
+  .dropdown-wrapper {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+  }
+
+  .dropdown {
+    li {
+      list-style: none !important;
+    }
+
+    .dropdown-content {
+      width: 17rem;
+      overflow-y: scroll;
+      max-height: 50vh;
+    }
+
+    ul {
+      margin: 0.5rem;
+    }
+
+    .menu-list li ul {
+      padding-left: initial;
+    }
+  }
+
+  .subtitle {
+    margin-bottom: 0.5rem;
+  }
+}

static/src/scss/base.scss

@@ -5,6 +5,8 @@
 @import "navbar";
 @import "homepage";
 @import "footer";
+@import "hero";
+@import "content";
 
 html,
 body {

website/common/migrations/0001_initial.py

@@ -0,0 +1,37 @@
+# Generated by Django 4.0.5 on 2022-06-14 19:20
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ("wagtailcore", "0069_log_entry_jsonfield"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="ContentPage",
+            fields=[
+                (
+                    "page_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailcore.page",
+                    ),
+                ),
+                ("subtitle", models.CharField(blank=True, max_length=255)),
+            ],
+            options={
+                "abstract": False,
+            },
+            bases=("wagtailcore.page",),
+        ),
+    ]

website/common/models.py

@@ -1,3 +1,5 @@
+from django.db import models
+from wagtail.admin.panels import FieldPanel
 from wagtail.models import Page
 
 
@@ -9,3 +11,9 @@ class BasePage(Page):
     @property
     def body_class(cls) -> str:
         return "page-" + cls._meta.db_table.replace("_", "-")
+
+
+class ContentPage(BasePage):
+    subtitle = models.CharField(max_length=255, blank=True)
+
+    content_panels = BasePage.content_panels + [FieldPanel("subtitle")]

website/common/templates/common/content_page.html

@@ -0,0 +1,42 @@
+{% extends "wagtail_base.html" %}
+
+{% block content %}
+<section class="hero container">
+  <div class="hero-body">
+    <div class="columns">
+      <div class="column">
+        <h1 class="title is-1">{{ page.title }}</h1>
+        {% if page.subtitle %}
+          <h2 class="subtitle">{{ page.subtitle }}</h2>
+        {% endif %}
+      </div>
+      <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
+        <div class="dropdown is-hoverable is-right">
+          <div class="dropdown-trigger">
+            <button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu">
+              <span>Table of Contents</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="dropdown-menu" role="menu">
+            <div class="dropdown-content menu">
+              <ul class="menu-list">
+                <li><a>Dashboard</a></li>
+              </ul>
+            </div>
+          </div>
+          <button class="button is-radiusless">Top</button>
+      </div>
+
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<div class="container content">
+  {% lorem 10 p %}
+</div>
+{% endblock content %}

website/settings.py

@@ -19,6 +19,7 @@ EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
 
 # Application definition
 INSTALLED_APPS = [
+    "website.common",
     "website.home",
     "website.search",
     "wagtail.contrib.forms",