update tour text

- new classname for posting guide - various improvements to wording - use function to find responsive menu elements - add scrollTo transitions where needed
2024-06-08 16:29:24 +00:00 · 2022-07-17 16:13:12 +10:00 · 2022-07-17 16:13:12 +10:00 · 387f2a70c9
parent 43c598d92c
commit 387f2a70c9
8 changed files with 182 additions and 23 deletions
--- 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 <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",
-            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() {
--- 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!<p class=\'notification is-warning is-light mt-3\'>Select <strong>Direct Messages</strong> from the drop down menu to finish the tour.</p>' %}",
-        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' %}",
            },
-        ],
+            ],
    }
    ])

--- 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 <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",
-            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.<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: [
--- 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 <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",
--- 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!<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',
--- 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 <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",
--- 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",
--- 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 %}
-<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 %}"