[wp-trac] [WordPress Trac] #55272: The New Layout Fix For Plugin Install Page

[WordPress Trac]

#55272: The New Layout Fix For Plugin Install Page
-------------------------------------+-------------------------------------
 Reporter:  sharjeelkhanvmi          |       Owner:  (none)
     Type:  enhancement              |      Status:  closed
 Priority:  normal                   |   Milestone:  Awaiting Review
Component:  Plugins                  |     Version:
 Severity:  normal                   |  Resolution:  invalid
 Keywords:  reporter-feedback        |     Focuses:  ui, css,
  needs-design-feedback              |  administration
-------------------------------------+-------------------------------------
Changes (by sharjeelkhanvmi):

 * status:  new => closed
 * resolution:   => invalid


Comment:

 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
 [[Image(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%;
 }

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55272#comment:11>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform