Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#26192 closed defect (bug) (fixed)

Theme info is obscured in Firefox using new themes admin page

Reported by: scottsweb's profile scottsweb Owned by: dd32's profile 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 11 years ago.
themes-screen.png (166.5 KB) - added by azaozz 11 years ago.
26192.2.diff (3.3 KB) - added by shaunandrews 11 years ago.
26192.3.diff (3.3 KB) - added by dd32 11 years ago.

Download all attachments as: .zip

Change History (17)

#1 @SergeyBiryukov
11 years ago

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

#2 @SergeyBiryukov
11 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

11 years ago

#3 @scottsweb
11 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 11 years ago by scottsweb (previous) (diff)

#4 @scottsweb
11 years ago

  • Keywords has-patch added

11 years ago

#5 follow-up: @azaozz
11 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.

#6 @shaunandrews
11 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
11 years ago

Replying to azaozz:

  • Responsive styling.

What's wrong with the responsive styling?

#8 @azaozz
11 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 11 years ago by azaozz (previous) (diff)

#9 @ocean90
11 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.

11 years ago

#10 @dd32
11 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
11 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
11 years ago

In 26520:

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

#13 @lancewillett
11 years ago

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