Separate hero into its own file
This commit is contained in:
parent
42b58eda6d
commit
a5abb51538
3 changed files with 42 additions and 38 deletions
|
@ -8,6 +8,8 @@ from wagtail.models import Page
|
||||||
class BasePage(Page):
|
class BasePage(Page):
|
||||||
show_in_menus_default = True
|
show_in_menus_default = True
|
||||||
|
|
||||||
|
HERO_IMAGE_SIZE = "width-1200"
|
||||||
|
|
||||||
class Meta:
|
class Meta:
|
||||||
abstract = True
|
abstract = True
|
||||||
|
|
||||||
|
|
|
@ -1,47 +1,11 @@
|
||||||
{% extends "wagtail_base.html" %}
|
{% extends "wagtail_base.html" %}
|
||||||
|
|
||||||
{% load wagtailimages_tags %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% if page.hero_image %}
|
|
||||||
<img class="hero" src="{% image_url page.hero_image 'width-1200' %}">
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<section class="hero container">
|
{% include "common/hero.html" %}
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="container content">
|
<div class="container content">
|
||||||
{% lorem 10 p %}
|
{% lorem 10 p %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
38
website/common/templates/common/hero.html
Normal file
38
website/common/templates/common/hero.html
Normal 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>
|
Loading…
Reference in a new issue