Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#26192 closed defect (bug) (fixed)

Theme info is obscured in Firefox using new themes admin page

Reported by: scottsweb Owned by: dd32
Milestone: 3.8 Priority: normal
Severity: normal Version: 3.8
Component: Customize Keywords: has-patch
Focuses: ui Cc:


In Firefox 26.0 the theme information is obscured by theme options panel on the Appearance -> Themes admin screen. I am unable to scroll and correctly read the content under options at the bottom:


Attachments (4)

26192.diff (542 bytes) - added by scottsweb 7 years ago.
themes-screen.png (166.5 KB) - added by azaozz 7 years ago.
26192.2.diff (3.3 KB) - added by shaunandrews 7 years ago.
26192.3.diff (3.3 KB) - added by dd32 7 years ago.

Download all attachments as: .zip

Change History (17)

#1 @SergeyBiryukov
7 years ago

  • Keywords ui-focus added
  • Milestone changed from Awaiting Review to 3.8

#2 @SergeyBiryukov
7 years ago

  • Summary changed from Theme info is obsured in Firefox using new themes admin page to Theme info is obscured in Firefox using new themes admin page

7 years ago

#3 @scottsweb
7 years ago

Patch uploaded. Padding height has been moved to the :after pseudo selector which works consistently across Firefox (26.0), Chrome (32) and Safari (6.1).

Last edited 7 years ago by scottsweb (previous) (diff)

#4 @scottsweb
7 years ago

  • Keywords has-patch added

7 years ago

#5 follow-up: @azaozz
7 years ago

26192.diff fixes the problem partially. When there is a vertical scrollbar, it still slips behind the "footer" making it look somewhat broken/unfinished.

Also the buttons are about twice the size of all other buttons in the admin. This may be good for small screens but looks a bit awkward on laptops and desktops.

Thinking the structural CSS for this box would need more attention:

  • Responsive styling.
  • Improved usability: the "header" with the close button should be always visible, similarly to the media modal.
  • The "footer" should be under the scrollable middle part, so the vertical scrollbar doesn't hide behind it.
  • The size of the buttons should be same or similar to all other buttons in the admin.

7 years ago

#6 @shaunandrews
7 years ago

In 26192.2.diff​

  • Resolves the issue where the footer overlapped the content of the modal - this also means we lose the "cool" transparency of the modal footer. - Since this affects the positioning of the modal, I've rolled in the patch from the stale #25961.
  • This also addresses the size of the buttons, including the delete button which needs to have a few classes added so it matches the size of the other buttons.
  • Adjusts the left position of the modal in the case where the admin menu is collapse (or, folded).

#7 in reply to: ↑ 5 @shaunandrews
7 years ago

Replying to azaozz:

  • Responsive styling.

What's wrong with the responsive styling?

#8 @azaozz
7 years ago

The responsive styling looks good. Was referring to how button/touch areas sizes are changed in the menu and toolbar on smaller screens.

26192.2.diff works much better. Perhaps the "header" should get the same treatment as the "footer", i.e. reduce the size of the buttons but make them bigger on small/touch screens.

Also it still feels awkward how the "close" button in the top/right corner scrolls off the screen but the rest of the controls (Activate, Preview, Delete) stay fixed at the bottom regardless of scrolling.

Last edited 7 years ago by azaozz (previous) (diff)

#9 @ocean90
7 years ago

26192.2.diff looks good, but we have to improve it. I would vote for a markup change here, see also azaozz's comment. The header should have a fixed position.

Adding margin-bottom: 69px; to .theme-overlay .theme-wrap doesn't work in Opera 12 and removes the box-shadow at bottom.

7 years ago

#10 @dd32
7 years ago

26192.3.diff is a refresh of 26192.2.diff

I agree with the comments above, it seems like:

  • Header needs to be fixed rather than scroll
  • Opera 12 support
  • Bottom toolbox appears to be floating alone, it's outside of the box-shadow (This might be a patch merge fail of mine)

#11 @dd32
7 years ago

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

In 26519:

Themes: Make the Theme Detail view div use more of the available viewport, Fix the Header and Footer in the viewport and only scroll the theme details, Prefix some more theme CSS classes. Props shaunandrews for the initial viewport patch. Fixes #25961, #26192

#12 @dd32
7 years ago

In 26520:

Themes: Indent the HTML for proper indentation after r26519 added an extra div. See #25961, #26192

#13 @lancewillett
7 years ago

  • Component changed from Themes to Appearance
Note: See TracTickets for help on using tickets.