Joomla! Issue Tracker | Joomla! CMS #40045 - [4.3][Guided Tours] Hide 'Take a tour' on small devices

? PR-4.3-dev

Fixed in Code Base
9 Mar 2023
Medium
Build: 4.3-dev
# 40045
Diff
obuisard:guided-tours-mobile

Pending

User tests: Successful: Unsuccessful:

obuisard
8 Mar 2023

Addresses issue #40011.

The guided tours are accessible throughout the administration.
However, on small devices, the tours cannot always run properly because some of the content is hidden from view and from the tours (targets are not found so the steps end up in the upper left corner of the window).

I am not sure this is the best approach, so please comment.

Summary of Changes

Add CSS to hide the tour dropdown on small viewports.

Testing Instructions

Make sure you see the 'Take a tour' button on the top toolbar of the administrator console.
Resize the window down. Around 576px, the dropdown should disappear.

Actual result BEFORE applying this Pull Request

You can take a tour on any screen size.

Expected result AFTER applying this Pull Request

'Take a tour' is not visible if the viewport is small or you are on a mobile device (tablets should be fine, but usually not smartphones).

This does not prevent the user to start a tour, resize the window down and continue the tour with possible 'failure' (no error or anything, just unexpected behavior in case an element is not 'visible').

Link to documentations

Please select:

Documentation link for docs.joomla.org:
No documentation changes for docs.joomla.org needed
Pull Request link for manual.joomla.org:
No documentation changes for manual.joomla.org needed

Votes

# of Users Experiencing Issue

1/1

Average Importance Score

3.00

66c4d6a 8 Mar 2023

Hide 'Take a tour' on small devices

joomla-cms-bot - change - 8 Mar 2023

Category

⇒

Repository NPM Change

obuisard - open - 8 Mar 2023

obuisard - change - 8 Mar 2023

Status

New

⇒

Pending

03ae275 8 Mar 2023

Update guidedtours.scss

obuisard - change - 8 Mar 2023

Labels

Added: NPM Resource Changed PR-4.3-dev

c211bfe 8 Mar 2023

Update guidedtours.scss

7a8946c 8 Mar 2023

Update guidedtours.scss

sandewt - comment - 8 Mar 2023

I am not sure this is the best approach, so please comment.

I don't know either, but maybe you can do something with the following approach in case of mobile devices. These are often small. You don't need ccs.

Code in plugin, something like this:

use Joomla\CMS\Factory;

public function startTour(Event $event)
{
    if (Factory::getApplication()->client->mobile == true)
    {
	return;
    }

See for the devices:

joomla-cms/libraries/src/Environment/Browser.php

Lines 545 to 555 in 1c0eda3

    
           if ( 
        
               strpos($this->agent, 'MOT-') !== false 
        
               || strpos($this->lowerAgent, 'j-') !== false 
        
               || preg_match('/(mobileexplorer|openwave|opera mini|opera mobi|operamini|avantgo|wap|elaine)/i', $this->agent) 
        
               || preg_match('/(iPhone|iPod|iPad|Android|Mobile|Phone|BlackBerry|Xiino|Palmscape|palmsource)/i', $this->agent) 
        
               || preg_match('/(Nokia|Ericsson|docomo|digital paths|portalmmm|CriOS[\/ ]([0-9.]+))/i', $this->agent) 
        
               || preg_match('/(UP|UP.B|UP.L)/', $this->agent) 
        
               || preg_match('/; (120x160|240x280|240x320|320x320)\)/', $this->agent) 
        
           ) { 
        
               $this->mobile = true; 
        
           }

[EDIT Sorry, my proposal doesn't work. Plugin does not behave what I expected.]

sandewt - comment - 8 Mar 2023

Related #40046

dgrammatiko - comment - 8 Mar 2023

(Factory::getApplication()->client->mobile == true)

That approach should never be used anymore as the UA string is deprecated from all the browsers as they start to roll out client hints

What would be a more solid solution is to have JS sniff the ACTUAL device (eg is it touch? has a small screen? etc) and then activate the dropdown button which by default should be disabled. Should be less than 5 lines of code and it works based on the actual data of the client not some sniffed dodgy data that could fail due to proxies, deprecated strings, etc

my 2c

laoneo - comment - 8 Mar 2023

This one here is CSS only ?

brianteeman - test_item - 8 Mar 2023 - Tested successfully

brianteeman - comment - 8 Mar 2023

I have tested this item ✅ successfully on 7a8946c

does what it says

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40045.}

sandewt - test_item - 9 Mar 2023 - Tested successfully

sandewt - comment - 9 Mar 2023

I have tested this item ✅ successfully on 7a8946c

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40045.}

khu5h1 - test_item - 9 Mar 2023 - Tested successfully

khu5h1 - comment - 9 Mar 2023

I have tested this item ✅ successfully on 7a8946c

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40045.}

alikon - change - 9 Mar 2023

Status

Pending

⇒

Ready to Commit

alikon - comment - 9 Mar 2023

RTC

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40045.}

e4cecac 9 Mar 2023

Merge branch '4.3-dev' into guided-tours-mobile

Quy - change - 9 Mar 2023

Labels

Added: ?

Quy - comment - 9 Mar 2023

Would adding d-none d-sm-block be an option?

<div class="header-item-content dropdown header-tours">

brianteeman - comment - 9 Mar 2023

@Quy isn't that the functionaly the same as the code here?

Quy - comment - 9 Mar 2023

Yes a different solution without the additional css.

obuisard - comment - 9 Mar 2023

Yes a different solution without the additional css.

It is actually much cleaner, I did not think about it.

be938e2 9 Mar 2023

Removed unnecessary CSS

obuisard - change - 9 Mar 2023

Labels

Removed: ?

c4124df 9 Mar 2023

Added classes d-none d-sm-block to header-tours

joomla-cms-bot - change - 9 Mar 2023

Add a Comment

Older
Newer

Joomla! Issue Tracker - CMS

[#40045] - [4.3][Guided Tours] Hide 'Take a tour' on small devices

Summary of Changes

Testing Instructions

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Link to documentations

Votes

Add a Comment

	if (
	strpos($this->agent, 'MOT-') !== false
	\|\| strpos($this->lowerAgent, 'j-') !== false
	\|\| preg_match('/(mobileexplorer\|openwave\|opera mini\|opera mobi\|operamini\|avantgo\|wap\|elaine)/i', $this->agent)
	\|\| preg_match('/(iPhone\|iPod\|iPad\|Android\|Mobile\|Phone\|BlackBerry\|Xiino\|Palmscape\|palmsource)/i', $this->agent)
	\|\| preg_match('/(Nokia\|Ericsson\|docomo\|digital paths\|portalmmm\|CriOS[\/ ]([0-9.]+))/i', $this->agent)
	\|\| preg_match('/(UP\|UP.B\|UP.L)/', $this->agent)
	\|\| preg_match('/; (120x160\|240x280\|240x320\|320x320)\)/', $this->agent)
	) {
	$this->mobile = true;
	}

Status	Ready to Commit	⇒	Fixed in Code Base
Closed_Date	0000-00-00 00:00:00	⇒	2023-03-09 23:01:00
Closed_By		⇒	obuisard