From 387f2a70c945707938a814642ba18acb48cc613e Mon Sep 17 00:00:00 2001 From: Hugh Rundle Date: Sun, 17 Jul 2022 16:13:12 +1000 Subject: [PATCH] update tour text - new classname for posting guide - various improvements to wording - use function to find responsive menu elements - add scrollTo transitions where needed --- bookwyrm/templates/guided_tour/book.html | 160 +++++++++++++++++- bookwyrm/templates/guided_tour/group.html | 14 +- bookwyrm/templates/guided_tour/home.html | 16 +- bookwyrm/templates/guided_tour/lists.html | 2 +- .../templates/guided_tour/user_books.html | 7 +- .../templates/guided_tour/user_groups.html | 2 +- .../templates/guided_tour/user_profile.html | 2 +- .../templates/snippets/create_status.html | 2 +- 8 files changed, 182 insertions(+), 23 deletions(-) diff --git a/bookwyrm/templates/guided_tour/book.html b/bookwyrm/templates/guided_tour/book.html index 1a89b2b7e..f2f2718f6 100644 --- a/bookwyrm/templates/guided_tour/book.html +++ b/bookwyrm/templates/guided_tour/book.html @@ -98,6 +98,153 @@ }, ], }, + { + text: "{% trans 'You can post a review, comment, or quote here.' %}", + title: "{% trans 'Share your thoughts' %}", + attachTo: { + element: ".tour-review-comment-quote", + on: "top", + }, + highlightClass: 'tour-element-highlight', + scrollTo: true, + buttons: [ + { + action() { + return this.back(); + }, + secondary: true, + text: "{% trans 'Back' %}", + }, + { + action() { + return this.next(); + }, + text: "{% trans 'Next' %}", + }, + ], + }, + { + text: "{% trans 'If you have read this book you can post a review including an optional star rating' %}", + title: "{% trans 'Post a review' %}", + attachTo: { + element: "[id^=tab_review]", + on: "top", + }, + highlightClass: 'tour-element-highlight', + buttons: [ + { + action() { + return this.back(); + }, + secondary: true, + text: "{% trans 'Back' %}", + }, + { + action() { + return this.next(); + }, + text: "{% trans 'Next' %}", + }, + ], + }, + { + text: "{% trans 'You can share your thoughts on this book generally with a simple comment' %}", + title: "{% trans 'Post a comment' %}", + attachTo: { + element: "[id^=tab_comment]", + on: "top", + }, + highlightClass: 'tour-element-highlight', + buttons: [ + { + action() { + return this.back(); + }, + secondary: true, + text: "{% trans 'Back' %}", + }, + { + action() { + return this.next(); + }, + text: "{% trans 'Next' %}", + }, + ], + }, + { + text: "{% trans 'Just read some perfect prose? Let the world know by sharing a quote!' %}", + title: "{% trans 'Share a quote' %}", + attachTo: { + element: "[id^=tab_quote]", + on: "top", + }, + highlightClass: 'tour-element-highlight', + buttons: [ + { + action() { + return this.back(); + }, + secondary: true, + text: "{% trans 'Back' %}", + }, + { + action() { + return this.next(); + }, + text: "{% trans 'Next' %}", + }, + ], + }, + { + text: "{% trans 'If your review or comment might ruin the book for someone who hasn\'t read it yet, you can hide your post behind a spoiler alert' %}", + title: "{% trans 'Spoiler alerts' %}", + attachTo: { + element: "", + element: "[id^=form_review] > .tour-spoiler-alert", + on: "top", + }, + highlightClass: 'tour-element-highlight', + buttons: [ + { + action() { + return this.back(); + }, + secondary: true, + text: "{% trans 'Back' %}", + }, + { + action() { + return this.next(); + }, + text: "{% trans 'Next' %}", + }, + ], + }, + { + text: "{% trans 'Choose who can see your post here. Post privacy can be Public (everyone can see), Unlisted (everyone can see, but it doesn\'t appear in public feeds or discovery pages), Followers (only your followers can see), or Private (only you can see)' %}", + title: "{% trans 'Post privacy' %}", + attachTo: { + // TODO: + element: "[id^=form_review] [id^=privacy_]", + on: "left", + }, + scrollTo: true, + buttons: [ + { + action() { + return this.back(); + }, + secondary: true, + text: "{% trans 'Back' %}", + }, + { + action() { + return this.next(); + }, + text: "{% trans 'Next' %}", + }, + ], + }, { text: "{% trans 'Some ebooks can be downloaded for free from external sources. They will be shown here.' %}", title: "{% trans 'Download links' %}", @@ -106,6 +253,7 @@ on: "left", }, highlightClass: 'tour-element-highlight', + scrollTo: true, buttons: [ { action() { @@ -126,9 +274,15 @@ text: "{% trans '

Continue the tour by selecting Your books from the drop down menu.

' %}", title: "{% trans 'Next' %}", attachTo: { - element: "#navbar-dropdown", - on: "left-end", - }, + element: () => { + let menu = document.querySelector('#navbar-dropdown') + let display = window.getComputedStyle(menu).display; + console.log(display) + return display == 'flex' ? '#navbar-dropdown' : '.navbar-burger'; + }, + on: "left-end", + }, + scrollTo: true, buttons: [ { action() { diff --git a/bookwyrm/templates/guided_tour/group.html b/bookwyrm/templates/guided_tour/group.html index 8187b3109..58f627b06 100644 --- a/bookwyrm/templates/guided_tour/group.html +++ b/bookwyrm/templates/guided_tour/group.html @@ -97,13 +97,8 @@ ], }, { - text: "{% trans 'You\'re nearly done with the tour!

Select Direct Messages from the drop down menu to finish the tour.

' %}", - title: "{% trans 'Next: Sending Messages' %}", - attachTo: { - element: "#navbar-dropdown", - on: "left-end", - }, - scrollTo: true, + text: "{% trans 'Congratulations, you\'ve finished the tour! Now you know the basics, but there is lots more to explore on your own. Happy reading!' %}", + title: "{% trans 'Finish' %}", buttons: [ { action() { @@ -114,11 +109,12 @@ }, { action() { + disableGuidedTour(csrf_token); return this.next(); }, - text: "{% trans 'Ok' %}", + text: "{% trans 'End tour' %}", }, - ], + ], } ]) diff --git a/bookwyrm/templates/guided_tour/home.html b/bookwyrm/templates/guided_tour/home.html index 901ad87ed..fb7fe3550 100644 --- a/bookwyrm/templates/guided_tour/home.html +++ b/bookwyrm/templates/guided_tour/home.html @@ -70,7 +70,7 @@ homeTour.addSteps([ ], }, { - text: "{% trans 'Search book records by scanning an ISBN barcode using your camera.' %}", + text: "{% trans 'Search book records by scanning an ISBN barcode using your device\'s camera - great when you\'re in the bookstore or library!' %}", title: "{% trans 'Barcode reader' %}", attachTo: { element: "#tour-barcode", @@ -93,11 +93,15 @@ homeTour.addSteps([ ], }, { - text: "{% trans 'Use these links to discover the latest news from your feed, lists of books by topic, and the latest happenings on this Bookwyrm server!' %}", + text: "{% trans 'Use the Feed, Lists and Discover links to discover the latest news from your feed, lists of books by topic, and the latest happenings on this Bookwyrm server!' %}", title: "{% trans 'Navigation Bar' %}", attachTo: { - element: "#tour-navbar-start", - on: "bottom", + element: () => { + let menu = document.querySelector('#tour-navbar-start') + let display = window.getComputedStyle(menu).display; + return display == 'flex' ? '#tour-navbar-start' : '.navbar-burger'; + }, + on: "left", }, highlightClass: 'tour-element-highlight', buttons: [ @@ -141,7 +145,7 @@ homeTour.addSteps([ ], }, { - text: "{% trans 'Updates from people you are following will appear on your timeline here.

The Books tab shows just the updates about reading activity.' %}", + text: "{% trans 'Updates from people you are following will appear in your Home timeline.

The Books tab shows activity from anyone, related to your books.' %}", title: "{% trans 'Timelines' %}", attachTo: { element: "#feed", @@ -191,7 +195,7 @@ homeTour.addSteps([ text: "{% trans 'Your profile, books, direct messages, and settings can be accessed by clicking on your name here.

Try selecting Profile from the drop down menu to continue the tour.

' %}", title: "{% trans 'Profile and settings menu' %}", attachTo: { - element: "#navbar-dropdown", + element: "#navbar-dropdown, .navbar-burger", on: "left-end", }, buttons: [ diff --git a/bookwyrm/templates/guided_tour/lists.html b/bookwyrm/templates/guided_tour/lists.html index 03245d99b..60a61218b 100644 --- a/bookwyrm/templates/guided_tour/lists.html +++ b/bookwyrm/templates/guided_tour/lists.html @@ -78,7 +78,7 @@ ], }, { - text: "{% trans 'Choose who can see your list here. List privacy can be Public (everyone can see), Unlisted (everyone can see, but it doesn\'t appear on the list discovery page), Followers (only your followers can see), or Private (only you can see)' %}", + text: "{% trans 'Choose who can see your list here. List privacy options work just like we saw when posting book reviews. This is a common pattern throughout Bookwyrm.' %}", title: "{% trans 'List privacy' %}", attachTo: { element: "#tour-privacy-select", diff --git a/bookwyrm/templates/guided_tour/user_books.html b/bookwyrm/templates/guided_tour/user_books.html index 846271fda..ccd262e18 100644 --- a/bookwyrm/templates/guided_tour/user_books.html +++ b/bookwyrm/templates/guided_tour/user_books.html @@ -101,7 +101,12 @@ text: "{% trans 'Now that we\'ve explored book shelves, let\'s take a look at a related concept: book lists!

Click on the Lists link here to continue the tour.' %}", title: "{% trans 'Lists' %}", attachTo: { - element: "#tour-navbar-start", + element: () => { + let menu = document.querySelector('#tour-navbar-start') + let display = window.getComputedStyle(menu).display; + console.log(display); + return display == 'flex' ? '#tour-navbar-start' : '.navbar-burger'; + }, on: "right", }, highlightClass: 'tour-element-highlight', diff --git a/bookwyrm/templates/guided_tour/user_groups.html b/bookwyrm/templates/guided_tour/user_groups.html index 6f5d4449b..2f826978b 100644 --- a/bookwyrm/templates/guided_tour/user_groups.html +++ b/bookwyrm/templates/guided_tour/user_groups.html @@ -75,7 +75,7 @@ ], }, { - text: "{% trans 'Groups have privacy settings just like Lists, except that group privacy cannot be Followers.' %}", + text: "{% trans 'Groups have privacy settings just like posts and lists, except that group privacy cannot be Followers.' %}", title: "{% trans 'Group visibility' %}", attachTo: { element: "#tour-privacy", diff --git a/bookwyrm/templates/guided_tour/user_profile.html b/bookwyrm/templates/guided_tour/user_profile.html index 74a63adc9..7c08233dd 100644 --- a/bookwyrm/templates/guided_tour/user_profile.html +++ b/bookwyrm/templates/guided_tour/user_profile.html @@ -97,7 +97,7 @@ tour.addSteps([ ], }, { - text: "{% trans 'The Books tab shows your book shelves. We\'ll explore this next.' %}", + text: "{% trans 'The Books tab shows your book shelves. We\'ll explore this later in the tour.' %}", title: "{% trans 'Books' %}", attachTo: { element: "#tour-shelves-tab", diff --git a/bookwyrm/templates/snippets/create_status.html b/bookwyrm/templates/snippets/create_status.html index ff48d12cc..1b15ccffe 100644 --- a/bookwyrm/templates/snippets/create_status.html +++ b/bookwyrm/templates/snippets/create_status.html @@ -3,7 +3,7 @@ {% load utilities %} {% with status_type=request.GET.status_type %} -

+