mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2025-01-02 13:28:43 +00:00
add guided tour to user profile
- adds ids to relevant elements to enable tour - adds guided tour using Shepherd
This commit is contained in:
Hugh Rundle
parent
83e7302bc1
commit
aebeac9112
2 changed files with 146 additions and 4 deletions
136
bookwyrm/templates/guided_tour/user_profile.html
Normal file
136
bookwyrm/templates/guided_tour/user_profile.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
{% load i18n %}
|
||||
|
||||
<script>
|
||||
const tour = new Shepherd.Tour({
|
||||
exitOnEsc: true,
|
||||
});
|
||||
|
||||
tour.addSteps([
|
||||
{
|
||||
text: "{% trans 'This is your user profile. All your latest activities will be listed here, as well as links to your reading goal, groups, lists, and shelves. Other Bookwyrm users can see this page too - though exactly what they can see depends on your settings.' %}",
|
||||
title: "{% trans 'User Profile' %}",
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.cancel();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Cancel' %}",
|
||||
classes: "is-danger",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'This tab shows everything you have read towards your annual reading goal, or allows you to set one. You do not have to set a reading goal if that\'s not your thing!' %}",
|
||||
title: "{% trans 'Reading Goal' %}",
|
||||
attachTo: {
|
||||
element: "#reading_goal_tab",
|
||||
on: "right",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'The Books tab shows your books, on various shelves.' %}",
|
||||
title: "{% trans 'Books' %}",
|
||||
attachTo: {
|
||||
element: "#shelves_tab",
|
||||
on: "right",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'Here you can see your lists, or create a new one. A list is a collection of books that have something in common.' %}",
|
||||
title: "{% trans 'Lists' %}",
|
||||
attachTo: {
|
||||
element: "#lists_tab",
|
||||
on: "right",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'Here you can see your groups, or create a new one. A group brings together Bookwyrm users and allows them to curate lists together.' %}",
|
||||
title: "{% trans 'Groups' %}",
|
||||
attachTo: {
|
||||
element: "#groups_tab",
|
||||
on: "right",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'Now that you have seen the basics of your profile page, we\'re going to explore some of these concepts. Start by clicking on' %}<code>{% trans 'Groups' %}</code>.",
|
||||
title: "{% trans 'Groups' %}",
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.complete();
|
||||
},
|
||||
text: "{% trans 'Ok' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
|
||||
tour.start()
|
||||
</script>
|
||||
|
|
@ -69,25 +69,25 @@
|
|||
{% if is_self or user.goal.exists %}
|
||||
{% now 'Y' as year %}
|
||||
{% url 'user-goal' user|username year as url %}
|
||||
<li{% if url in request.path %} class="is-active"{% endif %}>
|
||||
<li{% if url in request.path %} class="is-active"{% endif %} id="reading_goal_tab">
|
||||
<a href="{{ url }}">{% trans "Reading Goal" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if is_self or user|has_groups %}
|
||||
{% url 'user-groups' user|username as url %}
|
||||
<li{% if url in request.path %} class="is-active"{% endif %}>
|
||||
<li{% if url in request.path %} class="is-active"{% endif %} id="groups_tab">
|
||||
<a href="{{ url }}">{% trans "Groups" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if is_self or user.list_set.exists %}
|
||||
{% url 'user-lists' user|username as url %}
|
||||
<li{% if url in request.path %} class="is-active"{% endif %}>
|
||||
<li{% if url in request.path %} class="is-active"{% endif %} id="lists_tab">
|
||||
<a href="{{ url }}">{% trans "Lists" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if user.shelf_set.exists %}
|
||||
{% url 'user-shelves' user|username as url %}
|
||||
<li{% if url in request.path %} class="is-active"{% endif %}>
|
||||
<li{% if url in request.path %} class="is-active"{% endif %} id="shelves_tab">
|
||||
<a href="{{ url }}">{% trans "Books" %}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
|
@ -99,3 +99,9 @@
|
|||
{% block panel %}{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{% if user.show_guided_tour %}
|
||||
{% include 'guided_tour/user_profile.html' %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue