standardise ids for tour anchors

To make it harder to accidentally mess up the tour when making changes to pages, this commit adds ids with 'tour' prefixes to (nearly) all elements used by the guided tour as anchor points. The exception is where an element already had an id that is being used by something else in Bookwyrm.

Some minor changes also made to clean up the wording of the tour.

bookwyrm/templates/book/book.html

@@ -210,7 +210,7 @@
 
                 {% with work=book.parent_work %}
                 <p>
-                    <a href="{{ work.local_path }}/editions" id="other-editions-link">
+                    <a href="{{ work.local_path }}/editions" id="tour-other-editions-link">
                         {% blocktrans trimmed count counter=work.editions.count with count=work.editions.count|intcomma %}
                             {{ count }} edition
                             {% plural %}
@@ -254,7 +254,7 @@
                     <h2 class="title is-5">{% trans "Your reading activity" %}</h2>
                     </div>
                     <div class="column is-narrow">
-                        <button class="button is-small" data-modal-open="add-readthrough">
+                        <button class="button is-small" data-modal-open="add-readthrough" id="tour-add-readthrough">
                             <span class="icon icon-plus m-mobile-0" aria-hidden="true"></span>
                             <span class="is-sr-only-mobile">
                                 {% trans "Add read dates" %}
@@ -392,7 +392,7 @@
             </section>
             {% endif %}
 
-            <section class="content block" id="book-file-links">
+            <section class="content block" id="tour-book-file-links">
                 {% include "book/file_links/links.html" %}
             </section>
         </div>

bookwyrm/templates/feed/suggested_books.html

@@ -2,7 +2,7 @@
 {% load feed_page_tags %}
 
 {% suggested_books as suggested_books %}
-<section id="suggested_books_block" class="block">
+<section id="tour-suggested-books" class="block">
     <h2 class="title is-4">{% trans "Your Books" %}</h2>
     {% if not suggested_books %}
 

bookwyrm/templates/groups/form.html

@@ -5,7 +5,7 @@
     <div class="column is-two-thirds">
         <input type="hidden" name="user" value="{{ request.user.id }}" />
         <div class="field">
-            <label class="label" for="group_form_id_name">{% trans "Group Name:" %}</label>
+            <label class="label" for="group_form_id_name" id="tour-group-name">{% trans "Group Name:" %}</label>
             {{ group_form.name }}
         </div>
         <div class="field">

bookwyrm/templates/groups/group.html

@@ -22,7 +22,7 @@
         </p>
     </div>
     {% if request.user.is_authenticated and group|is_member:request.user %}
-    <div class="column is-narrow is-flex" id="create_group_list_button">
+    <div class="column is-narrow is-flex" id="tour-create-list">
         {% trans "Create List" as button_text %}
         {% include 'snippets/toggle/open_button.html' with controls_text="create_list" icon_with_text="plus" text=button_text focus="create_list_header" %}
     </div>

bookwyrm/templates/groups/members.html

@@ -10,7 +10,7 @@
         <div class="control">
             <input type="text" name="user_query" value="{{ request.GET.user_query }}" class="input" placeholder="{% trans 'Search to add a user' %}" aria-label="{% trans 'Search to add a user' %}">
         </div>
-        <div class="control" id="group_member_search_button">
+        <div class="control" id="tour-group-member-search">
             <button class="button" type="submit">
                 <span class="icon icon-search" title="{% trans 'Search' %}">
                     <span class="is-sr-only">{% trans "Search" %}</span>
@@ -44,7 +44,7 @@
             <span title="@{{ member|username }}" class="is-block pb-3">@{{ member|username|truncatechars:8 }}</span>
         </a>
         {% if group.user == member %}
-        <span class="icon icon-star-full" title="Manager">
+        <span class="icon icon-star-full" title="Manager" id="tour-group-owner">
             <span class="is-sr-only">Manager</span>
         </span>
         {% endif %}

bookwyrm/templates/guided_tour/book.html

