Make WordPress Core

Opened 21 months ago

Closed 15 months ago

Last modified 12 months ago

#55272 closed enhancement (duplicate)

The New Layout Fix For Plugin Install Page

Reported by: sharjeelkhanvmi's profile sharjeelkhanvmi Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Plugins Keywords:
Focuses: ui, css, administration Cc:

Description

/*NEW CSS FOR PLUGIN INSTALL PAGE DESIGN IMPROVEMENTS 2022 FOR VERSION 5.9.1*/
.plugin-card .name 
{
    min-height: 30px;
    height: auto;
    margin-right: 0;
}
.plugin-card-top 
{
    min-height: 160px;
}
.widefat p 
{
    height: 40px;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 60px;
}
.plugin-card
{border-radius: 6px;}

.plugin-card .desc {
    margin-right: 00;
}

.plugin-card .action-links {
    position: absolute;
    bottom: 0;
    left: auto;
    top: auto;
    width: 300px;
}
.plugin-action-buttons 
{
    display: flex;
    flex-direction: row-reverse;
    vertical-align: bottom;
}
.plugin-action-buttons li 
{
    margin: 0px 8px;
    position: relative;
    vertical-align: bottom;
}
.plugin-action-buttons .thickbox.open-plugin-details-modal 
{
    position: relative;
    top: 10px;
}
.plugin-card .desc 
{
    display: flex;
    flex-direction: column-reverse;
}
.plugin-icon 
{
    border-radius: 6px;
}
.plugin-card-bottom 
{
    border-radius: 0px 0px 6px 6px;
}
.plugin-card h3 
{
    height: 20px;
    overflow: hidden;
    margin-bottom: 0;
}
.widefat p.authors 
{
    height: auto;
    margin-top: 8px;
    margin-bottom: 10px;
}
/*NEW CSS FOR PLUGIN INSTALL PAGE DESIGN IMPROVEMENTS 2022 FOR VERSION 5.9.1*/

Attachments (1)

CSS for Plugin Install Page.css (1.2 KB) - added by sharjeelkhanvmi 21 months ago.
CSS FOR PLUGIN INSTALL PAGE NEW DESIGN FIX CSS 2022 FOR VERSION 5.9.1

Download all attachments as: .zip

Change History (20)

@sharjeelkhanvmi
21 months ago

CSS FOR PLUGIN INSTALL PAGE NEW DESIGN FIX CSS 2022 FOR VERSION 5.9.1

#1 @sharjeelkhanvmi
21 months ago

BEFORE: https://i.snipboard.io/DMpixC.jpg
AFTER: https://i.snipboard.io/7clPIu.jpg

#2 follow-up: @audrasjb
21 months ago

  • Component changed from Upgrade/Install to Plugins
  • Keywords reporter-feedback added; needs-screenshots removed
  • Version 5.9.1 deleted

Hello @sharjeelkhanvmi, welcome to WordPress Core Trac and thank you for opening this ticket,

At a glance, it looks like you want to propose some change in this screen. Could you please provide a detailed description of what you want to achieve and why/how?

Thank you :)

#3 in reply to: ↑ 2 @sharjeelkhanvmi
21 months ago

Hello, I have done some changes to CSS in the install-plugin.php page you can view the after before screenshot here:

Before View of Install Plugin Page: https://i.snipboard.io/DMpixC.jpg
After View of Install Plugin Page: https://i.snipboard.io/7clPIu.jpg

Basically what i have done is move the Install button with a more detail button to the bottom and align all the boxes with the same height hide extra text in the plugin title and description and give some border-radius on the page.

Thanks you :)

Replying to audrasjb:

Hello @sharjeelkhanvmi, welcome to WordPress Core Trac and thank you for opening this ticket,

At a glance, it looks like you want to propose some change in this screen. Could you please provide a detailed description of what you want to achieve and why/how?

Thank you :)

#4 follow-up: @joyously
21 months ago

Does the new look account for the error messages that can be shown? The plugin can have a message about mismatched versions.
Also, does this still look good on smaller windows?
Also, if you want to rearrange the elements, change the HTML instead of using CSS, for accessibility reasons.

My own opinion is that the short description should not be chopped midsentence since it is already so short. I would rather see the version number in addition to what is already shown.

#5 follow-up: @SergeyBiryukov
21 months ago

  • Focuses administration added
  • Keywords needs-design-feedback added

#6 in reply to: ↑ 4 @sharjeelkhanvmi
21 months ago

Hello
I did not get your first point.
Yes, it Looks good in smaller windows as well.
Yes, right I need to rearrange elements but I do not know where to change them.

Yes if we add more description lines to show then it mismatches the alignment of the boxes yes it will be great to show the version number below the description as well.

Replying to joyously:

Does the new look account for the error messages that can be shown? The plugin can have a message about mismatched versions.
Also, does this still look good on smaller windows?
Also, if you want to rearrange the elements, change the HTML instead of using CSS, for accessibility reasons.

My own opinion is that the short description should not be chopped midsentence since it is already so short. I would rather see the version number in addition to what is already shown.

#7 in reply to: ↑ 5 ; follow-up: @sharjeelkhanvmi
21 months ago

