Fixed padding issues on cart

master
Mark Moffat 2020-01-07 12:04:22 +10:30
parent 3022884a2d
commit c4ffdff19e
6 changed files with 19 additions and 12 deletions

View File

@ -517,7 +517,7 @@ function updateCartDiv(){
// Setup the product html // Setup the product html
productHtml += ` productHtml += `
<div class="d-flex flex-row bottom-pad-15"> <div class="d-flex flex-row bottom-pad-15">
<div class="p-2"> <div class="p-2 cart-product">
<div class="row h-200"> <div class="row h-200">
<div class="col-4 col-md-3 no-pad-left"> <div class="col-4 col-md-3 no-pad-left">
${productImage} ${productImage}
@ -561,7 +561,7 @@ function updateCartDiv(){
// Set the totals section // Set the totals section
var cartTotalsHtml = ` var cartTotalsHtml = `
<div class="row"> <div class="d-flex flex-row">
<div class="cart-contents-shipping col-md-12 no-pad-right"> <div class="cart-contents-shipping col-md-12 no-pad-right">
<div class="text-right"> <div class="text-right">
${shippingTotal} ${shippingTotal}
@ -574,8 +574,8 @@ function updateCartDiv(){
</div>`; </div>`;
var cartTotalsEmptyHtml = ` var cartTotalsEmptyHtml = `
<div id="cart-empty" class="row"> <div id="cart-empty" class="d-flex flex-row">
<div class="cart-contents-shipping col-md-12 no-pad-right"> <div class="cart-contents-shipping col-md-12 no-pad-left>
Cart empty Cart empty
</div> </div>
</div>`; </div>`;

File diff suppressed because one or more lines are too long

View File

@ -70,6 +70,10 @@ html, body {
padding-left: 7px; padding-left: 7px;
} }
.cart-product{
padding: 0 !important;
}
a.text-danger:hover, a.text-danger:focus { a.text-danger:hover, a.text-danger:focus {
color: @text-danger-color; color: @text-danger-color;
} }

View File

@ -49,6 +49,9 @@ body {
.cart-link { .cart-link {
padding-left: 7px; padding-left: 7px;
} }
.cart-product {
padding: 0 !important;
}
a.text-danger:hover, a.text-danger:hover,
a.text-danger:focus { a.text-danger:focus {
color: #cc3a2c; color: #cc3a2c;

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
<div class="cartBodyWrapper"> <div class="cartBodyWrapper">
{{#each @root.session.cart}} {{#each @root.session.cart}}
<div class="d-flex flex-row bottom-pad-15"> <div class="d-flex flex-row bottom-pad-15">
<div class="p-2"> <div class="p-2 cart-product">
<div class="row h-200"> <div class="row h-200">
<div class="col-4 col-md-3 no-pad-left"> <div class="col-4 col-md-3 no-pad-left">
{{#if productImage}} {{#if productImage}}
@ -41,7 +41,7 @@
<button class="btn btn-outline-danger btn-delete-from-cart" data-id="{{../this.productId}}" type="button"><i class="far fa-trash-alt" data-id="{{../this.productId}}" aria-hidden="true"></i></button> <button class="btn btn-outline-danger btn-delete-from-cart" data-id="{{../this.productId}}" type="button"><i class="far fa-trash-alt" data-id="{{../this.productId}}" aria-hidden="true"></i></button>
</div> </div>
{{else}} {{else}}
<div class="col-12 col-md-6 no-pad-left mb-2"></div> <div class="col-12 col-md-8 no-pad-left mb-2"></div>
{{/ifCond}} {{/ifCond}}
<div class="col-8 col-md-4 align-self-center text-right"> <div class="col-8 col-md-4 align-self-center text-right">
<strong class="my-auto">{{currencySymbol @root.config.currencySymbol}}{{formatAmount this.totalItemPrice}}</strong> <strong class="my-auto">{{currencySymbol @root.config.currencySymbol}}{{formatAmount this.totalItemPrice}}</strong>
@ -53,9 +53,9 @@
</div> </div>
{{/each}} {{/each}}
</div> </div>
<div class="cartTotalsWrapper container-fluid"> <div class="cartTotalsWrapper">
{{#if @root.session.cart}} {{#if @root.session.cart}}
<div class="row"> <div class="d-flex flex-row">
<div class="cart-contents-shipping col-md-12 no-pad-right"> <div class="cart-contents-shipping col-md-12 no-pad-right">
{{#ifCond @root.session.totalCartShipping '>' 0}} {{#ifCond @root.session.totalCartShipping '>' 0}}
<div class="text-right"> <div class="text-right">
@ -73,8 +73,8 @@
</div> </div>
</div> </div>
{{else}} {{else}}
<div id="cart-empty" class="row"> <div id="cart-empty" class="d-flex flex-row">
<div class="cart-contents-shipping col-md-12 no-pad-right"> <div class="cart-contents-shipping col-md-12 no-pad-left">
Cart empty Cart empty
</div> </div>
</div> </div>