Joomla! Issue Tracker - CMS

Download
Launch
Feeling Lucky

[#31419] - [4.1] Vertical tabs style is forced for nested tabs

? NPM Resource Changed ? ? Pending

User tests: Successful: Unsuccessful:

avatar Denitz
Denitz
17 Nov 2020

Pull Request for Issue #31376 .

Summary of Changes

Horizontal tabs inside vertical tabs incorrectly inherit vertical CSS style.

Testing Instructions

Display horizontal tabs inside vertical tabs.

The code:

<?= HTMLHelper::_('uitab.startTabset', 'tabs1', ['active' => 'tabA']) ?>
	<?= HTMLHelper::_('uitab.addTab', 'tabs1', 'tabs11', 'tabs11') ?>
		Horizontal tab 1

		<?= HTMLHelper::_('uitab.startTabset', 'tabs2', ['active' => 'tabA', 'orientation' => 'vertical']) ?>
		<?= HTMLHelper::_('uitab.addTab', 'tabs2', 'tabs21', 'tabs21') ?>
		Horizontal &gt; Vertical tab 1

			<?= HTMLHelper::_('uitab.startTabset', 'tabs3', ['active' => 'tabA', 'orientation' => 'horizontal']) ?>
			<?= HTMLHelper::_('uitab.addTab', 'tabs3', 'tabs31', 'tabs31') ?>
			Horizontal &gt; Vertical &gt; Horizontal tab 1
			<?= HTMLHelper::_('uitab.endTab') ?>
			<?= HTMLHelper::_('uitab.addTab', 'tabs3', 'tabs32', 'tabs32') ?>
			Horizontal &gt; Vertical &gt; Horizontal tab 2
			<?= HTMLHelper::_('uitab.endTab') ?>
			<?= HTMLHelper::_('uitab.endTabset') ?>

		<?= HTMLHelper::_('uitab.endTab') ?>

		<?= HTMLHelper::_('uitab.addTab', 'tabs2', 'tabs22', 'tabs22') ?>
		Horizontal &gt; Vertical tab 2
		<?= HTMLHelper::_('uitab.endTab') ?>

		<?= HTMLHelper::_('uitab.endTabset') ?>

	<?= HTMLHelper::_('uitab.endTab') ?>

	<?= HTMLHelper::_('uitab.addTab', 'tabs1', 'tabs12', 'tabs12') ?>
		Horizontal tab 2
	<?= HTMLHelper::_('uitab.endTab') ?>

<?= HTMLHelper::_('uitab.endTabset') ?>

Actual result BEFORE applying this Pull Request

See the invalid style of horizontal tabs.

Expected result AFTER applying this Pull Request

Valid horizontal tabs style.

Documentation Changes Required

No.

avatar Denitz Denitz - open - 17 Nov 2020
avatar Denitz Denitz - change - 17 Nov 2020
Status New ⇒ Pending
avatar joomla-cms-bot joomla-cms-bot - change - 17 Nov 2020
Category ⇒ Administration Templates (admin) NPM Change
avatar ceford ceford - test_item - 18 Nov 2020 - Tested successfully
avatar ceford
ceford - comment - 18 Nov 2020

I have tested this item ✅ successfully on 88e33ce

I put the test code from #31376 at the bottom of the banners list to test. Needs npm run build:css

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.

avatar ceford
ceford - comment - 18 Nov 2020

Before:

screen shot 2020-11-18 at 04 30 49

After:

screen shot 2020-11-18 at 04 31 24

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.

avatar gostn gostn - test_item - 18 Nov 2020 - Tested successfully
avatar gostn
gostn - comment - 18 Nov 2020

I have tested this item ✅ successfully on 88e33ce

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.

avatar Quy Quy - change - 18 Nov 2020
Status Pending ⇒ Ready to Commit
avatar Quy
Quy - comment - 18 Nov 2020

RTC

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.

avatar richard67
richard67 - comment - 20 Nov 2020

@Denitz Could you fix the SCSS code style errors reported here by Drone? https://ci.joomla.org/joomla/joomla-cms/37650/1/20 . It might be necessary that you change some SCSS in line 152 and after of file administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss so you have a nesting depth of not more than 4 levels.

avatar richard67 richard67 - change - 20 Nov 2020
Status Ready to Commit ⇒ Pending
avatar richard67
richard67 - comment - 20 Nov 2020

Back to pending since it fails SCSS code style tests in Drone.

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.

avatar richard67 richard67 - change - 20 Nov 2020
Labels Added: ?
avatar Denitz
Denitz - comment - 23 Nov 2020

@richard67 SCSS changed.

avatar infograf768
infograf768 - comment - 23 Nov 2020

Restarted drone

avatar Denitz Denitz - change - 25 Jan 2021
Labels Added: NPM Resource Changed
avatar Denitz Denitz - change - 23 Feb 2021
The description was changed
avatar Denitz Denitz - edited - 23 Feb 2021
4db19f0 30 Aug 2021 avatar Denitz fix
avatar Denitz Denitz - change - 30 Aug 2021
Labels Added: ? Conflicting Files
Removed: ?
33a8b71 30 Aug 2021 avatar Denitz fix
avatar chmst
chmst - comment - 31 Jan 2022

@Denitz could you resolve the conflicts in your branch, please?

avatar Denitz Denitz - change - 2 Feb 2022
Labels Added: ?
Removed: ?
avatar joomla-cms-bot joomla-cms-bot - change - 2 Feb 2022
Category Administration Templates (admin) NPM Change ⇒ Repository NPM Change
avatar Denitz
Denitz - comment - 2 Feb 2022

@chmst Done.

avatar Denitz Denitz - change - 22 Feb 2022
Labels Removed: Conflicting Files
avatar Denitz Denitz - change - 8 Jun 2022
Title
…
[4.0] Vertical tabs style is forced for nested tabs
[4.1] Vertical tabs style is forced for nested tabs
avatar Denitz Denitz - edited - 8 Jun 2022
avatar HLeithner
HLeithner - comment - 27 Jun 2022

This pull request has automatically rebased to 4.2-dev.

avatar joomla-bot
joomla-bot - comment - 27 Jun 2022

This pull requests has been automatically converted to the PSR-12 coding standard.

avatar obuisard
obuisard - comment - 11 Oct 2022

@roland-d do you consider it a bug fix for 4.2? Major changes in the style file but I don't see it breaking anything. If insure, I will include it into 4.3.

avatar roland-d roland-d - change - 15 Oct 2022
Labels Added: ? ?
Removed: ?
avatar roland-d
roland-d - comment - 15 Oct 2022

@obuisard We can include this in 4.2.x once there are 2 testers again because it had a number of changes since then. @ceford Would you mind testing this one again please?

avatar obuisard
obuisard - comment - 15 Oct 2022

I have tested this item ✅ successfully on d0ea92c

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.

avatar obuisard obuisard - test_item - 15 Oct 2022 - Tested successfully
avatar obuisard
obuisard - comment - 15 Oct 2022

image
With the markup provided for testing.

avatar ceford
ceford - comment - 16 Oct 2022

Not sure about this. I get a different vertical tab style from @obuisard but the same as I got last time. This is on a new install of
‎4.3.0-rc2-dev with test sample data. I would prefer the style shown by @obuisard.screen shot 2022-10-16 at 06 59 26

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.
avatar obuisard
obuisard - comment - 16 Oct 2022

@ceford Do not look so much at the style because it may differ depending on the template you are using.
The importance is to get a horizontal thick border on the selected tab when the tabulation is horizontal and a vertical thick border on the selected tab when the tabulation is vertical.

avatar roland-d
roland-d - comment - 19 Oct 2022

@ceford The answer by Olivier, does that mean your test is OK? If so, could you please mark it. Thank you.

avatar ceford
ceford - comment - 19 Oct 2022

I have tested this item ✅ successfully on d0ea92c

I put the test code in a front end form and there the appearance is as depicted by @obuisard - so it is OK. I guess the backend appearance is a separate issue.

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.

avatar ceford ceford - test_item - 19 Oct 2022 - Tested successfully
avatar alikon alikon - change - 19 Oct 2022
Status Pending ⇒ Ready to Commit
avatar alikon
alikon - comment - 19 Oct 2022

RTC

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.

avatar roland-d roland-d - change - 19 Oct 2022
Labels Added: ?
avatar roland-d roland-d - change - 19 Oct 2022
Status Ready to Commit ⇒ Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 ⇒ 2022-10-19 20:04:04
Closed_By ⇒ roland-d
avatar roland-d roland-d - close - 19 Oct 2022
avatar roland-d roland-d - merge - 19 Oct 2022
avatar roland-d
roland-d - comment - 19 Oct 2022

Thank you

Add a Comment

Login with GitHub to post a comment