Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix product-related banner's image position

This commit is contained in:
Timur Gogolev 2021-10-07 15:27:28 +03:00 committed by And Finally
parent 2b0f3d1182
commit 038ca86abb
2 changed files with 47 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/css/admin.scss
View File

@ -358,7 +358,8 @@
overflow: hidden;
// TODO: check on different screen sizes
.product.addons-product-banner {
.product.addons-product-banner,
.product.addons-buttons-banner {
max-width: calc(100% - 2px);
}
@ -392,11 +393,14 @@
}
.product-details {
align-items: start;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 24px;
.product-img-wrap {
display: block;
float: right;
margin-left: 24px;
img {
@ -408,6 +412,15 @@
}
}
&.addon-product-banner-details {
align-items: center;
.product-img-wrap img {
max-width: 150px;
max-height: 150px;
}
}
h2,
h3 {
color: #007cba;

53
includes/admin/class-wc-admin-addons.php
View File

@ -200,7 +200,7 @@ class WC_Admin_Addons {
// Render a banner with buttons.
?>
<ul class="products">
<li class="product addons-product-banner addons-buttons-banner">
<li class="product addons-buttons-banner">
<div class="addons-buttons-banner-image"
style="background-image:url(<?php echo esc_url( $block->image ); ?>)"
title="<?php echo esc_attr( $block->image_alt ); ?>"></div>
@ -344,6 +344,10 @@ class WC_Admin_Addons {
// Icon.
$mapped->icon = $data->icon ?? null;
if ( null === $mapped->icon && 'banner' === $type ) {
// For product-related banners icon is a product's image.
$mapped->icon = $data->image ?? null;
}
// URL.
$mapped->url = $data->link ?? null;
if ( empty( $mapped->url ) ) {
@ -414,34 +418,41 @@ class WC_Admin_Addons {
if ( null !== $block_type ) {
$class_names[] = 'addons-product-' . $block_type;
}
$product_details_classes = 'product-details';
if ( 'banner' === $block_type ) {
$product_details_classes .= ' addon-product-banner-details';
}
?>
<li class="<?php echo esc_attr( implode( ' ', $class_names ) ); ?>">
<div class="product-details">
<div class="<?php echo esc_attr( $product_details_classes ); ?>">
<div class="product-text-container">
<a href="<?php echo esc_url( $product_url ); ?>">
<h2><?php echo esc_html( $mapped->title ); ?></h2>
</a>
<?php if ( ! empty( $mapped->vendor_name ) && ! empty( $mapped->vendor_url ) ) : ?>
<div class="product-developed-by">
<?php
printf(
/* translators: %s vendor link */
esc_html__( 'Developed by %s', 'woocommerce' ),
sprintf(
'<a class="product-vendor-link" href="%1$s" target="_blank">%2$s</a>',
esc_url_raw( $mapped->vendor_url ),
wp_kses_post( $mapped->vendor_name )
)
);
?>
</div>
<?php endif; ?>
<p><?php echo wp_kses_post( $mapped->description ); ?></p>
</div>
<?php if ( ! empty( $mapped->icon ) ) : ?>
<span class="product-img-wrap">
<?php /* Show an icon if it exists */ ?>
<img src="<?php echo esc_url( $mapped->icon ); ?>" />
</span>
<?php endif; ?>
<a href="<?php echo esc_url( $product_url ); ?>">
<h2><?php echo esc_html( $mapped->title ); ?></h2>
</a>
<?php if ( ! empty( $mapped->vendor_name ) && ! empty( $mapped->vendor_url ) ) : ?>
<div class="product-developed-by">
<?php
printf(
/* translators: %s vendor link */
esc_html__( 'Developed by %s', 'woocommerce' ),
sprintf(
'<a class="product-vendor-link" href="%1$s" target="_blank">%2$s</a>',
esc_url_raw( $mapped->vendor_url ),
wp_kses_post( $mapped->vendor_name )
)
);
?>
</div>
<?php endif; ?>
<p><?php echo wp_kses_post( $mapped->description ); ?></p>
</div>
<div class="product-footer">
<div class="product-price-and-reviews-container">