woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

💄 Complete rewrite of the preview box styling

Browse source 
Original styling designed for one use case (variable number of buttons, floating on the far right side).

Meanwhile we have multiple preview boxes, displaying, a fixed or variable amount of buttons; some preview boxes are also positioned inside a “frame” that requires custom padding and responsive checks.
This commit is contained in:
Philipp Stracker 2024-06-27 19:42:39 +02:00
parent d1318d7247
commit f606b87c85
No known key found for this signature in database
2 changed files with 57 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

81
modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
View file

@ -1,56 +1,77 @@
.ppcp-settings-field-preview {
position: relative;
td {
padding-left: 0;
padding-right: 0;
}
}
.ppcp-preview { .ppcp-preview {
width: 350px; width: var(--box-width, 100%);
padding: 15px; padding: 15px;
border: 1px solid lightgray; border: 1px solid lightgray;
background: #eeeeef; background: #eeeeef;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 2px 10px 1px #ddd; box-shadow: 0 2px 10px 1px #ddd;
margin-right: -28px; margin-right: 0;
box-sizing: border-box;
// Preview box showing a single button.
&.ppcp-preview-single {
height: 82px;
@media (min-width: 1200px) {
margin-top: -149px;
}
@media (min-width: 601px) and (max-width: 1399px) {
margin-right: 10px;
}
}
h4 { h4 {
margin-top: 0; margin-top: 0;
} }
@media (min-width: 601px) {
--box-width: 382px;
}
@media (max-width: 782px) {
margin-top: 16px;
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
float: right; float: right;
margin-top: -300px; margin-top: -300px;
max-width: calc(100vw - 850px);
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
margin-right: 13%; margin-right: 12%;
} }
@media (min-width: 2000px) { @media (min-width: 2000px) {
margin-right: 42%; margin-right: 41%;
} }
@media (max-width: 600px) { // Align the preview box to the bottom of the form row and expand it upwards.
width: auto; // (The default layout above expands the box downwards)
margin-right: 0px; &.align-bottom {
} @media (min-width: 1200px) {
} position: absolute;
margin: 0;
right: 0;
bottom: 30px;
}
.ppcp-button-preview.pay-later { @media (min-width: 1400px) {
@media (min-width: 1200px) { right: 13%;
margin-top: -250px; }
}
}
.ppcp-button-preview.pay-later.disabled { @media (min-width: 2000px) {
@media (min-width: 1200px) { right: 42%;
margin-top: -152px; }
}
// Preview box showing a single button, that is displayed inside a "frame".
&.ppcp-preview-single {
@media (min-width: 1200px) {
margin-right: 20px;
bottom: 50px;
max-width: calc(100vw - 880px);
}
@media (min-width: 1400px) {
margin-right: -20px;
}
} }
} }

6
modules/ppcp-wc-gateway/src/Settings/SettingsRenderer.php
View file

@ -517,6 +517,12 @@ $data_rows_html
$classes[] = 'ppcp-preview-single'; $classes[] = 'ppcp-preview-single';
} }
// Preview boxes that display a specific button type are always displayed in the bottom
// edge of the relevant button's settings.
if ( $which && 'all' !== $which ) {
$classes[] = 'align-bottom';
}
printf( printf(
'<div class="ppcp-preview %1$s" %5$s> '<div class="ppcp-preview %1$s" %5$s>
<h4>%2$s</h4> <h4>%2$s</h4>