Uses card component for reading goal announcement

This commit is contained in:
Mouse Reeve 2021-01-16 14:48:17 -08:00
parent de9fbcef80
commit 6ab543004e
2 changed files with 24 additions and 18 deletions

View file

@ -98,24 +98,7 @@
{% if not goal and tab == 'home' %}
{% now 'Y' as year %}
<section class="block hidden" aria-title="Announcements" data-hide="hide-{{ year }}-reading-goal">
<article class="card">
<header class="card-header">
<h3 class="card-header-title has-background-primary has-text-white">
<span class="icon icon-book is-size-3 mr-2" aria-hidden="true"></span> {{ year }} reading goal
</h3>
</header>
<section class="card-content content">
<p>Set a goal for how many books you'll finish reading in {{ year }}, and track your progress throughout the year.</p>
{% include 'snippets/goal_form.html' %}
</section>
<footer class="card-footer has-background-white-bis">
<div class="card-footer-item is-flex-direction-column">
<button class="button is-danger is-light is-block set-display" data-id="hide-{{ year }}-reading-goal" data-value="true">Dismiss message</button>
<p class="help">You can set or change your reading goal any time from your <a href="{{ request.user.local_path }}">profile page</a></p>
</div>
</footer>
</article>
{% include 'snippets/goal_card.html' with year=year %}
<hr>
</section>
{% endif %}

View file

@ -0,0 +1,23 @@
{% extends 'snippets/components/card.html' %}
{% block card-header %}
<h3 class="card-header-title has-background-primary has-text-white">
<span class="icon icon-book is-size-3 mr-2" aria-hidden="true"></span> {{ year }} reading goal
</h3>
{% endblock %}
{% block card-content %}
<div class="content">
<p>Set a goal for how many books you'll finish reading in {{ year }}, and track your progress throughout the year.</p>
{% include 'snippets/goal_form.html' %}
</div>
{% endblock %}
{% block card-footer %}
<div class="card-footer-item is-flex-direction-column">
<button class="button is-danger is-light is-block set-display" data-id="hide-{{ year }}-reading-goal" data-value="true">Dismiss message</button>
<p class="help">You can set or change your reading goal any time from your <a href="{{ request.user.local_path }}">profile page</a></p>
</div>
{% endblock %}