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

Add custom buttons to hero

Browse source
This commit is contained in:
Jake Howard 2022-08-17 13:40:07 +01:00
parent 0fa1d1c8be
commit f554c9fb48
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 28 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/src/scss/base.scss
View file

@ -32,7 +32,7 @@ a {
transition: color 0.25s, background-color 0.25s; transition: color 0.25s, background-color 0.25s;
@include dark-mode { @include dark-mode {
&:hover { &:not(.button):hover {
color: $grey-lighter; color: $grey-lighter;
} }
} }

5
website/blog/templates/blog/blog_list_page.html
View file

@ -6,6 +6,11 @@
<link rel="alternate" type="application/rss+xml" href="{% routablepageurl page 'feed' %}"> <link rel="alternate" type="application/rss+xml" href="{% routablepageurl page 'feed' %}">
{% endblock %} {% endblock %}
{% block hero_buttons %}
<a class="button is-radiusless" href="{% routablepageurl page 'feed' %}" title="View feed"><i class="fas fa-rss" aria-hidden="true"></i></a>
{{ block.super }}
{% endblock %}
{% block post_content %} {% block post_content %}
<section class="container"> <section class="container">
{% for page in child_pages %} {% for page in child_pages %}

42
website/common/templates/wagtail_base.html
View file

@ -23,29 +23,31 @@
{% include "common/content-details.html" %} {% include "common/content-details.html" %}
</div> </div>
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped"> <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
{% if page.table_of_contents %} {% block hero_buttons %}
<div class="dropdown is-hoverable is-right" id="table-of-contents"> {% if page.table_of_contents %}
<div class="dropdown-trigger"> <div class="dropdown is-hoverable is-right" id="table-of-contents">
<button class="button is-radiusless" aria-haspopup="true" aria-controls="toc-menu"> <div class="dropdown-trigger">
<span>Table of Contents</span> <button class="button is-radiusless" aria-haspopup="true" aria-controls="toc-menu">
<span class="icon is-small"> <span>Table of Contents</span>
<i class="fas fa-angle-down" aria-hidden="true"></i> <span class="icon is-small">
</span> <i class="fas fa-angle-down" aria-hidden="true"></i>
</button> </span>
</div> </button>
<div class="dropdown-menu" id="toc-menu" role="menu"> </div>
<div class="dropdown-content menu"> <div class="dropdown-menu" id="toc-menu" role="menu">
<ul class="menu-list"> <div class="dropdown-content menu">
{% for toc_item in page.table_of_contents %} <ul class="menu-list">
{% include "common/toc-item.html" %} {% for toc_item in page.table_of_contents %}
{% endfor %} {% include "common/toc-item.html" %}
</ul> {% endfor %}
</ul>
</div>
</div> </div>
</div> </div>
</div> {% endif %}
{% endif %}
<button class="button is-radiusless scroll-top">Top <i class="fas fa-angle-up ml-2" aria-hidden="true"></i></button> <button class="button is-radiusless scroll-top">Top <i class="fas fa-angle-up ml-2" aria-hidden="true"></i></button>
{% endblock %}
</div> </div>
</div> </div>
</div> </div>