mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-11-30 05:21:08 +00:00
add lists to guided tour
Takes user through the main /list page, as well as the options for creating a list.
This commit is contained in:
Hugh Rundle
parent
827a63b4eb
commit
06b4a55979
3 changed files with 189 additions and 4 deletions
179
bookwyrm/templates/guided_tour/lists.html
Normal file
179
bookwyrm/templates/guided_tour/lists.html
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
{% load i18n %}
|
||||
|
||||
<script>
|
||||
const tour = new Shepherd.Tour({
|
||||
exitOnEsc: true,
|
||||
});
|
||||
|
||||
tour.addSteps([
|
||||
{
|
||||
text: "{% trans 'This is the lists page where you can discover book lists created by any user. A List is a collection of books, similar to a shelf, but you can add any book to a list regardless of whether it is also on one of your shelves or whether you have read it.' %}",
|
||||
title: "{% trans 'Lists' %}",
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
disableGuidedTour(csrf_token);
|
||||
return this.complete();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'End Tour' %}",
|
||||
classes: "is-danger",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'Let\'s create a new list. Click this button, then ' %}\
|
||||
<code>\
|
||||
{% trans 'Next' %}\
|
||||
</code>",
|
||||
title: "{% trans 'Creating a new list' %}",
|
||||
attachTo: {
|
||||
element: "#create-list-button",
|
||||
on: "left",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'Give your list a name and can optionally give it a description to help other people understand what your list is about.' %}",
|
||||
title: "{% trans 'Creating a new list' %}",
|
||||
attachTo: {
|
||||
element: "[for='id_name']",
|
||||
on: "top",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'Choose who can see your list here. List privacy can be ' %}\
|
||||
<strong>\
|
||||
{% trans 'Public' %}\
|
||||
</strong>\
|
||||
{% trans ' (everyone can see), ' %}\
|
||||
<strong>\
|
||||
{% trans 'Unlisted' %}\
|
||||
</strong>\
|
||||
{% trans ' (everyone can see, but it doesn\'t appear on the list discovery page), ' %}\
|
||||
<strong>\
|
||||
{% trans 'Followers' %}\
|
||||
</strong>\
|
||||
{% trans ' (only your followers can see), or ' %}\
|
||||
<strong>\
|
||||
{% trans 'Private' %}\
|
||||
</strong>\
|
||||
{% trans ' (only you can see)' %}",
|
||||
title: "{% trans 'List privacy' %}",
|
||||
attachTo: {
|
||||
element: "#tour-privacy-select",
|
||||
on: "left",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'You can also decide how your list is to be curated - only by you, by anyone, or by a group. Select ' %}\
|
||||
<strong>\
|
||||
{% trans 'Group' %}\
|
||||
</strong>\
|
||||
{% trans ' and then ' %}\
|
||||
<code>\
|
||||
{% trans 'Next' %}\
|
||||
</code>",
|
||||
title: "{% trans 'List curation' %}",
|
||||
attachTo: {
|
||||
element: "#list-curation-legend",
|
||||
on: "left",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
return this.next();
|
||||
},
|
||||
text: "{% trans 'Next' %}",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "{% trans 'You need to be a member of a group before you can crtae a group-curated list. Let\'s take a look at groups now! Click on ' %}\
|
||||
<strong>\
|
||||
{% trans 'Create a Group' %}\
|
||||
</strong>\
|
||||
{% trans ' to continue the tour.' %}",
|
||||
title: "{% trans 'Groups' %}",
|
||||
attachTo: {
|
||||
element: "#tour-no-groups-yet",
|
||||
on: "left",
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
action() {
|
||||
return this.back();
|
||||
},
|
||||
secondary: true,
|
||||
text: "{% trans 'Back' %}",
|
||||
},
|
||||
{
|
||||
action() {
|
||||
this.complete();
|
||||
},
|
||||
text: "{% trans 'Ok' %}",
|
||||
classes: "is-success",
|
||||
},
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
tour.start()
|
||||
</script>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
<div class="column">
|
||||
<fieldset class="field">
|
||||
<legend class="label">{% trans "List curation:" %}</legend>
|
||||
<legend class="label" id="list-curation-legend">{% trans "List curation:" %}</legend>
|
||||
|
||||
<div class="field" data-hides="list_group_selector">
|
||||
<input
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
{% with user|username as username %}
|
||||
{% url 'user-groups' user|username as url %}
|
||||
<div>
|
||||
<p>{% trans "You don't have any Groups yet!" %}</p>
|
||||
<p id="tour-no-groups-yet">{% trans "You don't have any Groups yet!" %}</p>
|
||||
<p>
|
||||
<a class="help has-text-weight-normal" href="{{ url }}">{% trans "Create a Group" %}</a>
|
||||
</p>
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<div class="control" id="tour-privacy-select">
|
||||
{% include 'snippets/privacy_select.html' with current=list.privacy %}
|
||||
</div>
|
||||
<div class="control">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</h1>
|
||||
</div>
|
||||
{% if request.user.is_authenticated %}
|
||||
<div class="column is-narrow">
|
||||
<div class="column is-narrow" id="create-list-button">
|
||||
{% trans "Create List" as button_text %}
|
||||
{% include 'snippets/toggle/open_button.html' with controls_text="create_list" icon_with_text="plus" text=button_text focus="create_list_header" %}
|
||||
</div>
|
||||
|
|
@ -54,3 +54,9 @@
|
|||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{% if user.show_guided_tour %}
|
||||
{% include 'guided_tour/lists.html' %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue