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

Fix layout issues after merges (https://github.com/woocommerce/woocommerce-blocks/pull/1968) 

* Fix address form layout broken because select was occupying too much space

* Fix shipping rates appearing in the Checkout sidebar

* Center button text
This commit is contained in:
Albert Juhé Lluveras 2020-03-16 14:13:04 +01:00 committed by GitHub
parent 8d76bcb33e
commit 361d924c11
8 changed files with 78 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss
View File

@ -2,14 +2,16 @@
.wc-block-cart,
.wc-block-checkout {
.button.wc-block-button {
align-items: center;
background-color: #000 !important;
color: #fff !important;
display: block;
display: flex;
font-size: inherit;
font-weight: bold;
height: 48px; // same height as text-input
justify-content: center;
line-height: 1;
padding: $gap-small;
padding: 0 $gap-small;
text-align: center;
text-decoration: none;
text-transform: none;

1
plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
View File

@ -1,4 +1,5 @@
.wc-block-select {
height: 48px;
position: relative;
margin-top: $gap;

27
plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/index.js
View File

@ -15,6 +15,7 @@ import { useShippingRates } from '@woocommerce/base-hooks';
import TotalsItem from '../totals-item';
import ShippingRateSelector from './shipping-rate-selector';
import hasShippingRate from './has-shipping-rate';
import './style.scss';
/**
* Renders the shipping totals row, rates, and calculator if enabled.
@ -22,6 +23,7 @@ import hasShippingRate from './has-shipping-rate';
const TotalsShippingItem = ( {
currency,
values,
isCheckout = false,
showCalculator = true,
showRatesWithoutAddress = false,
} ) => {
@ -44,14 +46,14 @@ const TotalsShippingItem = ( {
const showingRates = showRatesWithoutAddress || hasShippingAddress;
// If we have no rates, and an address is needed.
if ( ! hasRates && ! hasShippingAddress ) {
if ( ! hasRates && ! hasShippingAddress && ! isCheckout ) {
return (
<TotalsItem
label={ __( 'Shipping', 'woo-gutenberg-products-block' ) }
value={
showCalculator ? (
<button
className="wc-block-cart__change-address-button"
className="wc-block-totals__change-address-button"
onClick={ () => {
setIsShippingCalculatorOpen(
! isShippingCalculatorOpen
@ -100,7 +102,7 @@ const TotalsShippingItem = ( {
<ShippingLocation address={ shippingAddress } />{ ' ' }
{ showCalculator && (
<button
className="wc-block-cart__change-address-button"
className="wc-block-totals__change-address-button"
onClick={ () => {
setIsShippingCalculatorOpen(
! isShippingCalculatorOpen
@ -127,19 +129,11 @@ const TotalsShippingItem = ( {
}
currency={ currency }
/>
{ showingRates && (
<fieldset className="wc-block-cart__shipping-options-fieldset">
<legend className="screen-reader-text">
{ __(
'Choose a shipping method',
'woo-gutenberg-products-block'
) }
</legend>
<ShippingRateSelector
shippingRates={ shippingRates }
shippingRatesLoading={ shippingRatesLoading }
/>
</fieldset>
{ ! isCheckout && showingRates && (
<ShippingRateSelector
shippingRates={ shippingRates }
shippingRatesLoading={ shippingRatesLoading }
/>
) }
</>
);
@ -151,6 +145,7 @@ TotalsShippingItem.propTypes = {
total_shipping: PropTypes.string,
total_shipping_tax: PropTypes.string,
} ).isRequired,
isCheckout: PropTypes.bool,
showCalculator: PropTypes.bool,
showRatesWithoutAddress: PropTypes.bool,
};

6
plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/shipping-rate-selector.js
View File

@ -26,15 +26,15 @@ const renderShippingRatesControlOption = ( option ) => ( {
const ShippingRateSelector = ( { shippingRates, shippingRatesLoading } ) => {
return (
<fieldset className="wc-block-cart__shipping-options-fieldset">
<fieldset className="wc-block-totals__shipping-options-fieldset">
<legend className="screen-reader-text">
{ __(
'Choose the shipping method.',
'Choose a shipping method',
'woo-gutenberg-products-block'
) }
</legend>
<ShippingRatesControl
className="wc-block-cart__shipping-options"
className="wc-block-totals__shipping-options"
collapsibleWhenMultiple={ true }
noResultsMessage={ __(
'No shipping options were found.',

56
plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/style.scss Normal file
View File

@ -0,0 +1,56 @@
// Added extra class and label for specificity.
fieldset.wc-block-totals__shipping-options-fieldset {
background-color: transparent;
margin: 0;
padding: 0;
border: 0;
}
.wc-block-totals__shipping-options {
.wc-block-radio-control__label,
.wc-block-radio-control__description,
.wc-block-radio-control__secondary-label,
.wc-block-radio-control__secondary-description {
flex-basis: 100%;
text-align: left;
}
.wc-block-radio-control__option {
padding-left: $gap-large;
&:last-child {
border-bottom: none;
}
}
.wc-block-radio-control__input {
left: 0;
margin: 0;
}
}
.wc-block-totals__change-address-button {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: inherit;
font-family: inherit;
font-weight: inherit;
display: inline;
font-weight: inherit;
letter-spacing: inherit;
margin: 0;
padding: 0;
text-decoration: underline;
text-transform: none;
vertical-align: middle;
&:hover,
&:focus,
&:active {
background: transparent;
opacity: 0.8;
}
}

53
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
View File

@ -7,59 +7,6 @@
.wc-block-cart__shipping-calculator {
white-space: nowrap;
}
.wc-block-cart__change-address-button {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: inherit;
font-family: inherit;
font-weight: inherit;
display: inline;
font-weight: inherit;
letter-spacing: inherit;
margin: 0;
padding: 0;
text-decoration: underline;
text-transform: none;
vertical-align: middle;
&:hover,
&:focus,
&:active {
background: transparent;
opacity: 0.8;
}
}
// Added extra class and label for specificity.
fieldset.wc-block-cart__shipping-options-fieldset {
background-color: transparent;
margin: 0;
padding: 0;
border: 0;
}
.wc-block-cart__shipping-options {
.wc-block-radio-control__label,
.wc-block-radio-control__description,
.wc-block-radio-control__secondary-label,
.wc-block-radio-control__secondary-description {
flex-basis: 100%;
text-align: left;
}
.wc-block-radio-control__option {
padding-left: $gap-large;
&:last-child {
border-bottom: none;
}
}
.wc-block-radio-control__input {
left: 0;
margin: 0;
}
}
}
table.wc-block-cart-items,

1
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
View File

@ -332,7 +332,6 @@ const Block = ( {
cartCoupons={ cartCoupons }
cartItems={ cartItems }
cartTotals={ cartTotals }
shippingRates={ shippingRates }
/>
</Sidebar>
</SidebarLayout>

6
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar.js
View File

@ -26,7 +26,6 @@ const CheckoutSidebar = ( {
cartCoupons = [],
cartItems = [],
cartTotals = {},
shippingRates,
} ) => {
const {
applyCoupon,
@ -34,7 +33,6 @@ const CheckoutSidebar = ( {
isApplyingCoupon,
isRemovingCoupon,
} = useStoreCartCoupons();
const shippingAddress = shippingRates[ 0 ]?.destination;
const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
return (
@ -51,7 +49,9 @@ const CheckoutSidebar = ( {
/>
<TotalsShippingItem
currency={ totalsCurrency }
shippingAddress={ shippingAddress }
noResultsMessage={ null }
isCheckout={ true }
showCalculator={ false }
values={ cartTotals }
/>
{ ! DISPLAY_CART_PRICES_INCLUDING_TAX && (