mini-cart design updates

This commit is contained in:
shubhammehrotra.symfony@webkul.com 2019-12-31 12:26:34 +05:30
parent a43996f65a
commit 41a5ed82df
12 changed files with 44 additions and 33 deletions

View File

@ -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;

View File

@ -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');

View File

@ -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');

View File

@ -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;
}
} }

View File

@ -294,12 +294,6 @@
} }
} }
} }
.product-price {
.sticker {
display: none;
}
}
} }
.thumb-list { .thumb-list {

View File

@ -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 {

View File

@ -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();
} }
} }
}) })

View File

@ -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 }}">

View File

@ -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>

View File

@ -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('/') }}"

View File

@ -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">

View File

@ -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