diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index f6105ad5a59fb..6cc8c04701422 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -1458,7 +1458,6 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { margin: 0 5px 0 -2px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - vertical-align: top; } .plugin-card .updating-message::before { @@ -1483,6 +1482,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { content: "\f147" / ""; } +.plugin-card .update-now::before, .plugin-card .updated-message::before, .plugin-card .updating-message::before { line-height: 1; @@ -1547,9 +1547,17 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { } .plugin-card-top { + display: grid; + grid-template-columns: 128px minmax(0, 1fr); + grid-template-rows: 1fr auto; + grid-template-areas: + "icon info" + "actions actions"; + column-gap: 24px; + row-gap: 8px; position: relative; padding: 16px; - min-height: 135px; + flex: 1 1 auto; } div.action-links, @@ -1558,32 +1566,37 @@ div.action-links, } .plugin-card h3 { - margin: 0 12px 16px 0; + margin: 0 0 16px; font-size: 18px; line-height: 1.3; } -.plugin-card .desc { - margin-inline: 0; +.plugin-card .plugin-icon { + grid-area: icon; + width: 128px; + height: 128px; } -.plugin-card .name, -.plugin-card .desc > p { - margin-left: 148px; +/* Stretch the title link over the icon so clicking the icon opens the details modal. */ +.plugin-card .name a::after { + content: ""; + position: absolute; + inset-block-start: 16px; + inset-inline-start: 16px; + width: 128px; + height: 128px; } -@media (min-width: 1101px) { - .plugin-card .name, - .plugin-card .desc > p { - margin-right: 128px; - } +.plugin-card-info { + grid-area: info; + display: flex; + flex-direction: column; } -@media (min-width: 481px) and (max-width: 781px) { - .plugin-card .name, - .plugin-card .desc > p { - margin-right: 128px; - } +.plugin-card .action-links { + grid-area: actions; + padding-top: 16px; + border-top: 1px solid rgba(0, 0, 0, 0.1); } .plugin-card .column-description { @@ -1646,26 +1659,18 @@ div.action-links, margin-top: 1em; } -.plugin-card .action-links { - position: absolute; - top: 20px; - right: 20px; - width: 120px; -} - .plugin-action-buttons { - clear: right; - float: right; - margin-bottom: 1em; - text-align: right; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 16px; } .plugin-action-buttons li { - margin-bottom: 10px; + margin: 0; } .plugin-card-bottom { - clear: both; padding: 16px; background-color: #f6f7f7; border-top: 1px solid rgba(0, 0, 0, 0.1); @@ -1745,15 +1750,6 @@ div.action-links, margin: 20px 20px 0; } -.plugin-card .plugin-icon { - position: absolute; - top: 20px; - left: 20px; - width: 128px; - height: 128px; - margin: 0 20px 20px 0; -} - .no-plugin-results { color: #646970; /* same as no themes and no media */ font-size: 18px; @@ -1792,42 +1788,6 @@ div.action-links, /* =Media Queries -------------------------------------------------------------- */ -@media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) { - .plugin-card .action-links { - position: static; - margin-left: 148px; - width: auto; - } - - .plugin-action-buttons { - float: none; - margin: 1em 0 0; - text-align: left; - } - - .plugin-action-buttons li { - display: inline-block; - vertical-align: middle; - } - - .plugin-action-buttons li .button { - margin-right: 20px; - } - - .plugin-card h3 { - margin-right: 24px; - } - - .plugin-card .name, - .plugin-card .desc { - margin-right: 0; - } - - .plugin-card .desc p:first-of-type { - margin-top: 0; - } -} - @media screen and (max-width: 782px) { /* WP List Table Options & Filters */ .tablenav { diff --git a/src/wp-admin/includes/class-wp-plugin-install-list-table.php b/src/wp-admin/includes/class-wp-plugin-install-list-table.php index 3f6d2a104d099..0c4e0af729cd4 100644 --- a/src/wp-admin/includes/class-wp-plugin-install-list-table.php +++ b/src/wp-admin/includes/class-wp-plugin-install-list-table.php @@ -742,13 +742,19 @@ public function display_rows() { } ?>