WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#12202 closed task (blessed) (fixed)

Right Now box UI touch up

Reported by: janeforshort Owned by:
Milestone: 3.0 Priority: low
Severity: minor Version: 2.9.1
Component: UI Keywords: has-patch
Focuses: Cc:

Description

People are always getting confused by the Right Now box, thinking the items on the left and right relate to each other, rather than it being two distinct columns. Suggest a UI touch-up per recommendation from the UI group. Use attached screenshot as base, but use white buffer space instead of the heavy blue line, and make columns equally wide. windhamdavid and Gaston_ volunteered to code it up once there’s a trac ticket.

Attachments (9)

at-a-glance1.png (31.6 KB) - added by janeforshort 4 years ago.
12202.diff (18.5 KB) - added by matveb 4 years ago.
First patch for the Right Now module
12202.png (27.4 KB) - added by matveb 4 years ago.
Screenshot of the patch
12202.1.diff (6.9 KB) - added by matveb 4 years ago.
updated patch to only change dashboard.dev.css - test with SCRIPT_DEBUG
12202.1.diff-rightnow.png (44.8 KB) - added by windhamdavid 4 years ago.
12202.2.diff (7.1 KB) - added by matveb 4 years ago.
Now working fine with MS though it depends on #12237 to be seen when SCRIPT_DEBUG is defined.
rightnow.gif (10.2 KB) - added by markmcwilliams 4 years ago.
I'm not sure that big gap between the Right now and Content/Discussion? (View in IE7!)
12202.3.diff (574 bytes) - added by jfarthing84 4 years ago.
New hooks for new design.
dashboard_ie7.patch (1.3 KB) - added by ocean90 4 years ago.
make it valid and IE loves you

Download all attachments as: .zip

Change History (35)

janeforshort4 years ago

matveb4 years ago

First patch for the Right Now module

matveb4 years ago

Screenshot of the patch

comment:1 follow-up: matveb4 years ago

  • Keywords has-patch added; dashboard removed

Needs testing and some code check to see whether this is the best approach under the hood. I tried leaving markup as it was but the styling turned to be a mess.

comment:2 in reply to: ↑ 1 ptahdunbar4 years ago

Replying to matveb:

Needs testing and some code check to see whether this is the best approach under the hood. I tried leaving markup as it was but the styling turned to be a mess.

patch partially works for me.

patching file wp-admin/includes/dashboard.php
Hunk #5 FAILED at 303.
1 out of 9 hunks FAILED -- saving rejects to file wp-admin/includes/dashboard.php.rej
patching file wp-admin/css/dashboard.dev.css
patching file wp-admin/css/dashboard.css
ptah ~/www/wordpress/trac$

matveb4 years ago

updated patch to only change dashboard.dev.css - test with SCRIPT_DEBUG

comment:3 voyagerfan57614 years ago

  • Cc WordPress@… added

comment:4 scribu4 years ago

Patch applies clean

There's a tiny gap in the border, between each number and it's respective text. Is that intentional?

comment:5 windhamdavid4 years ago

I'm getting a strange S character lurking behind "space allowed"? (Safari 4.0.4 + FF 3.5.7)

comment:6 follow-up: matveb4 years ago

@Scribu: That gap was always there I think. I did not touch it. Can you confirm that it was already there before?

@windhamdavid: Is that screenshot form MU/MS? I should have tested with multisite.

comment:7 in reply to: ↑ 6 scribu4 years ago

Replying to matveb:

@Scribu: That gap was always there I think. I did not touch it. Can you confirm that it was already there before?

You're right. I can see it in WP 2.9.2.

comment:8 windhamdavid4 years ago

yes r13226 multi-side enabled.

matveb4 years ago

Now working fine with MS though it depends on #12237 to be seen when SCRIPT_DEBUG is defined.

comment:9 dd324 years ago

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

(In 13531) Split Right Now widget into Content | Discussion. Props matveb. Fixes #12202

comment:10 follow-up: jane4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened
  • Type changed from enhancement to task (blessed)

Chatted with Matt Thomas re some styling questions, so here's an additional set of styling requests from MT. Points 2 and 3 are coincidentally ones I raised earlier on the UI blog.

  • Remove the spacing between the numbers and their labels. There's a tiny break in the bottom border between the "78" and the "comments", for example, on my local installation.
  • Remove the grey background; don't think it's necessary
  • Remove the borders from around each column
  • Make the spacing between the two columns fixed width, so the amount of space between the columns doesn't grow along with the page.
  • I would probably leave some kind of light border between the "Content" header and the list below it (and the "Discussion" header and its list).

