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

@@ -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 <strong>spoiler alert</strong>' %}",
+            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 <strong>Public</strong> (everyone can see), <strong>Unlisted</strong> (everyone can see, but it doesn\'t appear in public feeds or discovery pages), <strong>Followers</strong> (only your followers can see), or <strong>Private</strong> (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 '<p class=\'notification is-warning is-light mt-3\'> Continue the tour by selecting <strong>Your books</strong> from the drop down menu.</p>' %}",
             title: "{% trans 'Next' %}",
             attachTo: {
-            element: "#navbar-dropdown",
+                element: () => {
-            on: "left-end",
+                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() {

bookwyrm/templates/guided_tour/group.html

@@ -97,13 +97,8 @@
             ],
         },
         {
-        text: "{% trans 'You\'re nearly done with the tour!<p class=\'notification is-warning is-light mt-3\'>Select <strong>Direct Messages</strong> from the drop down menu to finish the tour.</p>' %}",
+        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 'Next: Sending Messages' %}",
+        title: "{% trans 'Finish' %}",
-        attachTo: {
-            element: "#navbar-dropdown",
-            on: "left-end",
-        },
-        scrollTo: true,
         buttons: [
             {
                 action() {
@@ -114,11 +109,12 @@
             },
             {
                 action() {
+                    disableGuidedTour(csrf_token);
                     return this.next();
                 },
-                text: "{% trans 'Ok' %}",
+                text: "{% trans 'End tour' %}",
             },
-        ],
+            ],
     }
     ])
 

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 <strong>Feed</strong>, <strong>Lists</strong> and <strong>Discover</strong> 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",
+            element: () => {
-            on: "bottom",
+                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.<br><br>The <strong>Books</strong> tab shows just the updates about reading activity.' %}",
+        text: "{% trans 'Updates from people you are following will appear in your <strong>Home</strong> timeline.<br><br>The <strong>Books</strong> 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.<p class=\'notification is-warning is-light mt-3\'>Try selecting <strong>Profile</strong> from the drop down menu to continue the tour.</p>' %}",
         title: "{% trans 'Profile and settings menu' %}",
         attachTo: {
-            element: "#navbar-dropdown",
+            element: "#navbar-dropdown, .navbar-burger",
             on: "left-end",
         },
         buttons: [

bookwyrm/templates/guided_tour/lists.html

@@ -78,7 +78,7 @@
             ],
         },
         {
-            text: "{% trans 'Choose who can see your list here. List privacy can be <strong>Public</strong> (everyone can see), <strong>Unlisted</strong> (everyone can see, but it doesn\'t appear on the list discovery page), <strong>Followers</strong> (only your followers can see), or <strong>Private</strong> (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",

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!<p class=\'notification is-warning is-light mt-3\'>Click on the <strong>Lists</strong> 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',

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 <strong>Followers</strong>.' %}",
+            text: "{% trans 'Groups have privacy settings just like posts and lists, except that group privacy cannot be <strong>Followers</strong>.' %}",
             title: "{% trans 'Group visibility' %}",
             attachTo: {
                 element: "#tour-privacy",

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",

bookwyrm/templates/snippets/create_status.html

@@ -3,7 +3,7 @@
 {% load utilities %}
 
 {% with status_type=request.GET.status_type %}
-<div class="tab-group">
+<div class="tab-group tour-review-comment-quote">
     <div class="bw-tabs is-boxed" role="tablist">
         <a
             class="{% if status_type == 'review' or not status_type %}is-active{% endif %}"