Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#21611 closed defect (bug) (fixed)

Remove CSS hover styling of postboxes with disabled JS

Reported by: tobiasbg's profile TobiasBg Owned by: nacin's profile nacin
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch commit
Focuses: Cc:

Description

If JS is disabled in the browser, post metaboxes can neither be moved/sorted nor expanded/shrunken.
However, due to the current wp-admin-CSS, the boxes still show effects on mouse hover (like text color change, other mouse pointers, visible arrow handle).
This can confuse users as nothing is happening when clicking on them, so I'd say that this is a (though rare to see) styling bug.

I suggest to simply only do these hover effects, if JS is enabled.
This is as simple as prepending the relevant CSS selectors with the ".js" class that we have (or not have) on <body>.

The attached patch does this for post metaboxes, as well as for the widgets page, where the same occurs under a different name.

Attachments (2)

21611.diff (5.7 KB) - added by TobiasBg 12 years ago.
(Refreshed) patch to fix CSS styling of metaboxes with disabled JS
21611-retina.diff (2.1 KB) - added by TobiasBg 12 years ago.
Fix this for retina displays as well

Download all attachments as: .zip

Change History (16)

#1 @SergeyBiryukov
12 years ago

  • Component changed from General to UI

#2 @TobiasBg
12 years ago

  • Keywords ui-feedback added

#3 @helenyhou
12 years ago

  • Component changed from UI to Administration
  • Keywords needs-refresh added; ui-feedback removed
  • Milestone changed from Awaiting Review to Future Release

Makes sense to me.

#4 @TobiasBg
12 years ago

  • Keywords 3.6-early added

Great :-)

I will gladly refresh the patch for the next dev cycle, as I assume that this comes to late for 3.5.

#5 @helenyhou
12 years ago

Patch just needs a refresh - doesn't really have much to do with which dev cycle.

#6 @TobiasBg
12 years ago

  • Keywords needs-refresh 3.6-early removed

Ah, I had misinterpreted you :-) I had thought that there are more changes necessary, due to recent CSS changes in core. Turned out that all that was needed was the switch to the new CSS file names.

So, here's the refreshed patch.

Last edited 12 years ago by TobiasBg (previous) (diff)

@TobiasBg
12 years ago

(Refreshed) patch to fix CSS styling of metaboxes with disabled JS

#7 @helenyhou
12 years ago

  • Keywords commit added
  • Milestone changed from Future Release to 3.5

This is so much better for no JS - I'd consider current behavior buggy looking and feeling. Makes perfect sense - let's do it.

#8 @nacin
12 years ago

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

In 22391:

For postboxes, only show arrows/handles on hover when JS is enabled. props TobiasBg. fixes #21611.

#9 @georgestephanis
12 years ago

Still showing on Retina displays. Patch forthcoming this evening if noone gets to it first.

http://cloud.stephanis.info/image/2h3k3H1q1R0H

#10 @helenyhou
12 years ago

  • Keywords needs-patch added; has-patch commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Seems we need to add that same selector to the media query blocks where applicable for HiDPI, even as unlikely as retina + no-JS seems.

#11 @TobiasBg
12 years ago

  • Keywords has-patch added; needs-patch removed

Sorry, must have missed these...

Here's a patch to also apply this change to retina. It would be great, if someone could test this, please.

@TobiasBg
12 years ago

Fix this for retina displays as well

#12 @georgestephanis
12 years ago

Tested and works!

#13 @helenyhou
12 years ago

  • Keywords commit added

#14 @nacin
12 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 22582:

For postboxes, only show arrows/handles on hover when JS is enabled (for HiDPI). props TobiasBg. fixes #21611.

Note: See TracTickets for help on using tickets.