Fix order of tour

The tour now shows users how to add a book first, then bookshelves, lists, and finally groups.
This commit is contained in:
Hugh Rundle 2022-07-03 14:48:23 +10:00
parent 06b4a55979
commit a8940b8e12
8 changed files with 180 additions and 105 deletions

View file

@ -7,7 +7,7 @@
tour.addSteps([
{
text: "{% trans 'This is home page of a book. Let\s see what you can do while you are here!' %}",
text: "{% trans 'This is home page of a book. Let\s see what you can do while you\'re here!' %}",
title: "{% trans 'Book page' %}",
buttons: [
{
@ -50,6 +50,37 @@
},
],
},
{
text: "{% trans 'You can also manually add reading dates here. Unlike changing the reading status using the previous method, adding read-through dates manually will not automatically add them to your ' %}\
<code>\
{% trans 'Read' %}\
</code>\
{% trans ' or '%}\
<code>\
{% trans 'Reading' %}\
</code>\
{% trans ' shelves. Got a favourite you re-read every year? We\'ve got you covered - you can add multiple read dates for the same book 😀' %}",
title: "{% trans 'Add readthrough dates' %}",
attachTo: {
element: "button[data-modal-open='add-readthrough']",
on: "top",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'There can be multiple editions of a book, in various formats or languages. You may wish to view a different edition (for example if you are setting a reading status). ' %}",
title: "{% trans 'Other editions' %}",
@ -96,37 +127,6 @@
},
],
},
{
text: "{% trans 'If you have already read this book you can add your reading dates here. Note that adding read-through dates manually will not automatically add them to your ' %}\
<code>\
{% trans 'Read' %}\
</code>\
{% trans ' or '%}\
<code>\
{% trans 'Reading' %}\
</code>\
{% trans ' shelves.'%}",
title: "{% trans 'Add readthrough dates' %}",
attachTo: {
element: "button[data-modal-open='add-readthrough']",
on: "top",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Next' %}",
},
],
},
{
text: "{% trans 'Let\'s continue the tour by selecting \'Your Books\' from the drop down menu.' %}",
title: "{% trans 'Next' %}",

View file

@ -7,7 +7,7 @@
tour.addSteps([
{
text: "{% trans 'This is the home page of your new group! This is where you can add and remove users, create user-curated lists, and edit the group details.' %}",
text: "{% trans 'Welcome to the page for your group! This is where you can add and remove users, create user-curated lists, and edit the group details.' %}",
title: "{% trans 'Your group' %}",
buttons: [
{
@ -74,9 +74,7 @@
],
},
{
text: "{% trans 'Groups can have group-curated lists. We haven\'t discussed lists yet, so now let\s fix that.' %}\
<br><br>\
{% trans 'Click on the button to create a list.' %}",
text: "{% trans 'We saw on the Lists page how you can create a group-curated list. You can also create a list here on the group\'s homepage. Any member of the group can create a list curated by group members.' %}",
title: "{% trans 'Group lists' %}",
attachTo: {
element: "#create_group_list_button",
@ -99,14 +97,22 @@
],
},
{
text: "{% trans 'todo' %}",
title: "{% trans 'TODO' %}",
text: "{% trans 'Thanks for taking the tour. There\'s lots more to explore, but now you are familiar with the basics needed to enjoy Bookwyrm. Happy reading!' %}",
title: "{% trans 'You\'re ready!' %}",
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
disableGuidedTour(csrf_token);
return this.complete();
},
text: "{% trans 'Ok' %}",
text: "{% trans 'Finish tour' %}",
},
],
},

View file

@ -163,7 +163,9 @@ homeTour.addSteps([
],
},
{
text: "{% trans 'Your profile, books, direct messages, and settings can be accessed by clicking on your name here.<br><br>Try selecting <code>Profile</code> from the drop down menu to continue the tour.' %}",
text: "{% trans 'Your profile, books, direct messages, and settings can be accessed by clicking on your name here.' %}\
<br><br>\
{% trans 'Try selecting <code>Profile</code> from the drop down menu to continue the tour.' %}",
title: "{% trans 'Profile and settings menu' %}",
attachTo: {
element: "#navbar-dropdown",

View file

@ -1,6 +1,9 @@
{% load i18n %}
<script>
let existingGroup = document.querySelector("#group");
const tour = new Shepherd.Tour({
exitOnEsc: true,
});
@ -116,7 +119,9 @@
],
},
{
text: "{% trans 'You can also decide how your list is to be curated - only by you, by anyone, or by a group. Select ' %}\
text: "{% trans 'You can also decide how your list is to be curated - only by you, by anyone, or by a group.' %}\
<br/><br/>\
{% trans 'Select ' %}\
<strong>\
{% trans 'Group' %}\
</strong>\
@ -145,8 +150,39 @@
},
],
},
{
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 ' %}\
])
if (existingGroup) {
tour.addStep({
text: "{% trans 'It looks like you already know how to create a group. Go to your group page from the ' %}\
<code>\
{% trans 'Groups' %}\
</code>\
{% trans ' tab on your profile page to complete the tour.' %}",
title: "{% trans 'Groups' %}",
attachTo: {
element: "#group",
on: "left",
},
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
this.complete();
},
text: "{% trans 'Ok' %}"
},
]
})
} else {
tour.addStep({
text: "{% trans 'You need to be a member of a group before you can create a group-curated list. Let\'s take a look at groups now! Click on ' %}\
<strong>\
{% trans 'Create a Group' %}\
</strong>\
@ -168,12 +204,11 @@
action() {
this.complete();
},
text: "{% trans 'Ok' %}",
classes: "is-success",
text: "{% trans 'Ok' %}"
},
]
}
])
})
}
tour.start()
</script>

