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

[obuisard]

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

[sandewt]

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]

Related #40046

[dgrammatiko]

(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]

This one here is CSS only 😏

[brianteeman]

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]

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]

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]

RTC

---

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

[Quy]

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

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

[brianteeman]

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

[Quy]

Yes a different solution without the additional css.

[obuisard]

Yes a different solution without the additional css.

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

[Quy]

I have tested this item ✅ successfully on c4124df

---

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

[sandewt]

I have tested this item ✅ successfully on c4124df

---

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