@@ -31,7 +31,7 @@
             text: "{% trans 'This is where you can set a reading status for this book. You can press the button to move to the next stage, or use the drop down button to select the reading status you want to set.' %}",
             title: "{% trans 'Reading status' %}",
             attachTo: {
-                element: "div[data-shelve-button-book]",
+                element: "#tour-shelve-button",
                 on: "right",
             },
             buttons: [
@@ -62,7 +62,7 @@
             {% 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']",
+                element: "#tour-add-readthrough",
                 on: "top",
             },
             buttons: [
@@ -82,10 +82,10 @@
             ],
         },
         {
-            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). ' %}",
+            text: "{% trans 'There can be multiple editions of a book, in various formats or languages. You can choose which edition you want to view or set a reading status for.' %}",
             title: "{% trans 'Other editions' %}",
             attachTo: {
-                element: "#other-editions-link",
+                element: "#tour-other-editions-link",
                 on: "top-start",
             },
             buttons: [
@@ -108,7 +108,7 @@
             text: "{% trans 'Some ebooks can be downloaded for free from external sources. They will be shown here.' %}",
             title: "{% trans 'Download links' %}",
             attachTo: {
-                element: "#book-file-links",
+                element: "#tour-book-file-links",
                 on: "left",
             },
             buttons: [
@@ -128,7 +128,11 @@
             ],
         },
         {
-            text: "{% trans 'Let\'s continue the tour by selecting \'Your Books\' from the drop down menu.' %}",
+            text: "{% trans 'Let\'s continue the tour by selecting ' %}\
+            <code>\
+            {% trans 'Your books' %}\
+            </code>\
+            {% trans ' from the drop down menu.' %}",
             title: "{% trans 'Next' %}",
             attachTo: {
                 element: "summary[aria-label='View profile and more']",

bookwyrm/templates/guided_tour/group.html

@@ -31,7 +31,7 @@
             text: "{% trans 'Use this search box to find users to join your group. Currently users must be invited by the group owner.' %}",
             title: "{% trans 'Find users' %}",
             attachTo: {
-                element: "#group_member_search_button",
+                element: "#tour-group-member-search",
                 on: "right",
             },
             buttons: [
@@ -54,7 +54,7 @@
             text: "{% trans 'Your group members will appear here. The group owner is marked with a star symbol.' %}",
             title: "{% trans 'Group members' %}",
             attachTo: {
-                element: '[title="Manager"]',
+                element: "#tour-group-owner",
                 on: "right",
             },
             buttons: [
@@ -77,7 +77,7 @@
             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",
+                element: "#tour-create-list",
                 on: "right",
             },
             buttons: [

bookwyrm/templates/guided_tour/home.html

@@ -34,7 +34,7 @@ initiateTour.addSteps([
         text: "{% trans 'If  you ever change your mind, just click on the Guided Tour link to start your tour' %}",
             title: "{% trans 'Guided Tour' %}",
             attachTo: {
-                element: "#tour_button",
+                element: "#tour-begin",
                 on: "left-start",
             },
             buttons: [
@@ -58,7 +58,7 @@ homeTour.addSteps([
         text: "{% trans 'Search for books, users, or lists using this search box.' %}",
         title: "{% trans 'Search box' %}",
         attachTo: {
-            element: "#search_input",
+            element: "#tour-search",
             on: "bottom",
         },
         buttons: [
@@ -74,7 +74,7 @@ homeTour.addSteps([
         text: "{% trans 'Search book records by scanning an ISBN barcode using your camera.' %}",
         title: "{% trans 'Barcode reader' %}",
         attachTo: {
-            element: ".icon-barcode",
+            element: "#tour-barcode",
             on: "bottom",
         },
         buttons: [
@@ -97,7 +97,7 @@ 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!' %}",
         title: "{% trans 'Navigation Bar' %}",
         attachTo: {
-            element: ".navbar-start",
+            element: "#tour-navbar-start",
             on: "bottom",
         },
         buttons: [
@@ -120,7 +120,7 @@ homeTour.addSteps([
         text: "{% trans 'Books on your reading status shelves will be shown here.' %}",
         title: "{% trans 'Your Books' %}",
         attachTo: {
-            element: "#suggested_books_block",
+            element: "#tour-suggested-books",
             on: "right",
         },
         buttons: [
@@ -143,7 +143,7 @@ homeTour.addSteps([
         text: "{% trans 'This bell will light up when you have a new notification. When it does, click on it to find out what exciting thing has happened!' %}",
         title: "{% trans 'Notifications' %}",
         attachTo: {
-            element: '[href="/notifications"]',
+            element: '#tour-notifications',
             on: "left-end",
         },
         buttons: [

bookwyrm/templates/guided_tour/lists.html

@@ -37,7 +37,7 @@
                     </code>",
             title: "{% trans 'Creating a new list' %}",
             attachTo: {
-                element: "#create-list-button",
+                element: "#tour-create-list",
                 on: "left",
             },
             buttons: [
@@ -60,7 +60,7 @@
             text: "{% trans 'Give your list a name and can optionally give it a description to help other people understand what your list is about.' %}",
             title: "{% trans 'Creating a new list' %}",
             attachTo: {
-                element: "[for='id_name']",
+                element: "#tour-list-name",
                 on: "top",
             },
             buttons: [
@@ -131,7 +131,7 @@
             </code>",
             title: "{% trans 'List curation' %}",
             attachTo: {
-                element: "#list-curation-legend",
+                element: "#tour-list-curation",
                 on: "left",
             },
             buttons: [

bookwyrm/templates/guided_tour/search.html

@@ -4,8 +4,8 @@
 
     let localResult = document.querySelector(".local-book-search-result");
     let remoteResult = document.querySelector(".remote-book-search-result");
-    let otherCatalogues = document.querySelector("#load-from-other-catalogues");
+    let otherCatalogues = document.querySelector("#tour-load-from-other-catalogues");
-    let manuallyAdd = document.querySelector("#manually-add-book");
+    let manuallyAdd = document.querySelector("#tour-manually-add-book");
     const tour = new Shepherd.Tour({
         exitOnEsc: true,
     });
@@ -21,7 +21,7 @@
             </code>.",
             title: "{% trans 'Searching' %}",
             attachTo: {
-                element: ".remote-book-search-result",
+                element: "#tour-remote-search-result",
                 on: "top",
             },
             buttons: [
@@ -48,7 +48,7 @@
             text: "{% trans 'If the book you are looking for is already on this server, you can click on the title to go to the book\'s page.' %}",
             title: "{% trans 'Searching' %}",
             attachTo: {
-                element: ".local-book-search-result",
+                element: "#tour-local-book-search-result",
                 on: "top",
             },
             buttons: [
@@ -76,7 +76,7 @@
             text: "{% trans 'If the book you are looking for is not listed, try loading more records from other sources like Open Library or Inventaire.' %}",
             title: "{% trans 'Load more records' %}",
             attachTo: {
-                element: "#load-from-other-catalogues",
+                element: "#tour-load-from-other-catalogues",
                 on: "right",
             },
             buttons: [
@@ -103,7 +103,7 @@
             text: "{% trans 'If your book is not in the results, try adjusting your search terms.' %}",
             title: "{% trans 'Search again' %}",
             attachTo: {
-                element: '#search-page-input',
+                element: '#tour-search-page-input',
                 on: "right",
             },
             buttons: [
@@ -126,7 +126,7 @@
             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",
+                element: "#tour-manually-add-book",
                 on: "right",
             },
             buttons: [

bookwyrm/templates/guided_tour/user_books.html

@@ -41,7 +41,7 @@
             ",
             title: "{% trans 'Creating a group' %}",
             attachTo: {
-                element: "#user-shelves",
+                element: "#tour-user-shelves",
                 on: "bottom-start",
             },
             buttons: [
@@ -64,7 +64,7 @@
             text: "{% trans 'You can create additional custom shelves to organise your books. A book on a custom shelf can be on any number of other shelves simultaneously, including one of the default reading status shelves' %}",
             title: "{% trans 'Adding custom shelves.' %}",
             attachTo: {
-                element: "[data-controls='create_shelf_form']",
+                element: "#tour-create-shelf",
                 on: "left",
             },
             buttons: [
@@ -87,7 +87,7 @@
             text: "{% trans 'If you have an export file from another service like Goodreads or LibraryThing, you can import your books and shelves here.' %}",
             title: "{% trans 'Import from another service' %}",
             attachTo: {
-                element: "[href='/import']",
+                element: "#tour-import-books",
                 on: "left",
             },
             buttons: [
@@ -114,7 +114,7 @@
             {% trans ' link here to continue the tour.' %}",
             title: "{% trans 'Lists' %}",
             attachTo: {
-                element: "[href='/list']",
+                element: "#tour-navbar-start",
                 on: "right",
             },
             buttons: [

bookwyrm/templates/guided_tour/user_groups.html

@@ -35,7 +35,7 @@
                     {% trans 'to continue the tour.' %}",
             title: "{% trans 'Create group' %}",
             attachTo: {
-                element: "#create_group_button",
+                element: "#tour-create-group",
                 on: "left-start",
             },
             buttons: [
@@ -58,7 +58,7 @@
             text: "{% trans 'Give your group a name and describe what it is about. You can make user groups for any purpose - a reading group, a bunch of friends, whatever!' %}",
             title: "{% trans 'Creating a group' %}",
             attachTo: {
-                element: "#create_group_header",
+                element: "#tour-group-name",
                 on: "right",
             },
             buttons: [
@@ -78,15 +78,11 @@
             ],
         },
         {
-            text: "{% trans 'Groups can be ' %}\
+            text: "{% trans 'Groups have privacy settings just like Lists, except that group privacy cannot be ' %}\
-                    <code>{% trans 'Public' %}</code>,\
+            <code>{% trans 'Followers' %}</code>.",
-                    <code>{% trans 'Unlisted' %}</code>,\
-                    {% trans 'or ' %}\
-                    <code>{% trans 'Private' %}</code><br><br>\
-                    {% trans 'Anyone can see and join a public group. Unlisted groups are currently exactly the same as public groups. Private groups can only be seen by members of the group.' %}",
             title: "{% trans 'Group visibility' %}",
             attachTo: {
-                element: "#privacy_select_button",
+                element: "#tour-privacy",
                 on: "left",
             },
             buttons: [

bookwyrm/templates/guided_tour/user_profile.html

@@ -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 parts of this page too - what they can see depends on your privacy settings.' %}",
+        text: "{% trans 'This is your user profile. All your latest activities will be listed here. Other Bookwyrm users can see parts of this page too - what they can see depends on your privacy settings.' %}",
         title: "{% trans 'User Profile' %}",
         buttons: [
             {
@@ -31,7 +31,7 @@ tour.addSteps([
         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",
+            element: "#tour-reading-goal",
             on: "right",
         },
         buttons: [
@@ -54,7 +54,7 @@ tour.addSteps([
         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' %}",
         attachTo: {
-            element: "#groups_tab",
+            element: "#tour-groups-tab",
             on: "right",
         },
         buttons: [
@@ -77,7 +77,7 @@ tour.addSteps([
         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",
+            element: "#tour-lists-tab",
             on: "right",
         },
         buttons: [
@@ -100,7 +100,7 @@ tour.addSteps([
         text: "{% trans 'The Books tab shows your book shelves. We\'ll explore this next.' %}",
         title: "{% trans 'Books' %}",
         attachTo: {
-            element: "#shelves_tab",
+            element: "#tour-shelves-tab",
             on: "right",
         },
         buttons: [
@@ -123,7 +123,7 @@ tour.addSteps([
         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",
+            element: "#tour-search",
             on: "right",
         },
         buttons: [

bookwyrm/templates/layout.html

@@ -47,7 +47,7 @@
                         {% else %}
                             {% trans "Search for a book" as search_placeholder %}
                         {% endif %}
-                        <input aria-label="{{ search_placeholder }}" id="search_input" class="input" type="text" name="q" placeholder="{{ search_placeholder }}" value="{{ query }}">
+                        <input aria-label="{{ search_placeholder }}" id="tour-search" class="input" type="text" name="q" placeholder="{{ search_placeholder }}" value="{{ query }}">
                     </div>
                     <div class="control">
                         <button class="button" type="submit">
@@ -58,7 +58,7 @@
                     </div>
                     <div class="control">
                         <button class="button" type="button" data-modal-open="barcode-scanner-modal">
-                            <span class="icon icon-barcode" title="{% trans 'Scan Barcode' %}">
+                            <span class="icon icon-barcode" title="{% trans 'Scan Barcode' %}" id="tour-barcode">
                                 <span class="is-sr-only">{% trans "Scan Barcode" %}</span>
                             </span>
                         </button>
@@ -74,7 +74,7 @@
         </div>
 
         <div class="navbar-menu" id="main_nav">
-            <div class="navbar-start">
+            <div class="navbar-start" id="tour-navbar-start">
                 {% if request.user.is_authenticated %}
                 <a href="/#feed" class="navbar-item mt-3 py-0">
                     {% trans "Feed" %}
@@ -94,7 +94,7 @@
                     {% include 'user_menu.html' %}
                 </div>
                 <div class="navbar-item mt-3 py-0">
-                    <a href="{% url 'notifications' %}" class="tags has-addons">
+                    <a href="{% url 'notifications' %}" class="tags has-addons" id="tour-notifications">
                         <span class="tag is-medium">
                             <span class="icon icon-bell" title="{% trans 'Notifications' %}">
                                 <span class="is-sr-only">{% trans "Notifications" %}</span>
@@ -190,7 +190,7 @@
                     <a href="https://docs.joinbookwyrm.com/">{% trans "Documentation" %}</a>
                 </p>
                 {% if request.user.is_authenticated %}
-                <p id="tour_button">
+                <p id="tour-begin">
                     <a href="/guided-tour/True">{% trans "Guided Tour" %}</a>
                 </p>
                 {% endif %}

bookwyrm/templates/lists/form.html

@@ -6,7 +6,7 @@
 <div class="columns">
     <div class="column is-two-thirds">
         <div class="field">
-            <label class="label" for="id_name">{% trans "Name:" %}</label>
+            <label class="label" for="id_name" id="tour-list-name">{% trans "Name:" %}</label>
             {{ list_form.name }}
         </div>
         <div class="field">
@@ -16,7 +16,7 @@
     </div>
     <div class="column">
         <fieldset class="field">
-            <legend class="label" id="list-curation-legend">{% trans "List curation:" %}</legend>
+            <legend class="label" id="tour-list-curation">{% trans "List curation:" %}</legend>
 
             <div class="field" data-hides="list_group_selector">
                 <input

bookwyrm/templates/lists/lists.html

@@ -16,7 +16,7 @@
         </h1>
     </div>
     {% if request.user.is_authenticated %}
-    <div class="column is-narrow" id="create-list-button">
+    <div class="column is-narrow" id="tour-create-list">
         {% trans "Create List" as button_text %}
         {% include 'snippets/toggle/open_button.html' with controls_text="create_list" icon_with_text="plus" text=button_text focus="create_list_header" %}
     </div>

bookwyrm/templates/search/book.html

@@ -7,7 +7,7 @@
 {% with results|first as local_results %}
 <ul class="block">
 {% for result in local_results.results %}
-    <li class="pd-4 mb-5 local-book-search-result">
+    <li class="pd-4 mb-5 local-book-search-result" id="tour-local-book-search-result">
         <div class="columns is-mobile is-gapless mb-0">
             <div class="column is-cover">
                 {% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' %}
@@ -39,7 +39,7 @@
         <details class="details-panel box" open>
         {% endif %}
             {% if not result_set.connector.local %}
-            <summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2 remote-book-search-result">
+            <summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2 remote-book-search-result" id="tour-remote-search-result">
                 <span class="mb-0 title is-5">
                     {% trans 'Results from' %}
                     <a href="{{ result_set.connector.base_url }}" target="_blank">{{ result_set.connector.name|default:result_set.connector.identifier }}</a>
@@ -102,11 +102,11 @@
 <p class="block">
     {% if request.user.is_authenticated %}
         {% if not remote %}
-        <a href="{{ request.path }}?q={{ query }}&type=book&remote=true" id="load-from-other-catalogues">
+        <a href="{{ request.path }}?q={{ query }}&type=book&remote=true" id="tour-load-from-other-catalogues">
             {% trans "Load results from other catalogues" %}
         </a>
         {% else %}
-        <a href="{% url 'create-book' %}" id="manually-add-book">
+        <a href="{% url 'create-book' %}" id="tour-manually-add-book">
             {% trans "Manually add book" %}
         </a>
         {% endif %}

bookwyrm/templates/search/layout.html

@@ -13,7 +13,7 @@
 <form class="block" action="{% url 'search' %}" method="GET">
     <div class="field has-addons">
         <div class="control">
-            <input type="text" class="input" name="q" value="{{ query }}" aria-label="{% trans 'Search query' %}" id="search-page-input">
+            <input type="text" class="input" name="q" value="{{ query }}" aria-label="{% trans 'Search query' %}" id="tour-search-page-input">
         </div>
         <div class="control">
             <div class="select" aria-label="{% trans 'Search type' %}">

bookwyrm/templates/shelf/shelf.html

@@ -32,7 +32,7 @@
 
 <nav class="block columns is-mobile scroll-x">
     <div class="column pr-0">
-        <div class="tabs" id="user-shelves">
+        <div class="tabs" id="tour-user-shelves">
             <ul>
                 <li class="{% if shelf.identifier == 'all' %}is-active{% endif %}">
                     <a href="{% url 'user-shelves' user|username %}"{% if shelf.identifier == 'all' %} aria-current="page"{% endif %}>
@@ -59,7 +59,7 @@
         <div class="tabs">
             <ul>
                 <li>
-                    <a href="{% url 'import' %}">
+                    <a href="{% url 'import' %}" id="tour-import-books">
                         <span class="icon icon-list" aria-hidden="true"></span>
                         <span>{% trans "Import Books" %}</span>
                     </a>
@@ -68,7 +68,7 @@
         </div>
     </div>
 
-    <div class="column is-narrow">
+    <div class="column is-narrow" id="tour-create-shelf">
         {% trans "Create shelf" as button_text %}
         {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="plus" controls_text="create_shelf_form" focus="create_shelf_form_header" %}
     </div>

bookwyrm/templates/snippets/privacy_select_no_followers.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 {% load utilities %}
-<div class="select {{ class }}" id="privacy_select_button">
+<div class="select {{ class }}" id="tour-privacy">
     {% firstof privacy_uuid 0|uuid as uuid %}
     {% if not no_label %}
     <label class="is-sr-only" for="privacy_{{ uuid }}">{% trans "Post privacy" %}</label>

bookwyrm/templates/snippets/shelve_button/shelve_button.html

@@ -7,7 +7,7 @@
 {% active_shelf book as active_shelf %}
 {% latest_read_through book request.user as readthrough %}
 {% with active_shelf_book=active_shelf.book %}
-<div class="field has-addons mb-0 has-text-weight-normal" data-shelve-button-book="{{ book.id }}">
+<div class="field has-addons mb-0 has-text-weight-normal" data-shelve-button-book="{{ book.id }}" id="tour-shelve-button">
     {% if switch_mode and active_shelf_book != book %}
     <div class="control">
         {% include 'snippets/switch_edition_button.html' with edition=book size='is-small' %}

bookwyrm/templates/user/groups.html

@@ -13,7 +13,7 @@
         </h1>
     </div>
     {% if is_self %}
-    <div class="column is-narrow" id="create_group_button">
+    <div class="column is-narrow" id="tour-create-group">
         {% trans "Create group" as button_text %}
         {% include 'snippets/toggle/open_button.html' with controls_text="create_group" icon_with_text="plus" text=button_text %}
     </div>

bookwyrm/templates/user/layout.html

@@ -69,25 +69,25 @@
         {% if is_self or user.goal.exists %}
         {% now 'Y' as year %}
         {% url 'user-goal' user|username year as url %}
-        <li{% if url in request.path %} class="is-active"{% endif %} id="reading_goal_tab">
+        <li{% if url in request.path %} class="is-active"{% endif %} id="tour-reading-goal">
             <a href="{{ url }}">{% trans "Reading Goal" %}</a>
         </li>
         {% endif %}
         {% if is_self or user|has_groups %}
         {% url 'user-groups' user|username as url %}
-        <li{% if url in request.path %} class="is-active"{% endif %} id="groups_tab">
+        <li{% if url in request.path %} class="is-active"{% endif %} id="tour-groups-tab">
             <a href="{{ url }}">{% trans "Groups" %}</a>
         </li>
         {% endif %}
         {% if is_self or user.list_set.exists %}
         {% url 'user-lists' user|username as url %}
-        <li{% if url in request.path %} class="is-active"{% endif %} id="lists_tab">
+        <li{% if url in request.path %} class="is-active"{% endif %} id="tour-lists-tab">
             <a href="{{ url }}">{% trans "Lists" %}</a>
         </li>
         {% endif %}
         {% if user.shelf_set.exists %}
         {% url 'user-shelves' user|username as url %}
-        <li{% if url in request.path %} class="is-active"{% endif %} id="shelves_tab">
+        <li{% if url in request.path %} class="is-active"{% endif %} id="tour-shelves-tab">
             <a href="{{ url }}">{% trans "Books" %}</a>
         </li>
         {% endif %}