View file

@ -123,7 +123,7 @@
],
},
{
text: "{% trans 'If you still cannot find your book, you can add a record manually.' %}",
text: "{% trans 'If you still can\'t find your book, you can add a record manually.' %}",
title: "{% trans 'Add a record manally' %}",
attachTo: {
element: "#manually-add-book",
@ -147,5 +147,25 @@
}])
}
tour.addStep({
text: "{% trans 'Import, manually add, or view an existing book to continue the tour.' %}",
title: "{% trans 'Continue the tour' %}",
buttons: [
{
action() {
return this.back();
},
secondary: true,
text: "{% trans 'Back' %}",
},
{
action() {
return this.next();
},
text: "{% trans 'Ok' %}",
},
],
})
tour.start()
</script>

View file

@ -33,7 +33,11 @@
<code>{% trans 'Read' %}</code>,\
{% trans ' and ' %}\
<code>{% trans 'Stopped Reading' %}</code> \
{% trans 'are default shelves that are used to indicate the reading status of books. A book can only be assigned to one of these shelves at any given moment e.g. a book is not allowed to be on both the Currently Reading and the To Read shelves. Usually Bookwyrm will automatically allocate a book to one of these shelves when you change the reading status of the book.' %}\
{% trans 'are default shelves used to indicate the current reading status of books. A book can only be assigned to one of these shelves at any given moment e.g. a book is not allowed to be on both the ' %}\
<code>{% trans 'Currently Reading' %}</code>, \
{% trans ' and the ' %}\
<code>{% trans 'To Read' %}</code>, \
{% trans ' shelves. When you change the reading status of a book it will automatically be moved to the matching shelf.' %}\
",
title: "{% trans 'Creating a group' %}",
attachTo: {
@ -103,11 +107,15 @@
],
},
{
text: "{% trans 'Now that we have explored your shelves, let\'s take a look at a related concept: book lists!' %}",
text: "{% trans 'Now that we\'ve explored book shelves, let\'s take a look at a related concept: book lists! Click on the ' %}\
<code>\
{% trans 'Lists' %}\
</code>\
{% trans ' link here to continue the tour.' %}",
title: "{% trans 'Lists' %}",
attachTo: {
element: "[href='/list']",
on: "bottom",
on: "right",
},
buttons: [
{
@ -120,10 +128,8 @@
{
action() {
this.complete();
return window.location.href = '/list'
},
text: "{% trans 'I\'m ready!' %}",
classes: "is-success",
text: "{% trans 'Ok' %}"
},
]
}

View file

@ -106,7 +106,9 @@
],
},
{
text: "{% trans 'Once you\'re happy with how your group is set up, click the \'Save\' button.' %}",
text: "{% trans 'Once you\'re happy with how your group is set up, click the ' %}\
<code>{% trans 'Save' %}</code>\
{% trans ' button to continue the tour.' %}",
title: "{% trans 'Save your group' %}",
buttons: [
{

View file

@ -7,7 +7,7 @@ const tour = new Shepherd.Tour({
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.' %}",
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 parts of this page too - what they can see depends on your privacy settings.' %}",
title: "{% trans 'User Profile' %}",
buttons: [
{
@ -28,7 +28,7 @@ tour.addSteps([
],
},
{
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!' %}",
text: "{% trans 'This tab shows everything you have read towards your annual reading goal, or allows you to set one. You don\'t have to set a reading goal if that\'s not your thing!' %}",
title: "{% trans 'Reading Goal' %}",
attachTo: {
element: "#reading_goal_tab",
@ -50,52 +50,6 @@ tour.addSteps([
},
],
},
{
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' %}",
@ -120,8 +74,58 @@ tour.addSteps([
],
},
{
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' %}",
text: "{% trans 'You can see your lists, or create a new one, here. 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 'The Books tab shows your book shelves. We\'ll explore this next.' %}",
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 'Now you understand the basics of your profile page, let\s add a book to your shelves. Search for a title or author here to continue the tour.' %}",
title: "{% trans 'Find a book' %}",
attachTo: {
element: "#search_input",
on: "right",
},
buttons: [
{
action() {