Make WordPress Core

Opened 2 years ago

Closed 21 months ago

Last modified 18 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 2 years 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
2 years ago

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

#1 @sharjeelkhanvmi
2 years ago

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

#2 follow-up: @audrasjb
2 years 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
2 years 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
2 years 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
2 years ago

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

#6 in reply to: ↑ 4 @sharjeelkhanvmi
2 years 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
2 years ago

What's that?
Replying to SergeyBiryukov:

#8 follow-up: @joyously
2 years 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
2 years 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
2 years 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
2 years 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 2 years ago by SergeyBiryukov (previous) (diff)

#12 @SergeyBiryukov
2 years ago

#55351 was marked as a duplicate.

#13 @SergeyBiryukov
2 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

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


2 years ago

#17 @audrasjb
21 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
21 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
18 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.