repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Separate hero into its own file

Browse source
This commit is contained in:
Jake Howard 2022-06-17 15:58:23 +01:00
parent 42b58eda6d
commit a5abb51538
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 42 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
website/common/models.py
View file

@ -8,6 +8,8 @@ from wagtail.models import Page
class BasePage(Page):
show_in_menus_default = True
HERO_IMAGE_SIZE = "width-1200"
class Meta:
abstract = True

40
website/common/templates/common/content_page.html
View file

@ -1,47 +1,11 @@
{% extends "wagtail_base.html" %}
{% load wagtailimages_tags %}
{% block content %}
{% if page.hero_image %}
<img class="hero" src="{% image_url page.hero_image 'width-1200' %}">
{% endif %}
<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>
</div>
<button class="button is-radiusless">Top</button>
</div>
</div>
</div>
</section>
{% include "common/hero.html" %}
<div class="container content">
{% lorem 10 p %}
</div>
{% endblock content %}

38
website/common/templates/common/hero.html Normal file
View file

@ -0,0 +1,38 @@
{% load wagtailimages_tags %}
{% if page.hero_image %}
<img class="hero" src="{% image_url page.hero_image page.HERO_IMAGE_SIZE %}">
{% endif %}
<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>
</div>
<button class="button is-radiusless">Top</button>
</div>
</div>
</div>
</section>