Make WordPress Core

Opened 14 months ago

Closed 12 months ago

Last modified 12 months ago

#58114 closed defect (bug) (fixed)

Dashboard: set ”Activity”-widget layout to columns

Reported by: sumitsingh's profile sumitsingh Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch has-screenshots commit
Focuses: ui, accessibility, css, administration Cc:

Description

Hi,

I am thinking can we do 2 columns on the Activity meta box? similar to Site Health Status meta box. For more information see mentioned screenshot.

Below is CSS for a solution as per my through.

div#dashboard_activity #published-posts li {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: minmax(25px,auto);
    column-gap: 10px;
}

Attachments (7)

Dashboard-‹-wpextended-—-WordPress.png (222.3 KB) - added by sumitsingh 14 months ago.
Currently looking like this
Dashboard-‹-wpextended-—-WordPress (1).png (210.7 KB) - added by sumitsingh 14 months ago.
My suggetion
58114.diff (466 bytes) - added by dhrumilk 14 months ago.
image (3).png (43.9 KB) - added by chiragrathod103 14 months ago.
After 58114.diff apply it will look as below, and looking good to me.
Capture d’écran 2023-04-11 à 14.44.57.png (144.0 KB) - added by audrasjb 14 months ago.
Current implementation (before patch)
Capture d’écran 2023-04-11 à 14.45.09.png (146.2 KB) - added by audrasjb 14 months ago.
After patch - LTR
Capture d’écran 2023-04-11 à 14.45.46.png (145.4 KB) - added by audrasjb 14 months ago.
After patch - RTL

Download all attachments as: .zip

Change History (26)

@sumitsingh
14 months ago

Currently looking like this

#1 @SergeyBiryukov
14 months ago

  • Milestone changed from Awaiting Review to 6.3

@dhrumilk
14 months ago

#2 @chiragrathod103
14 months ago

  • Keywords has-patch added

Thanks, @dhrumilk The Patch 58114.diff looks good to me.

@chiragrathod103
14 months ago

After 58114.diff apply it will look as below, and looking good to me.

#3 @kebbet
14 months ago

  • Keywords needs-testing needs-screenshots added; has-screenshots removed

What does the patch look like on other locales than us_EN? Can the date/time format become longer? How does it look like on a RTL-locale?

@audrasjb
14 months ago

Current implementation (before patch)

#4 @audrasjb
14 months ago

  • Keywords has-screenshots added; needs-testing needs-screenshots removed
  • Owner set to audrasjb
  • Status changed from new to accepted
  • Version trunk deleted

This looks good to me.
There is a small WPCS issue (indentation) in the proposed patch, but this can be fixed directly when committing the changeset.

#5 @NekoJonez
14 months ago

Is it me, or is the attached patch in this ticket not linted correctly?
Since, line 900 - 902 don't show on the same line as the others...

Version 0, edited 14 months ago by NekoJonez (next)

#6 @kebbet
14 months ago

  • Focuses css added
  • Summary changed from Small UI issue on dashboard page to Dashboard: set ”Activity”-widget layout to columns

#7 @audrasjb
14 months ago

It still looks pretty good to me, but maybe we could reduce a bit the spacing between the two cols? Any thought?

#8 follow-up: @kebbet
14 months ago

Looking at the css code, the span-tag that holds date time has a min-width of 150px defined, and a margin-right. This can be removed, and clamp(150px, calc(1vw + 150px), 200px) auto; or similar can be added to the parent li-element. This reduces the gap.

#9 in reply to: ↑ 8 @sumitsingh
14 months ago

@kebbet I agree with what you suggested clamp things.

Replying to kebbet:

Looking at the css code, the span-tag that holds date time has a min-width of 150px defined, and a margin-right. This can be removed, and clamp(150px, calc(1vw + 150px), 200px) auto; or similar can be added to the parent li-element. This reduces the gap.

#10 @kebbet
14 months ago

  • Keywords needs-refresh added

Testing with future dates and passed dates gives long strings in the time/date column.

  • With the solution in core, the post title is pushed a bit to the side (right/left depending on ltr/rtl).
  • With suggested solution the time/date column line breaks.

By adjusting the width to 160px I can not get the date/time to line break, but it is possible if locales chooses to use longer date formats than shortend ones (en_US uses Apr. and Mar.)

  • Are we ok with line breaks in date/time column?

I'll submit a PR soon with an updated solution and some minor design tweaks.

This ticket was mentioned in PR #4319 on WordPress/wordpress-develop by @kebbet.


14 months ago
#11

  • Keywords needs-refresh removed

https://core.trac.wordpress.org/ticket/58114

## LTR - before (below)
https://i0.wp.com/user-images.githubusercontent.com/11491369/231385704-a9306778-8973-416f-87b0-f4cd48709de6.png

## LTR - after (below)
https://i0.wp.com/user-images.githubusercontent.com/11491369/231386040-a7268fb4-9abe-4566-921e-62ea6de4f029.png

## RTL - before (below)
https://i0.wp.com/user-images.githubusercontent.com/11491369/231387186-4c222d7d-b6d1-4905-9b55-aa9b9fa540df.png

## RTL - after (below)
https://i0.wp.com/user-images.githubusercontent.com/11491369/231387042-f2ddb8b8-f5e7-4892-a588-d229f516aded.png

#12 @pooja1210
12 months ago

Hi,

Test report for - https://github.com/WordPress/wordpress-develop/pull/4319

Test Environment:
WordPress - v6.2.2
OS: Mac
Browser: Chrome

Expected Result: Recent activity layout column should be visible properly ☑️

Screenshots:

Before:
LTR: https://prnt.sc/4hbM9mMwdxxJ
RTL: https://prnt.sc/2jIoG4gnkCEd

After:
LTR: https://prnt.sc/rKgaDQD_hevs
RTL: https://prnt.sc/a6I58PPlvz7b

So the patch is working as expected.

Thanks!

@audrasjb commented on PR #4319:


12 months ago
#13

Hey @kebbet it looks like there is something wrong in your fourth PR: we seems to have even/odd background on filters, too… 🤔

@kebbet commented on PR #4319:


12 months ago
#14

Thanks for the heads up @audrasjb Looking at the CSS, and spinning up the dev environment again, I can not recreate my screenshot of the filters. Strange indeed, but the code in this PR looks ok to me.

Screenshot of RTL-version, with current PR.
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/11491369/e73d6ee8-f7a9-4f2f-b590-03ec310da46c

@audrasjb commented on PR #4319:


12 months ago
#15

Ok thanks for the confirmation! I'll have a look then :)

@audrasjb commented on PR #4319:


12 months ago
#16

Before patch:
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/1590998/ed9178c8-2ee9-455b-b08b-1c08c35f7da4

After patch:
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/1590998/c998804a-b1c1-4ba0-9d98-f78917e644c8

#17 @audrasjb
12 months ago

  • Keywords commit added

While the odd/even background color is not used anywhere else on the dashboard widgets, I think it's fine to visually separate each line.

The patch looks good to me and was succesfuly tested on RTL and small screens. Let's ship it.

#18 @audrasjb
12 months ago

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

In 55889:

Administration: Improve alignment in the Activity dashboard widget.

This changeset sets column layout to posts listed in the Activity dashboard widget to prevent alignement issues on line breaks.

Props sumitsingh, dhrumilk, chiragrathod103, kebbet, audrasjb, pooja1210.
Fixes #58114.

Note: See TracTickets for help on using tickets.