mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-12-23 00:26:33 +00:00
Code Issues Projects Releases Wiki Activity

fix anchors not working on homepage tour

Browse source 
Fixes bug on larger screens.

We need to use a function to set the anchor for tour steps when using menus and other elements that become visible or hidden responsively. Because the element is still in the DOM, we can't just rely on it disappearing completely, we have to assign a different (visible) element otherwise the step will simply disappear and the user cannot continue the tour. Previously this used a simple selector which didn't work due to the above.
This commit is contained in:
Hugh Rundle 2022-07-27 15:14:28 +10:00
parent 356c1c0b62
commit a4714f097f
1 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
bookwyrm/templates/guided_tour/home.html
View file

@ -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!<br><br>Would you like to take the guided tour to help you get started?' %}",
@ -96,11 +102,7 @@ homeTour.addSteps([
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: () => {
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.<p class=\'notification is-warning is-light mt-3\'>Try selecting <strong>Profile</strong> from the drop down menu to continue the tour.</p>' %}",
text: "{% trans 'Your profile, books, direct messages, and settings can be accessed by clicking on your name in the menu 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, .navbar-burger",
element: checkResponsiveState('#navbar-dropdown'),
on: "left-end",
},
buttons: [