Adjust recommended item to used stylized checkbox

This commit is contained in:
Paul Dechov 2018-05-07 09:39:44 -04:00
parent 1898234158
commit a611c1e329
3 changed files with 22 additions and 15 deletions

View File

@ -1242,7 +1242,7 @@ p.jetpack-terms {
} }
} }
.recommended-step { .wc-setup-content .recommended-step {
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
border-radius: 4px; border-radius: 4px;
padding: 2.5em; padding: 2.5em;
@ -1250,15 +1250,22 @@ p.jetpack-terms {
li { li {
list-style: none; list-style: none;
&:last-child .recommended-item { &:last-child label {
margin-bottom: 0; // Avoid extra space at the end of the list. margin-bottom: 0; // Avoid extra space at the end of the list.
} }
} }
.recommended-item { label {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 1.5em; margin-bottom: 1.5em;
&:before, &:after {
top: auto;
}
&:after {
margin-top: -1.5px;
}
} }
.recommended-item-icon { .recommended-item-icon {
@ -1266,7 +1273,7 @@ p.jetpack-terms {
border-radius: 7px; border-radius: 7px;
height: 3.5em; height: 3.5em;
margin-right: 1em; margin-right: 1em;
margin-left: 1em; margin-left: 4px;
&.recommended-item-icon-storefront_theme { &.recommended-item-icon-storefront_theme {
background-color: #f4a224; background-color: #f4a224;

View File

@ -207,7 +207,7 @@ jQuery( function( $ ) {
} ); } );
} ); } );
$( '.recommended-item-checkbox:checked' ).each( function() { $( '.recommended-item input:checked' ).each( function() {
addPlugins( pluginLinkBySlug, $( this ), '.recommended-item' ); addPlugins( pluginLinkBySlug, $( this ), '.recommended-item' );
} ); } );

View File

@ -1682,16 +1682,16 @@ class WC_Admin_Setup_Wizard {
$img_url = $item_info['img_url']; $img_url = $item_info['img_url'];
$img_alt = $item_info['img_alt']; $img_alt = $item_info['img_alt'];
?> ?>
<li> <li class="recommended-item checkbox">
<label class="recommended-item">
<input <input
class="recommended-item-checkbox" id="<?php echo esc_attr( 'wc_recommended_' . $type ); ?>"
type="checkbox" type="checkbox"
name="<?php echo esc_attr( 'setup_' . $type ); ?>" name="<?php echo esc_attr( 'setup_' . $type ); ?>"
value="yes" value="yes"
checked checked
data-plugins="<?php echo esc_attr( json_encode( isset( $item_info['plugins'] ) ? $item_info['plugins'] : null ) ); ?>" data-plugins="<?php echo esc_attr( json_encode( isset( $item_info['plugins'] ) ? $item_info['plugins'] : null ) ); ?>"
/> />
<label for="<?php echo esc_attr( 'wc_recommended_' . $type ); ?>">
<img <img
src="<?php echo esc_url( $img_url ); ?>" src="<?php echo esc_url( $img_url ); ?>"
class="<?php echo esc_attr( 'recommended-item-icon-' . $type ); ?> recommended-item-icon" class="<?php echo esc_attr( 'recommended-item-icon-' . $type ); ?> recommended-item-icon"