Improve free plugins tile layout: Implement consistent grid layout matching pro plugins section, add responsive design with breakpoints, improve spacing and alignment, standardize styling, fix mobile layout, add hover effects
This commit is contained in:
Marcus Quinn
@ -1008,69 +1008,122 @@ body.wp-admin .button.pricing-button:hover,
|
|||||||
.wp-allstars-tab-content .wp-allstars-toggle,
|
.wp-allstars-tab-content .wp-allstars-toggle,
|
||||||
#readme .wpa-pro-plugin {
|
#readme .wpa-pro-plugin {
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
margin: 0 auto 20px auto; /* Added bottom margin for spacing */
|
margin: 0 auto 20px auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0; /* Remove padding here, add it to inner elements */
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Free Plugins - Simple centered tile layout */
|
/* Free Plugins - Grid Layout matching Pro Plugins */
|
||||||
#recommended .plugin-card {
|
#recommended .wpa-plugin-container {
|
||||||
width: 800px;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0 auto 20px;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-sizing: border-box;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#recommended .plugin-card {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 24px;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
border-radius: 8px;
|
||||||
position: relative;
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||||
padding-bottom: 60px;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
justify-self: center;
|
transition: all 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fix compatibility row alignment to bottom of card */
|
#recommended .plugin-card:hover {
|
||||||
#recommended .plugin-card .plugin-card-bottom {
|
border-color: #2271b1;
|
||||||
position: absolute;
|
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 15px;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
text-align: center;
|
|
||||||
background: #f9f9f9;
|
|
||||||
height: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Basic plugin card elements */
|
|
||||||
#recommended .plugin-card-top {
|
#recommended .plugin-card-top {
|
||||||
|
padding: 0;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
text-align: left;
|
min-height: auto;
|
||||||
}
|
flex-grow: 1;
|
||||||
|
|
||||||
#recommended .plugin-card .name h3 {
|
|
||||||
margin: 0 0 15px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#recommended .plugin-card .desc {
|
|
||||||
margin: 15px 0;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.5;
|
|
||||||
clear: none;
|
|
||||||
text-align: left;
|
|
||||||
margin-left: 115px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#recommended .plugin-card .plugin-icon {
|
#recommended .plugin-card .plugin-icon {
|
||||||
|
position: relative;
|
||||||
float: left;
|
float: left;
|
||||||
margin: 0 15px 15px 0;
|
width: 64px;
|
||||||
width: 100px;
|
height: 64px;
|
||||||
height: 100px;
|
margin: 0 20px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#recommended .plugin-card .name,
|
||||||
|
#recommended .plugin-card .desc {
|
||||||
|
margin-left: 84px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#recommended .plugin-card .name h3 {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1d2327;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#recommended .plugin-card .desc {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #50575e;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
#recommended .plugin-card .action-links {
|
#recommended .plugin-card .action-links {
|
||||||
margin: 15px 0 25px;
|
position: static;
|
||||||
text-align: right;
|
margin-top: 16px;
|
||||||
|
width: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#recommended .plugin-card .plugin-action-buttons {
|
||||||
|
margin: 0;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#recommended .plugin-card .plugin-card-bottom {
|
||||||
|
background: #f6f7f7;
|
||||||
|
padding: 15px;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media screen and (max-width: 960px) {
|
||||||
|
#recommended .wpa-plugin-container {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
#recommended .plugin-card {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 782px) {
|
||||||
|
#recommended .wpa-plugin-container {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
#recommended .plugin-card {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
#recommended .plugin-card .action-links .button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style compatibility message */
|
/* Style compatibility message */
|
||||||
@ -1089,14 +1142,6 @@ body.wp-admin .button.pricing-button:hover,
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#recommended .wpa-plugin-container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 15px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Explicitly target readme content */
|
/* Explicitly target readme content */
|
||||||
#readme .wp-allstars-markdown-content {
|
#readme .wp-allstars-markdown-content {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|||||||
@ -1,34 +1,28 @@
|
|||||||
/* Plugin Browser Styles */
|
/* Plugin Browser Styles */
|
||||||
.wp-allstars-wrap .wp-allstars-plugin-browser {
|
.wp-allstars-wrap .wp-allstars-plugin-browser {
|
||||||
margin: 0 -8px !important;
|
margin: 0 !important;
|
||||||
padding: 0 8px !important;
|
padding: 0 !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Plugin List Container */
|
/* Plugin List Container */
|
||||||
.wp-allstars-wrap #wpa-plugin-list {
|
.wp-allstars-wrap #wpa-plugin-list {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-wrap: wrap;
|
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
padding: 20px;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Filter Bar */
|
/* Filter Bar */
|
||||||
.wp-allstars-wrap #wpa-plugin-filters.wp-filter {
|
.wp-allstars-wrap #wpa-plugin-filters.wp-filter {
|
||||||
margin-left: 0;
|
margin: 0 0 22px 0 !important;
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: 22px !important; /* Enforce exact 22px spacing */
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
text-align: center; /* Center align filter bar content */
|
text-align: center;
|
||||||
}
|
|
||||||
|
|
||||||
/* Standard WordPress Plugin Grid Layout - exactly matching core */
|
|
||||||
.wp-allstars-wrap .wp-list-table.plugin-install {
|
|
||||||
margin-top: 0; /* Removed to prevent double spacing with container */
|
|
||||||
clear: both;
|
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Center filter links */
|
/* Center filter links */
|
||||||
@ -43,17 +37,10 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-allstars-wrap #the-list {
|
/* Plugin Cards */
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Plugin Cards - essential layout only */
|
|
||||||
.plugin-card {
|
.plugin-card {
|
||||||
margin: 0 8px 16px;
|
margin: 0 !important;
|
||||||
width: calc(50% - 16px);
|
width: 100% !important;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid #dcdcde;
|
border: 1px solid #dcdcde;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@ -61,6 +48,8 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plugin-card:hover {
|
.plugin-card:hover {
|
||||||
@ -68,23 +57,90 @@
|
|||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ensure the right edge aligns with the navigation above */
|
/* Card Content */
|
||||||
.plugin-card:nth-child(even) {
|
.plugin-card-top {
|
||||||
margin-right: 0;
|
padding: 24px !important;
|
||||||
|
position: relative;
|
||||||
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plugin-card:nth-child(odd) {
|
.plugin-icon {
|
||||||
margin-left: 0;
|
position: relative !important;
|
||||||
|
float: left !important;
|
||||||
|
width: 64px !important;
|
||||||
|
height: 64px !important;
|
||||||
|
margin: 0 20px 0 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Consistent styling for all widths */
|
.name.column-name {
|
||||||
/* Force equal spacing between all cards */
|
margin: 0 0 12px 84px !important;
|
||||||
.plugin-card:nth-child(odd) {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.plugin-card:nth-child(even) {
|
.name.column-name h3 {
|
||||||
margin-left: 8px;
|
font-size: 16px !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
margin: 0 0 12px !important;
|
||||||
|
color: #1d2327 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc.column-description {
|
||||||
|
margin: 0 0 16px 84px !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.6 !important;
|
||||||
|
color: #50575e !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Action Links */
|
||||||
|
.action-links {
|
||||||
|
position: static !important;
|
||||||
|
margin-top: 16px !important;
|
||||||
|
width: auto !important;
|
||||||
|
display: flex !important;
|
||||||
|
flex-wrap: wrap !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-action-buttons {
|
||||||
|
margin: 0 !important;
|
||||||
|
float: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card-bottom {
|
||||||
|
background: #f6f7f7 !important;
|
||||||
|
padding: 15px !important;
|
||||||
|
border-top: 1px solid #ddd !important;
|
||||||
|
text-align: center !important;
|
||||||
|
margin-top: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Adjustments */
|
||||||
|
@media screen and (max-width: 960px) {
|
||||||
|
.wp-allstars-wrap #wpa-plugin-list {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card-top {
|
||||||
|
padding: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 782px) {
|
||||||
|
.wp-allstars-wrap #wpa-plugin-list {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card-top {
|
||||||
|
padding: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-links .button {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Global plugin icon positioning that applies to all viewport sizes */
|
/* Global plugin icon positioning that applies to all viewport sizes */
|
||||||
@ -250,13 +306,6 @@ body.wp-admin .plugin-card-bottom {
|
|||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: 0 !important;
|
|
||||||
max-width: none !important;
|
|
||||||
clear: both !important;
|
|
||||||
width: 100% !important;
|
|
||||||
box-sizing: border-box !important;
|
|
||||||
border-bottom-left-radius: 8px !important;
|
|
||||||
border-bottom-right-radius: 8px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove excessive spacing between elements */
|
/* Remove excessive spacing between elements */
|
||||||
@ -418,7 +467,6 @@ body.wp-admin .plugin-card-bottom .compatibility-untested *,
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.plugin-card:hover {
|
.plugin-card:hover {
|
||||||
border-color: #999;
|
border-color: #999;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user