What's that?
Replying to SergeyBiryukov:

#8 follow-up: @joyously
21 months ago

I did not get your first point.

The mismatched version error is shown at the top of the box. This alone can make the boxes uneven.
(This screenshot is my normal window width.)
https://i.postimg.cc/8zsLdQjp/Add-Plugins.jpg


Yes if we add more description lines to show then it mismatches the alignment of the boxes

I think it's more important to see the complete sentence of the description than to have even boxes.

#9 in reply to: ↑ 7 @SergeyBiryukov
21 months ago

Replying to sharjeelkhanvmi:

What's that?

Just editing the keywords and focus for better visibility, see Trac Workflow Keywords.

Replying to joyously:

I think it's more important to see the complete sentence of the description than to have even boxes.

I tend to agree, even boxes may look nice at a glance but it seems like they are not really feasible if we take full descriptions and plugin compatibility notices into account.

#10 in reply to: ↑ 8 @sharjeelkhanvmi
21 months ago

Okay, Then I need to fix the boxes sizes with the error message okay let me check what I can do then I update here.

Replying to joyously:

I did not get your first point.

The mismatched version error is shown at the top of the box. This alone can make the boxes uneven.
(This screenshot is my normal window width.)
https://i.postimg.cc/8zsLdQjp/Add-Plugins.jpg


Yes if we add more description lines to show then it mismatches the alignment of the boxes

I think it's more important to see the complete sentence of the description than to have even boxes.

#11 @sharjeelkhanvmi
21 months ago

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

Here is the Updated Code And New Fixes
You can check the errors and all the description is showing and all the layout will be now responsive it will be grid base now. here is the Screenshot: https://snipboard.io/fJvOE2.jpg
https://i.snipboard.io/fJvOE2.jpg

/*CSS CODE*/
div#the-list 
{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(30rem,1fr));
    grid-gap: 20px 10px;
}
.plugin-card .name 
{
    min-height: 30px;
    height: auto;
    margin-right: 0;
}
.widefat p 
{
    margin-top: 0;
    margin-bottom: 60px;
}
.plugin-card
{
    border-radius: 6px;
    position: relative;
    display: grid;
    margin: 0 !important;
}
.plugin-card .desc 
{
    margin-right: 00;
}
.plugin-card .action-links
{
    position: absolute;
    bottom: 0;
    left: auto;
    top: auto;
    width: 300px;
}
.plugin-action-buttons 
{
    display: flex;
    flex-direction: row-reverse;
    vertical-align: bottom;
}
.plugin-action-buttons li 
{
    margin: 0px 8px;
    position: relative;
    vertical-align: bottom;
}
.plugin-action-buttons .thickbox.open-plugin-details-modal 
{
    position: relative;
    top: 10px;
}
.plugin-card .desc 
{
    display: flex;
    flex-direction: column-reverse;
}
.plugin-icon 
{
    border-radius: 6px;
    border: 1px solid #dcdcde;
}
.plugin-card-bottom 
{
    border-radius: 0px 0px 6px 6px;
    position: relative;
    order: 3;
}
.plugin-card h3 
{
    margin-bottom: 0;
}
.widefat p.authors 
{
    height: auto;
    margin-top: 8px;
    margin-bottom: 10px;
}
.plugin-card .notice p 
{
    margin: 0;
    height: auto;
    overflow: initial;
    width: 100%;
}
.plugin-card .notice 
{
    display: flex;
    vertical-align: middle;
    margin: 0;
    margin-top: 0px;
    order: 1;
    border: unset;
}
.plugin-card 
{
    width: 100%;
}
Last edited 21 months ago by SergeyBiryukov (previous) (diff)

#12 @SergeyBiryukov
21 months ago

#55351 was marked as a duplicate.

#13 @SergeyBiryukov
21 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

#14 @joyously
21 months ago

I do not agree that the actionable elements should be moved.
The current way is that the title is first (clickable to get to plugin page), followed by the buttons to More Details or Install Now. This is good for visually parsing the page.
If you move the buttons to the bottom, the user has more to parse to find the buttons.

I think this page is fine. Don't try to fix what is not broken.

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


19 months ago

#17 @audrasjb
15 months ago

In 54149:

Plugins: Visually align plugin cards in Plugin Install screen.

This changeset adds a flexible CSS columns layout to plugin cards in the Plugin Install screen, to ensure plugin cards all have the same height.

Props jamesckemp, audrasjb, joyously, sabernhardt, sharjeelkhanvmi, joyously.
Fixes #55721.
See #55272.

#18 @SergeyBiryukov
15 months ago

  • Keywords reporter-feedback needs-design-feedback removed
  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from reopened to closed

Thanks again for the ticket! I believe this has been addressed in [54149] / #55721, feel free to reopen if not.

#19 @audrasjb
12 months ago

In 54871:

Plugins: Improve "No plugin found" message alignement in Plugins screen.

This changeset centers the "No plugin found" message in plugin search results.

Follow-up to [54149].

Props sruthi90, aparnajl, krupalpanchal, audrasjb, anantajitjg.
Fixes #57194.
See #55721, #55272.

Note: See TracTickets for help on using tickets.