mini-cart design updates
This commit is contained in:
parent
a43996f65a
commit
41a5ed82df
|
|
@ -1015,6 +1015,10 @@
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#product-card-new .product-price .sticker {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.quantity {
|
.quantity {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
|
|
@ -1193,7 +1197,6 @@
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
left: -230px;
|
left: -230px;
|
||||||
display: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1730,6 +1733,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
|
display: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 6px 14px;
|
padding: 6px 14px;
|
||||||
|
|
@ -1750,6 +1754,14 @@
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
min-height: 65vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container :first-child {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
/* @author Shubham Mehrotra */
|
/* @author Shubham Mehrotra */
|
||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
@ -3056,10 +3068,6 @@ body::after {
|
||||||
padding: 10px 0 !important;
|
padding: 10px 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-card-container .product-price .sticker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-card-container:hover {
|
.small-card-container:hover {
|
||||||
-webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
-webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
||||||
box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
|
||||||
|
|
@ -3364,10 +3372,6 @@ button[disabled] {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-detail .right .product-price .sticker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-detail .thumb-list {
|
.product-detail .thumb-list {
|
||||||
left: 15px;
|
left: 15px;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
|
|
||||||
|
|
@ -1172,7 +1172,7 @@ $(document).ready(function () {
|
||||||
|
|
||||||
created: function created() {
|
created: function created() {
|
||||||
window.addEventListener('click', function () {
|
window.addEventListener('click', function () {
|
||||||
var modals = document.getElementsByClassName('account-modal');
|
var modals = document.getElementsByClassName('sensitive-modal');
|
||||||
|
|
||||||
Array.from(modals).forEach(function (modal) {
|
Array.from(modals).forEach(function (modal) {
|
||||||
modal.classList.add('hide');
|
modal.classList.add('hide');
|
||||||
|
|
|
||||||
|
|
@ -90,7 +90,7 @@ $(document).ready(function () {
|
||||||
|
|
||||||
created: function () {
|
created: function () {
|
||||||
window.addEventListener('click', () => {
|
window.addEventListener('click', () => {
|
||||||
let modals = document.getElementsByClassName('account-modal');
|
let modals = document.getElementsByClassName('sensitive-modal');
|
||||||
|
|
||||||
Array.from(modals).forEach(modal => {
|
Array.from(modals).forEach(modal => {
|
||||||
modal.classList.add('hide');
|
modal.classList.add('hide');
|
||||||
|
|
|
||||||
|
|
@ -244,6 +244,12 @@
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.product-price {
|
||||||
|
.sticker {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.quantity {
|
.quantity {
|
||||||
|
|
@ -1027,6 +1033,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
|
display: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 6px 14px;
|
padding: 6px 14px;
|
||||||
|
|
@ -1046,4 +1053,14 @@
|
||||||
.special-price {
|
.special-price {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
min-height: 65vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
:first-child {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -294,12 +294,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-price {
|
|
||||||
.sticker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumb-list {
|
.thumb-list {
|
||||||
|
|
|
||||||
|
|
@ -495,12 +495,6 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 10px 0 !important;
|
padding: 10px 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-price {
|
|
||||||
.sticker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-card-container:hover {
|
.small-card-container:hover {
|
||||||
|
|
|
||||||
|
|
@ -97,7 +97,10 @@
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
toggleMiniCart: function () {
|
toggleMiniCart: function () {
|
||||||
$('#cart-modal-content').toggle();
|
let modal = $('#cart-modal-content')[0];
|
||||||
|
modal.classList.toggle('hide');
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -19,11 +19,11 @@
|
||||||
{{ __('velocity::app.checkout.items') }}
|
{{ __('velocity::app.checkout.items') }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span class="col-1 fw6 fs16 no-padding">
|
<span class="col-2 fw6 fs16 no-padding text-center">
|
||||||
{{ __('velocity::app.checkout.qty') }}
|
{{ __('velocity::app.checkout.qty') }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span class="col-1 fw6 fs16 pr0 ml5">
|
<span class="col-2 fw6 fs16 text-right pr0">
|
||||||
{{ __('velocity::app.checkout.subtotal') }}
|
{{ __('velocity::app.checkout.subtotal') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -84,7 +84,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="product-quantity col-2 no-padding">
|
<div class="product-quantity col-3 no-padding">
|
||||||
<quantity-changer
|
<quantity-changer
|
||||||
:control-name="'qty[{{$item->id}}]'"
|
:control-name="'qty[{{$item->id}}]'"
|
||||||
quantity="{{ $item->quantity }}">
|
quantity="{{ $item->quantity }}">
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,7 @@
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<cart-btn item-count="{{ $cart->items->count() }}"></cart-btn>
|
<cart-btn item-count="{{ $cart->items->count() }}"></cart-btn>
|
||||||
|
|
||||||
<div class="modal-content" id="cart-modal-content">
|
<div class="modal-content sensitive-modal cart-modal-content hide" id="cart-modal-content">
|
||||||
|
|
||||||
<!--Body-->
|
<!--Body-->
|
||||||
<div class="pl20 pt10 pr15 fs14">
|
<div class="pl20 pt10 pr15 fs14">
|
||||||
@foreach ($items as $item)
|
@foreach ($items as $item)
|
||||||
|
|
@ -106,4 +105,4 @@
|
||||||
<cart-btn item-count="{{ __('shop::app.minicart.zero') }}"></cart-btn>
|
<cart-btn item-count="{{ __('shop::app.minicart.zero') }}"></cart-btn>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
></content-header>
|
></content-header>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row col-12">
|
<div class="row col-12 pr0">
|
||||||
<sidebar-component
|
<sidebar-component
|
||||||
main-sidebar=true
|
main-sidebar=true
|
||||||
url="{{ url()->to('/') }}"
|
url="{{ url()->to('/') }}"
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="account-modal hide mt5" role="document">
|
<div class="account-modal sensitive-modal hide mt5">
|
||||||
<!--Content-->
|
<!--Content-->
|
||||||
@guest('customer')
|
@guest('customer')
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('content-wrapper')
|
@section('content-wrapper')
|
||||||
<section class="cart-details row offset-1">
|
<section class="search-container cart-details row offset-1">
|
||||||
@if (! $results)
|
@if (! $results)
|
||||||
<h1 class="fw6 row col-12">{{ __('shop::app.search.no-results') }}</h1>
|
<h1 class="fw6 row col-12">{{ __('shop::app.search.no-results') }}</h1>
|
||||||
@else
|
@else
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue