diff --git a/bookwyrm/templates/guided_tour/home.html b/bookwyrm/templates/guided_tour/home.html index fb7fe3550..e9bc3d9fc 100644 --- a/bookwyrm/templates/guided_tour/home.html +++ b/bookwyrm/templates/guided_tour/home.html @@ -5,6 +5,12 @@ const initiateTour = new Shepherd.Tour({ exitOnEsc: true, }); +function checkResponsiveState(anchor) { + let menu = document.querySelector('#navbar-dropdown'); + let display = window.getComputedStyle(menu).display; + return display == 'flex' ? anchor : '.navbar-burger'; +} + initiateTour.addSteps([ { text: "{% trans 'Welcome to Bookwyrm!

Would you like to take the guided tour to help you get started?' %}", @@ -96,11 +102,7 @@ homeTour.addSteps([ 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: () => { - let menu = document.querySelector('#tour-navbar-start') - let display = window.getComputedStyle(menu).display; - return display == 'flex' ? '#tour-navbar-start' : '.navbar-burger'; - }, + element: checkResponsiveState('#tour-navbar-start'), on: "left", }, highlightClass: 'tour-element-highlight', @@ -128,6 +130,7 @@ homeTour.addSteps([ on: "right", }, highlightClass: 'tour-element-highlight', + scrollTo: true, buttons: [ { action() { @@ -152,6 +155,7 @@ homeTour.addSteps([ on: "left", }, highlightClass: 'tour-element-highlight', + scrollTo: true, buttons: [ { action() { @@ -169,12 +173,13 @@ 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!' %}", + text: "{% trans 'The 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: '#tour-notifications', + element: checkResponsiveState('#tour-notifications'), on: "left-end", }, + scrollTo: true, buttons: [ { action() { @@ -192,10 +197,10 @@ 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.

' %}", + text: "{% trans 'Your profile, books, direct messages, and settings can be accessed by clicking on your name in the menu here.

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

' %}", title: "{% trans 'Profile and settings menu' %}", attachTo: { - element: "#navbar-dropdown, .navbar-burger", + element: checkResponsiveState('#navbar-dropdown'), on: "left-end", }, buttons: [