Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 4 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 2 years ago.
Currently looking like this
Dashboard-‹-wpextended-—-WordPress (1).png (210.7 KB) - added by sumitsingh 2 years ago.
My suggetion
58114.diff (466 bytes) - added by dhrumilk 2 years ago.
image (3).png (43.9 KB) - added by chiragrathod103 2 years 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 2 years ago.
Current implementation (before patch)
Capture d’écran 2023-04-11 à 14.45.09.png (146.2 KB) - added by audrasjb 2 years ago.
After patch - LTR
Capture d’écran 2023-04-11 à 14.45.46.png (145.4 KB) - added by audrasjb 2 years ago.
After patch - RTL

Download all attachments as: .zip

Change History (27)

@sumitsingh
2 years ago

Currently looking like this

#1 @SergeyBiryukov
2 years ago

  • Milestone changed from Awaiting Review to 6.3

@dhrumilk
2 years ago

#2 @chiragrathod103
2 years ago

  • Keywords has-patch added

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

@chiragrathod103
2 years ago

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

#3 @kebbet
2 years 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
2 years ago

Current implementation (before patch)

#4 @audrasjb
2 years 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
2 years ago

  • Ignore this. I didn't read AudrasJB's comment to well.
Last edited 2 years ago by NekoJonez (previous) (diff)

#6 @kebbet
2 years ago

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

#7 @audrasjb
2 years 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
2 years 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
2 years 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
2 years 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.


2 years 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
2 years 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:


2 years 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:


2 years 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:


2 years ago
#15

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

@audrasjb commented on PR #4319:


2 years 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
2 years 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
2 years 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.

This ticket was mentioned in Slack in #accessibility by dhrumilk. View the logs.


4 months ago

Note: See TracTickets for help on using tickets.