Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

User tours on mobile browsers may point to incorrect locations #30

Open
nchan31 opened this issue May 18, 2023 · 1 comment
Open

User tours on mobile browsers may point to incorrect locations #30

nchan31 opened this issue May 18, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@nchan31
Copy link
Contributor

nchan31 commented May 18, 2023 •
edited
Loading

Toggle to expand block drawer is located at bottom right, which is different from desktop browser (which is located at upper right).
image

This can pose a problem for some tours, such as this one that points to the course index that appears on the left side of the desktop browser:
image
@phette23
Copy link
Member

phette23 commented Jun 9, 2023

@nchan31 Is this problem unsolvable because the way you structure tours is to provide a single CSS selector? So if Moodle uses a different element for mobile versus desktop screens, it's impossible to make a tour that works on both.

The one work around I can think of is that Moodle appears to do device detection and provides some CSS hooks (see below); you would essentially, within one tour, create two CSS selector versions of every step with one prefixed for mobile devices and the other not. Since tours only display a step if the CSS selector matches an element, users only receive one version of each step.

Moodle <body> classes on laptop:

<body id="page-my-index" class="limitedwidth format-site  path-my chrome dir-ltr lang-en_us yui-skin-sam
yui3-skin-sam moodle-cca-edu pagelayout-mydashboard course-1 context-26 uses-drawers
drawer-open-index jsenabled">

On mobile (using Chrome dev tools to imitate a Galaxy):

<body id="page-my-index" class="limitedwidth format-site  path-my chrome android dir-ltr lang-en_us
yui-skin-sam yui3-skin-sam moodle-cca-edu pagelayout-mydashboard course-1 context-26 mobiletheme
uses-drawers drawer-open-index jsenabled">

Note the added android and mobiletheme classes. mobiletheme is probably a better hook since it's cross-platform. My first hope was limitedwidth but it looks like both screens have that class.

Anyways, it may be possible to build tours that work on both mobile and desktop devices, but it entails extra work. I would focus on making the tours spotless on desktop first before experimenting with this dual step approach on a tour.

@phette23 phette23 added the bug Something isn't working label Aug 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@phette23 @nchan31