#55272 closed enhancement (duplicate)
The New Layout Fix For Plugin Install Page
Reported by: | 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)
Change History (20)
#2
follow-up:
↓ 3
@
3 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
@
3 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:
↓ 6
@
3 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.
#6
in reply to:
↑ 4
@
3 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.
#8
follow-up:
↓ 10
@
3 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.)
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
@
3 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
@
3 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.)
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
@
3 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
/*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%; }
#14
@
3 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.
CSS FOR PLUGIN INSTALL PAGE NEW DESIGN FIX CSS 2022 FOR VERSION 5.9.1