comment:11 in reply to: ↑ 10 nacin4 years ago

With formatting:

  • Remove the spacing between the numbers and their labels. There's a tiny break in the bottom border between the "78" and the "comments", for example, on my local installation.
  • Remove the grey background; don't think it's necessary
  • Remove the borders from around each column
  • Make the spacing between the two columns fixed width, so the amount of space between the columns doesn't grow along with the page.
  • I would probably leave some kind of light border between the "Content" header and the list below it (and the "Discussion" header and its list).

comment:12 dd324 years ago

(In [13594]) Styling update for RightNow Dashboard widget. See #12202

comment:13 dd324 years ago

(In [13594]) Styling update for RightNow Dashboard widget.

That should take care of some of the raised issues.

Remaining issues:

  • Remove the spacing between the numbers and their labels. There's a tiny break in the bottom border between the "78" and the "comments", for example, on my local installation.
  • Make the spacing between the two columns fixed width, so the amount of space between the columns doesn't grow along with the page.

As for the light break between the label and the rows, I've left the border to the top of the table, its not in a final resting place there, but should hopefully give something to start off.

I'm not sure how to handle the fixed width between the columns, Should the 2 small columns be aligned left/right/center? Is it going to look strange like that? Too much whitespace to one side or all the content bunched up in the middle..

comment:14 caesarsgrunt4 years ago

I don't like this change at all, and I consider it a regression. But if we are going to keep it, it needs at least to have some margin inserted on the outer sides of the tables as well as between them. Preferably the space should be even - the same between them as each side. And it would probably be better if the tables grew and shrunk rather than the space between them, if possible.

I think a better solution to this problem would have been a grey line down the middle of the table, similar to the horizontal divisions between items.

comment:15 caesarsgrunt4 years ago

Incidentally, I think it is much better in the latest nightly with the lines mostly removed.

I still think the spacing needs sorting out though.

markmcwilliams4 years ago

I'm not sure that big gap between the Right now and Content/Discussion? (View in IE7!)

comment:16 jfarthing844 years ago

Some existing hooks should be moved and maybe new ones added to reflect the new layout. As it is, it breaks anything hooked into the 'right_now_table_end'. There should now be a 'right_now_content_end' and 'right_now_discussion_end'. And then maybe a 'right_now_table_end' outside of the tables but before the upgrade section.

jfarthing844 years ago

New hooks for new design.

comment:17 dd324 years ago

(In [13867]) Add extra hooks to Right Now dashboard widget. Props jfarthing84. See #12202

comment:18 dd324 years ago

jfarthing84: As it is, it breaks anything hooked into the 'right_now_table_end'.

Can you elaborate on that more? Or do you have an example?

comment:19 jfarthing844 years ago

Well, the table is now split into two different tables, one for content and one for comments. The old way was just one table. So everything hooked onto 'rightnow_end' gets put into the second (comment) table only, therefore adding the two table columns to that one column table, completely messing up the layout. The fix that I implemented it would allow you to correctly hook into the content side and the comment side.

comment:20 demetris4 years ago

  • Cc dkikizas@… added

Since the day they first appeard, the new Content and Discussion headers are only a distraction to me. They make my eyes move vertically, and away from the important content of the module, only to offer me no new information at all.

And how can people think that “the items on the left and right relate to each other”? Do people mark “Categories” as “Pending” and “Tags” as “Spam”?

Please consider restoring this to its previous state!

Can’t we keep things simple in the UI?

comment:21 nacin4 years ago

(In [14098]) Fix Right Now ugliness in blue/classic theme. see #12202

comment:22 ryan4 years ago

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

comment:23 markmcwilliams4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

But what about the huge whitespace gab, as shown in the rightnow.gif attachment that I uploaded 2 months ago? If it's meant to look like that, I disagree, but could someone at least say? :) I think it's still a bug!

comment:24 follow-up: ryan4 years ago

I don't see such a gap.

comment:25 in reply to: ↑ 24 markmcwilliams4 years ago

Replying to ryan:

I don't see such a gap.

When I took the screenshot I was using IE7, I'm now using IE8 and still see that very same gap, and I see it in more than 1 install too! On opening up FF, I'll admit I can't see that gap either, which means it's IE related! :P

ocean904 years ago

make it valid and IE loves you

comment:26 nacin4 years ago

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

(In [14582]) Don't nest p tag inside the opening table tag in the new right now box. fixes IE display, and validation. fixes #12202, props ocean90.

Note: See TracTickets for help on using tickets.