Dashboard: set ”Activity”-widget layout to columns

[sumitsingh]

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;
}

[sumitsingh]

Currently looking like this

[sumitsingh]

My suggetion

[chiragrathod103]

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

[chiragrathod103]

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

[kebbet]

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]

Current implementation (before patch)

[audrasjb]

After patch - LTR

[audrasjb]

After patch - RTL

[audrasjb]

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.

[NekoJonez]

• Ignore this. I didn't read AudrasJB's comment to well.

[audrasjb]

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

[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.

[sumitsingh]

@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.

[kebbet]

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.

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

## LTR - before (below)

## LTR - after (below)

## RTL - before (below)

## RTL - after (below)

[pooja1210]

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!

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

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.

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

Before patch:

After patch:

[audrasjb]

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.

[audrasjb]

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.

Committed in https://core.trac.wordpress.org/changeset/55889