update homepage tour

- add highlights to some elements
- consolidate message text for easier translation
- emphasise action with notification style
This commit is contained in:
Hugh Rundle 2022-07-09 15:00:30 +10:00
parent b36968166e
commit 5472cdcad7

View file

@ -7,9 +7,7 @@ const initiateTour = new Shepherd.Tour({
initiateTour.addSteps([ initiateTour.addSteps([
{ {
text: "{% trans 'Welcome to Bookwyrm!' %} \ text: "{% trans 'Welcome to Bookwyrm!<br><br>Would you like to take the guided tour to help you get started?' %}",
<br><br> \
{% trans 'Would you like to take the guided tour to help you get started?' %}",
title: "{% trans 'Guided Tour' %}", title: "{% trans 'Guided Tour' %}",
buttons: [ buttons: [
{ {
@ -61,6 +59,7 @@ homeTour.addSteps([
element: "#tour-search", element: "#tour-search",
on: "bottom", on: "bottom",
}, },
highlightClass: 'tour-element-highlight',
buttons: [ buttons: [
{ {
action() { action() {
@ -100,6 +99,7 @@ homeTour.addSteps([
element: "#tour-navbar-start", element: "#tour-navbar-start",
on: "bottom", on: "bottom",
}, },
highlightClass: 'tour-element-highlight',
buttons: [ buttons: [
{ {
action() { action() {
@ -123,6 +123,7 @@ homeTour.addSteps([
element: "#tour-suggested-books", element: "#tour-suggested-books",
on: "right", on: "right",
}, },
highlightClass: 'tour-element-highlight',
buttons: [ buttons: [
{ {
action() { action() {
@ -163,9 +164,7 @@ homeTour.addSteps([
], ],
}, },
{ {
text: "{% trans 'Your profile, books, direct messages, and settings can be accessed by clicking on your name here.' %}\ text: "{% trans 'Your profile, books, direct messages, and settings can be accessed by clicking on your name here.<p class=\'notification is-warning is-light\'>Try selecting <strong>Profile</strong> from the drop down menu to continue the tour.</p>' %}",
<br><br>\
{% trans 'Try selecting <code>Profile</code> from the drop down menu to continue the tour.' %}",
title: "{% trans 'Profile and settings menu' %}", title: "{% trans 'Profile and settings menu' %}",
attachTo: { attachTo: {
element: "#navbar-dropdown", element: "#navbar-dropdown",