[5.2] [Guided tours] Tour header visual changes + footer padding fix

[obuisard]

Summary of Changes

The guided tours header does not have a clear indication that a tour can be cancelled. There is no label and the progress indicator is next to it, making it hard to distinguish.
The changes include:

• A Cancel label close to the cancel cross to provide context and enhance usability,
• moving the progress indicator away from the cancel button to ensure the cancel is clearly visible.

Testing Instructions

It is just a visual change. Make sure you can still cancel a tour, no matter if you are selecting the cross or the label.

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

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

[brianteeman]

I have tested this item 🔴 unsuccessfully on a19918e

---

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

[brianteeman]

You need to use logical css properties otherwise your css breaks on RTL

example
change margin-right to margin-inline-end

[obuisard]

You need to use logical css properties otherwise your css breaks on RTL
example change margin-right to margin-inline-end

I have adjusted the CSS. Thanks!

[brianteeman]

Thanks for the last change.

I am not a designer but the header looks odd to me as we have multiple text sizes and line heights on the same line which results in 4 different baselines

You can see it when you enlarge the header and draw some lines

[obuisard]

Thanks for the last change.

Of course! I am glad you pointed it out.

I am not a designer but the header looks odd to me as we have multiple text sizes and line heights on the same line which results in 4 different baselines
You can see it when you enlarge the header and draw some lines

That's because the elements in the header are vertically aligned in the center of the top container.
I was not 'happy' with the 'Cancel' label, however. I changed it a bit.
Looks better to my eye.

[Quy]

Please consider hiding Cancel as this is not shown in other modals.

[obuisard]

Please consider hiding Cancel as this is not shown in other modals.

It was hidden before, one of the ideas for this PR is to make it visible. These are guided tours and from the start some of the user feedback was that the X is not a clear indication that it is meant to cancel tours (or close them). It helps teaching newbies that yes, the 'X' cancels/closes the window.

[glarkell]

Tested successfully on J5.2.

[Kostelano]

I haven’t tested it yet, but what if the step title is long enough?

[Kostelano]

I haven’t tested it yet, but what if the step title is long enough?

I can say that this is a rather short title in Russian. Now it turns out that almost every step has a line break, which doesn’t look very good to me. Most likely there will be lines with 3/4 line breaks.

I would prefer that somehow this could be solved.

Perhaps enlarge the window. It is still possible to remove CANCEL, since all other modal windows simply have a cross. It is possible to move CANCEL down to the button block (from START).

[sdwjoomla]

Please consider hiding Cancel as this is not shown in other modals.

Having the 'Cancel' next to the 'X' helps answer the question received for clients who noticed it and aske what it does. For the client who hadn't noticed the 'X' and would also ask how to cancel a tour, adding the word 'Cancel' makes it easier for them.

[sdwjoomla]

@Kostelano Thanks for taking a look. Yes, the line break doesn't look the best. There is a companion PR to this one, #43810 which addresses the width. Would you have a few moments to take a look at it?

[Quy]

The Step badge now takes up more space and has the main focus when it should be the title. Maybe move it to the bottom left corner.

The Cancel text is competing for attention with the title. You want them to do the tour but constantly see the Cancel with each step. It needs to be more subtle as before.

[brianteeman]

Accessibility says that you should always indicate how far along in a process you are so leading with the step count is good. I agree that it is not needed to display the cancel text. We don't do it on other modals

[chmst]

I agree that it is not needed to display the cancel text. We don't do it on other modals

agreed

[Quy]

Not aligned.

[obuisard]

Not aligned.

Thanks for the catch!

I made a correction in PR #43810, which is were the padding was changed for the text content.
I have adjusted the footer padding in this PR, which was not aligned since 4.3 :-)

[Quy]

Perform How to add steps to a guided tour?. Missing X and partial X.

[obuisard]

Perform How to add steps to a guided tour?. Missing X and partial X.

Strange, I can't reproduce it. No matter the window size. What browser are you using? Anybody else with the issue?

The header is a flex container so it's children should resize appropriately...

[Quy]

Firefox 128.0.2 and Chrome Version 127.0.6533.73 on Windows

[Quy]

The last commit is causing the issue.

[obuisard]

The last commit is causing the issue.

Thanks, I corrected it.

[Quy]

I have tested this item ✅ successfully on 0562ade

---

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

[viocassel]

I have tested this item ✅ successfully on 0562ade

---

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

[Quy]

RTC

---

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

[pe7er]

Thanks @obuisard !