From a1aab90eb9f5e32896ecd7ea836c85c3215121a6 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Sun, 12 Jun 2022 21:08:11 +0100 Subject: [PATCH] Add basic homepage layout --- static/src/scss/_footer.scss | 4 ++ static/src/scss/_homepage.scss | 51 ++++++++++++++++++ static/src/scss/_variables.scss | 2 + static/src/scss/base.scss | 9 ++-- templates/base.html | 54 +++++++++++-------- templates/footer.html | 12 +++++ .../home/migrations/0003_homepage_heading.py | 18 +++++++ website/home/models.py | 7 ++- website/home/templates/home/home_page.html | 8 ++- 9 files changed, 135 insertions(+), 30 deletions(-) create mode 100644 static/src/scss/_footer.scss create mode 100644 static/src/scss/_homepage.scss create mode 100644 templates/footer.html create mode 100644 website/home/migrations/0003_homepage_heading.py diff --git a/static/src/scss/_footer.scss b/static/src/scss/_footer.scss new file mode 100644 index 0000000..a6ec22d --- /dev/null +++ b/static/src/scss/_footer.scss @@ -0,0 +1,4 @@ +footer.footer { + margin-top: auto; + padding: 1rem; +} diff --git a/static/src/scss/_homepage.scss b/static/src/scss/_homepage.scss new file mode 100644 index 0000000..06665e5 --- /dev/null +++ b/static/src/scss/_homepage.scss @@ -0,0 +1,51 @@ +body.page-home-homepage { + display: flex; + flex-direction: column; + + main { + // TODO: Image background + background-color: orange; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + color: $white; + } + + h1 { + font-size: 3rem; + } + + .latest { + padding: 0.25rem 0.5rem; + margin-top: 2rem; + background-color: transparentize($black, 0.2); + + &, + strong, + a { + color: $white !important; + } + } + + input#search-input { + margin-top: 15px; + max-width: 25% !important; + text-align: center; + background-color: transparentize($black, 0.2) !important; + color: $white !important; + + &::placeholder { + color: rgba(214, 210, 205, 0.8) !important; + } + + &:focus { + border-color: initial !important; + } + } + + #to-top { + display: none; + } +} diff --git a/static/src/scss/_variables.scss b/static/src/scss/_variables.scss index e69de29..6be9a88 100644 --- a/static/src/scss/_variables.scss +++ b/static/src/scss/_variables.scss @@ -0,0 +1,2 @@ +$black: #000; +$white: #fff; diff --git a/static/src/scss/base.scss b/static/src/scss/base.scss index 68b89ab..6949a99 100644 --- a/static/src/scss/base.scss +++ b/static/src/scss/base.scss @@ -5,13 +5,12 @@ @import "bulma/sass/helpers/_all"; @import "bulma/sass/grid/_all"; @import "bulma/sass/components/navbar"; +@import "bulma/sass/form/shared"; +@import "bulma/sass/form/input-textarea"; @import "navbar"; - -body { - display: flex; - flex-direction: column; -} +@import "homepage"; +@import "footer"; html, body { diff --git a/templates/base.html b/templates/base.html index 30c99ad..d0bd299 100644 --- a/templates/base.html +++ b/templates/base.html @@ -2,34 +2,42 @@ - - - - {% block title %}{% endblock %} - {% block title_suffix %} - {% wagtail_site as current_site %} - {% if current_site and current_site.site_name %}:: {{ current_site.site_name }}{% endif %} - {% endblock %} - - - + + + + {% block title %}{% endblock %} + {% block title_suffix %} + {% wagtail_site as current_site %} + {% if current_site and current_site.site_name %}:: {{ current_site.site_name }}{% endif %} + {% endblock %} + + + - - + + - {% block extra_css %}{% endblock %} - + {% block extra_css %}{% endblock %} + - - {% wagtailuserbar %} + + {% wagtailuserbar %} - {% include "navbar.html" %} + {% include "navbar.html" %} - {% block content %}{% endblock %} +
+ {% block content %}{% endblock %} +
- - + {% include "footer.html" %} - {% block extra_js %}{% endblock %} - + + + {% block darkmode %} + + {% endblock %} + + {% block extra_js %}{% endblock %} + + diff --git a/templates/footer.html b/templates/footer.html new file mode 100644 index 0000000..413b10c --- /dev/null +++ b/templates/footer.html @@ -0,0 +1,12 @@ + diff --git a/website/home/migrations/0003_homepage_heading.py b/website/home/migrations/0003_homepage_heading.py new file mode 100644 index 0000000..bde4deb --- /dev/null +++ b/website/home/migrations/0003_homepage_heading.py @@ -0,0 +1,18 @@ +# Generated by Django 4.0.5 on 2022-06-12 20:04 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ("home", "0002_create_homepage"), + ] + + operations = [ + migrations.AddField( + model_name="homepage", + name="heading", + field=models.CharField(blank=True, max_length=128), + ), + ] diff --git a/website/home/models.py b/website/home/models.py index 67bcf7c..92dc481 100644 --- a/website/home/models.py +++ b/website/home/models.py @@ -1,5 +1,10 @@ +from django.db import models +from wagtail.admin.panels import FieldPanel + from website.common.models import BasePage class HomePage(BasePage): - pass + heading = models.CharField(max_length=128, blank=True) + + content_panels = BasePage.content_panels + [FieldPanel("heading")] diff --git a/website/home/templates/home/home_page.html b/website/home/templates/home/home_page.html index 78963a1..63a6556 100644 --- a/website/home/templates/home/home_page.html +++ b/website/home/templates/home/home_page.html @@ -1,7 +1,13 @@ {% extends "wagtail_base.html" %} {% block content %} +

{{ page.heading }}

-Content + +
+ Latest Post: Do thing good, and other thing better → +
{% endblock content %} + +{% block darkmode %}{% endblock %}