WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 6 years ago

#27116 closed defect (bug) (fixed)

Some nav tab and media upload CSS broken in colors.css/wp-admin.css merge

Reported by: TobiasBg Owned by: helen
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.9
Component: Administration Keywords: has-patch
Focuses: ui Cc:

Description

#18380 broke some CSS (bottom border, background color) in the nav tabs (from the old themes.php) and in the tabs in the old media uploader, see screenshots.

The attached patch fixes this.

Attachments (12)

nav-tabs-border-bottom.png (7.9 KB) - added by TobiasBg 7 years ago.
Nav tabs are missing bottom border
media-uploader-tabs.png (10.3 KB) - added by TobiasBg 7 years ago.
Media upload tabs miss background color and border
27116.patch (778 bytes) - added by TobiasBg 7 years ago.
Re-add background-color and border-bottom
27116.diff (438 bytes) - added by helen 7 years ago.
27116.2.patch (783 bytes) - added by TobiasBg 7 years ago.
Corrected patch
Screen Shot 2014-02-13 at 4.57.30 PM.png (15.6 KB) - added by helen 7 years ago.
Wrapped tabs, before patch
Screen Shot 2014-02-13 at 4.55.59 PM.png (14.6 KB) - added by helen 7 years ago.
Wrapped tabs, after patch
Screen Shot 2014-02-13 at 5.24.06 PM.png (17.0 KB) - added by helen 7 years ago.
nav-tab-active-background-shine-through.png (4.8 KB) - added by TobiasBg 7 years ago.
Background of top nav tab shines through into active tab
27116.3.patch (807 bytes) - added by TobiasBg 7 years ago.
Patch for old media upload thickbox and nav-tab-active background
27116.4.patch (369 bytes) - added by TobiasBg 7 years ago.
Fix remaining background color spill
27116.5.patch (343 bytes) - added by TobiasBg 7 years ago.
Refreshed patch after wp-admin.css split

Download all attachments as: .zip

Change History (23)

@TobiasBg
7 years ago

Nav tabs are missing bottom border

@TobiasBg
7 years ago

Media upload tabs miss background color and border

@TobiasBg
7 years ago

Re-add background-color and border-bottom

#1 @TobiasBg
7 years ago

Reason for the media uploader issue is that colors.css#L717 was only merged for #plugin-information-header but not for #media-upload-header, to wp-admin.css#L10979.

For the nav tabs, it's a mixture of changed border-(bottom-)color and border-(bottom-)width properties during the merge.

#2 @helen
7 years ago

I'm not having the issue with the nav tabs bottom border elsewhere - the border-bottom you removed is for an individual tab, not the entire wrapper. Where are you seeing this?

@helen
7 years ago

#3 @helen
7 years ago

  • Keywords reporter-feedback added

Also, I would go with just border-bottom as per before with div#media-upload-header - uploaded an amended patch for you to go from if we need to do more for the nav tab issue you described.

#4 @TobiasBg
7 years ago

  • Keywords reporter-feedback removed

Yes, the removed bottom border is for the individual tabs. This becomes necessary once the tabs wrap to two lines (due to their number). In that case, there's no .nav-tab-active tab (which explicitely has a bottom border) that then basically pushes all the other ones up one pixel.
I'm using HTML like the following in a plugin (coming from the themes.php HTML for this from previous releases). You can try it with this <h2> title on any admin screen (i.e. replace the first <h2> in the div.wrap in the Chrome Dev Tools, then reduce the browser width to make the tabs wrap):

<h2 class="nav-tab-wrapper">
<a class="nav-tab nav-tab-active" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a>
<a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a><a class="nav-tab" href="http://...">Foobar</a>
</h2>

For the Thickbox tabs:
You are right,border-bottom is correct here. I had accidentally remove -bottom as well and didn't notice that it adds the border around the entire #media-upload-header as the colors are pretty similar.

@TobiasBg
7 years ago

Corrected patch

@helen
7 years ago

Wrapped tabs, before patch

@helen
7 years ago

Wrapped tabs, after patch

#5 @helen
7 years ago

I'm not convinced that it looks any better to leave the border there. I uploaded some screenshots - I don't know how you're getting the image you attached. Horizontal tabs have responsive issues, yes, but I don't think the merge broke anything there.

#6 follow-up: @TobiasBg
7 years ago

It will look worse if the text in the tabs has different lengths, as the tabs then overlap in a different way.
Also, this is a regression, as the tabs look like in your "after patch" screenshot in WP 3.8, so we should restore that look.

#7 in reply to: ↑ 6 @helen
7 years ago

Replying to TobiasBg:

Also, this is a regression, as the tabs look like in your "after patch" screenshot in WP 3.8, so we should restore that look.

Not seeing that - attached a screenshot from 3.8.1. There are two changes from your patch - there's the bottom border to the wrapper, yes, but then the other tabs above look like buttons, so that seems wrong.

@TobiasBg
7 years ago

Background of top nav tab shines through into active tab

@TobiasBg
7 years ago

Patch for old media upload thickbox and nav-tab-active background

#8 @TobiasBg
7 years ago

I think I know what I did here... My 3.8 test install was not on 3.8 anymore, for some reason... So, you are right. This does not happen on 3.8 and is therefore not a regression. The colors/wp-admin.css merge did not break anything here. I guess the tabs without the bottom border just looked weird to me. So, that part of the ticket is invalid. Sorry for the confusion.

However, while investigating this, I noticed another minor glitch (also not a regression, so no top priority), which is easy to fix: When the .nav-tab-active is in the bottom row of stacked tabs, the background of the non-active tabs spills into the active tab, as it's transparent. Its background color should simply become the same color as the bottom border.
See the attached screenshot.

Finally, we have the background in the old media upload thickbox (which you can confirm, if I understand correctly).

So, the new 27116.3.patch fixes that and the (newly discovered) .nav-tab-active glitch.

@TobiasBg
7 years ago

Fix remaining background color spill

#9 follow-up: @TobiasBg
7 years ago

nacin fixed the media uploader thickbox issue in [27181] for #26669 in the meantime.

The updated 27116.4.patch takes care of the background spill seen in nav-tab-active-background-shine-through.png.

#10 in reply to: ↑ 9 @helen
7 years ago

Replying to TobiasBg:

The updated 27116.4.patch takes care of the background spill seen in nav-tab-active-background-shine-through.png.

I'll manually apply the patch after #26669 is done - I'm most of the way through it so can't apply patches to wp-admin.css right now :)

@TobiasBg
7 years ago

Refreshed patch after wp-admin.css split

#11 @helen
6 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 27749:

Ensure active tabs have a background color to avoid any awkward bleed-through in case of overlap. props TobiasBg. fixes #27116.

Note: See TracTickets for help on using tickets.