Skip to content

T
test-webshop
Commit d1889f3b authored by Artem's avatar Artem
Browse files
Options

add loader

parent fc725ee2
Show whitespace changes
Inline Side-by-side
Showing with 226 additions and 95 deletions
public/css/app.css
View file @ d1889f3b
@import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8";
/*! /*!
* Bootstrap v4.4.1 (https://getbootstrap.com/) * Bootstrap v4.5.0 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc. * Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
...@@ -202,6 +202,7 @@ pre { ...@@ -202,6 +202,7 @@ pre {
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
overflow: auto; overflow: auto;
-ms-overflow-style: scrollbar;
} }
figure { figure {
...@@ -269,6 +270,10 @@ select { ...@@ -269,6 +270,10 @@ select {
text-transform: none; text-transform: none;
} }
[role=button] {
cursor: pointer;
}
select { select {
word-wrap: normal; word-wrap: normal;
} }
...@@ -301,13 +306,6 @@ input[type=checkbox] { ...@@ -301,13 +306,6 @@ input[type=checkbox] {
padding: 0; padding: 0;
} }
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
-webkit-appearance: listbox;
}
textarea { textarea {
overflow: auto; overflow: auto;
resize: vertical; resize: vertical;
...@@ -749,6 +747,7 @@ pre code { ...@@ -749,6 +747,7 @@ pre code {
.col { .col {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
min-width: 0;
max-width: 100%; max-width: 100%;
} }
...@@ -956,6 +955,7 @@ pre code { ...@@ -956,6 +955,7 @@ pre code {
.col-sm { .col-sm {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
min-width: 0;
max-width: 100%; max-width: 100%;
} }
...@@ -1168,6 +1168,7 @@ pre code { ...@@ -1168,6 +1168,7 @@ pre code {
.col-md { .col-md {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
min-width: 0;
max-width: 100%; max-width: 100%;
} }
...@@ -1380,6 +1381,7 @@ pre code { ...@@ -1380,6 +1381,7 @@ pre code {
.col-lg { .col-lg {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
min-width: 0;
max-width: 100%; max-width: 100%;
} }
...@@ -1592,6 +1594,7 @@ pre code { ...@@ -1592,6 +1594,7 @@ pre code {
.col-xl { .col-xl {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
min-width: 0;
max-width: 100%; max-width: 100%;
} }
...@@ -2218,6 +2221,15 @@ pre code { ...@@ -2218,6 +2221,15 @@ pre code {
opacity: 1; opacity: 1;
} }
input[type=date].form-control,
input[type=time].form-control,
input[type=datetime-local].form-control,
input[type=month].form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select.form-control:focus::-ms-value { select.form-control:focus::-ms-value {
color: #495057; color: #495057;
background-color: #fff; background-color: #fff;
...@@ -2653,7 +2665,6 @@ textarea.form-control.is-invalid { ...@@ -2653,7 +2665,6 @@ textarea.form-control.is-invalid {
color: #212529; color: #212529;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
...@@ -2689,6 +2700,10 @@ textarea.form-control.is-invalid { ...@@ -2689,6 +2700,10 @@ textarea.form-control.is-invalid {
opacity: 0.65; opacity: 0.65;
} }
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
a.btn.disabled, a.btn.disabled,
fieldset:disabled a.btn { fieldset:disabled a.btn {
pointer-events: none; pointer-events: none;
...@@ -3324,7 +3339,6 @@ fieldset:disabled a.btn { ...@@ -3324,7 +3339,6 @@ fieldset:disabled a.btn {
.btn-link:focus, .btn-link:focus,
.btn-link.focus { .btn-link.focus {
text-decoration: underline; text-decoration: underline;
box-shadow: none;
} }
.btn-link:disabled, .btn-link:disabled,
...@@ -3789,7 +3803,8 @@ input[type=button].btn-block { ...@@ -3789,7 +3803,8 @@ input[type=button].btn-block {
.input-group > .custom-select, .input-group > .custom-select,
.input-group > .custom-file { .input-group > .custom-file {
position: relative; position: relative;
flex: 1 1 0%; flex: 1 1 auto;
width: 1%;
min-width: 0; min-width: 0;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -4889,7 +4904,7 @@ input[type=button].btn-block { ...@@ -4889,7 +4904,7 @@ input[type=button].btn-block {
} }
.navbar-light .navbar-toggler-icon { .navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
} }
.navbar-light .navbar-text { .navbar-light .navbar-text {
...@@ -4940,7 +4955,7 @@ input[type=button].btn-block { ...@@ -4940,7 +4955,7 @@ input[type=button].btn-block {
} }
.navbar-dark .navbar-toggler-icon { .navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
} }
.navbar-dark .navbar-text { .navbar-dark .navbar-text {
...@@ -4973,14 +4988,21 @@ input[type=button].btn-block { ...@@ -4973,14 +4988,21 @@ input[type=button].btn-block {
margin-left: 0; margin-left: 0;
} }
.card > .list-group:first-child .list-group-item:first-child { .card > .list-group {
border-top-left-radius: 0.25rem; border-top: inherit;
border-top-right-radius: 0.25rem; border-bottom: inherit;
} }
.card > .list-group:last-child .list-group-item:last-child { .card > .list-group:first-child {
border-bottom-right-radius: 0.25rem; border-top-width: 0;
border-bottom-left-radius: 0.25rem; border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);
}
.card > .list-group:last-child {
border-bottom-width: 0;
border-bottom-right-radius: calc(0.25rem - 1px);
border-bottom-left-radius: calc(0.25rem - 1px);
} }
.card-body { .card-body {
...@@ -5196,6 +5218,10 @@ input[type=button].btn-block { ...@@ -5196,6 +5218,10 @@ input[type=button].btn-block {
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.breadcrumb-item {
display: flex;
}
.breadcrumb-item + .breadcrumb-item { .breadcrumb-item + .breadcrumb-item {
padding-left: 0.5rem; padding-left: 0.5rem;
} }
...@@ -5667,6 +5693,7 @@ a.badge-dark.focus { ...@@ -5667,6 +5693,7 @@ a.badge-dark.focus {
display: flex; display: flex;
height: 1rem; height: 1rem;
overflow: hidden; overflow: hidden;
line-height: 0;
font-size: 0.675rem; font-size: 0.675rem;
background-color: #e9ecef; background-color: #e9ecef;
border-radius: 0.25rem; border-radius: 0.25rem;
...@@ -5721,6 +5748,7 @@ a.badge-dark.focus { ...@@ -5721,6 +5748,7 @@ a.badge-dark.focus {
flex-direction: column; flex-direction: column;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
border-radius: 0.25rem;
} }
.list-group-item-action { .list-group-item-action {
...@@ -5751,13 +5779,13 @@ a.badge-dark.focus { ...@@ -5751,13 +5779,13 @@ a.badge-dark.focus {
} }
.list-group-item:first-child { .list-group-item:first-child {
border-top-left-radius: 0.25rem; border-top-left-radius: inherit;
border-top-right-radius: 0.25rem; border-top-right-radius: inherit;
} }
.list-group-item:last-child { .list-group-item:last-child {
border-bottom-right-radius: 0.25rem; border-bottom-right-radius: inherit;
border-bottom-left-radius: 0.25rem; border-bottom-left-radius: inherit;
} }
.list-group-item.disabled, .list-group-item.disabled,
...@@ -5787,26 +5815,26 @@ a.badge-dark.focus { ...@@ -5787,26 +5815,26 @@ a.badge-dark.focus {
flex-direction: row; flex-direction: row;
} }
.list-group-horizontal .list-group-item:first-child { .list-group-horizontal > .list-group-item:first-child {
border-bottom-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.list-group-horizontal .list-group-item:last-child { .list-group-horizontal > .list-group-item:last-child {
border-top-right-radius: 0.25rem; border-top-right-radius: 0.25rem;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.list-group-horizontal .list-group-item.active { .list-group-horizontal > .list-group-item.active {
margin-top: 0; margin-top: 0;
} }
.list-group-horizontal .list-group-item + .list-group-item { .list-group-horizontal > .list-group-item + .list-group-item {
border-top-width: 1px; border-top-width: 1px;
border-left-width: 0; border-left-width: 0;
} }
.list-group-horizontal .list-group-item + .list-group-item.active { .list-group-horizontal > .list-group-item + .list-group-item.active {
margin-left: -1px; margin-left: -1px;
border-left-width: 1px; border-left-width: 1px;
} }
...@@ -5816,26 +5844,26 @@ a.badge-dark.focus { ...@@ -5816,26 +5844,26 @@ a.badge-dark.focus {
flex-direction: row; flex-direction: row;
} }
.list-group-horizontal-sm .list-group-item:first-child { .list-group-horizontal-sm > .list-group-item:first-child {
border-bottom-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.list-group-horizontal-sm .list-group-item:last-child { .list-group-horizontal-sm > .list-group-item:last-child {
border-top-right-radius: 0.25rem; border-top-right-radius: 0.25rem;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.list-group-horizontal-sm .list-group-item.active { .list-group-horizontal-sm > .list-group-item.active {
margin-top: 0; margin-top: 0;
} }
.list-group-horizontal-sm .list-group-item + .list-group-item { .list-group-horizontal-sm > .list-group-item + .list-group-item {
border-top-width: 1px; border-top-width: 1px;
border-left-width: 0; border-left-width: 0;
} }
.list-group-horizontal-sm .list-group-item + .list-group-item.active { .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
margin-left: -1px; margin-left: -1px;
border-left-width: 1px; border-left-width: 1px;
} }
...@@ -5846,26 +5874,26 @@ a.badge-dark.focus { ...@@ -5846,26 +5874,26 @@ a.badge-dark.focus {
flex-direction: row; flex-direction: row;
} }
.list-group-horizontal-md .list-group-item:first-child { .list-group-horizontal-md > .list-group-item:first-child {
border-bottom-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.list-group-horizontal-md .list-group-item:last-child { .list-group-horizontal-md > .list-group-item:last-child {
border-top-right-radius: 0.25rem; border-top-right-radius: 0.25rem;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.list-group-horizontal-md .list-group-item.active { .list-group-horizontal-md > .list-group-item.active {
margin-top: 0; margin-top: 0;
} }
.list-group-horizontal-md .list-group-item + .list-group-item { .list-group-horizontal-md > .list-group-item + .list-group-item {
border-top-width: 1px; border-top-width: 1px;
border-left-width: 0; border-left-width: 0;
} }
.list-group-horizontal-md .list-group-item + .list-group-item.active { .list-group-horizontal-md > .list-group-item + .list-group-item.active {
margin-left: -1px; margin-left: -1px;
border-left-width: 1px; border-left-width: 1px;
} }
...@@ -5876,26 +5904,26 @@ a.badge-dark.focus { ...@@ -5876,26 +5904,26 @@ a.badge-dark.focus {
flex-direction: row; flex-direction: row;
} }
.list-group-horizontal-lg .list-group-item:first-child { .list-group-horizontal-lg > .list-group-item:first-child {
border-bottom-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.list-group-horizontal-lg .list-group-item:last-child { .list-group-horizontal-lg > .list-group-item:last-child {
border-top-right-radius: 0.25rem; border-top-right-radius: 0.25rem;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.list-group-horizontal-lg .list-group-item.active { .list-group-horizontal-lg > .list-group-item.active {
margin-top: 0; margin-top: 0;
} }
.list-group-horizontal-lg .list-group-item + .list-group-item { .list-group-horizontal-lg > .list-group-item + .list-group-item {
border-top-width: 1px; border-top-width: 1px;
border-left-width: 0; border-left-width: 0;
} }
.list-group-horizontal-lg .list-group-item + .list-group-item.active { .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
margin-left: -1px; margin-left: -1px;
border-left-width: 1px; border-left-width: 1px;
} }
...@@ -5906,42 +5934,40 @@ a.badge-dark.focus { ...@@ -5906,42 +5934,40 @@ a.badge-dark.focus {
flex-direction: row; flex-direction: row;
} }
.list-group-horizontal-xl .list-group-item:first-child { .list-group-horizontal-xl > .list-group-item:first-child {
border-bottom-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.list-group-horizontal-xl .list-group-item:last-child { .list-group-horizontal-xl > .list-group-item:last-child {
border-top-right-radius: 0.25rem; border-top-right-radius: 0.25rem;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.list-group-horizontal-xl .list-group-item.active { .list-group-horizontal-xl > .list-group-item.active {
margin-top: 0; margin-top: 0;
} }
.list-group-horizontal-xl .list-group-item + .list-group-item { .list-group-horizontal-xl > .list-group-item + .list-group-item {
border-top-width: 1px; border-top-width: 1px;
border-left-width: 0; border-left-width: 0;
} }
.list-group-horizontal-xl .list-group-item + .list-group-item.active { .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
margin-left: -1px; margin-left: -1px;
border-left-width: 1px; border-left-width: 1px;
} }
} }
.list-group-flush .list-group-item { .list-group-flush {
border-right-width: 0;
border-left-width: 0;
border-radius: 0; border-radius: 0;
} }
.list-group-flush .list-group-item:first-child { .list-group-flush > .list-group-item {
border-top-width: 0; border-width: 0 0 1px;
} }
.list-group-flush:last-child .list-group-item:last-child { .list-group-flush > .list-group-item:last-child {
border-bottom-width: 0; border-bottom-width: 0;
} }
...@@ -6105,9 +6131,6 @@ button.close { ...@@ -6105,9 +6131,6 @@ button.close {
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
} }
a.close.disabled { a.close.disabled {
...@@ -6234,6 +6257,9 @@ a.close.disabled { ...@@ -6234,6 +6257,9 @@ a.close.disabled {
.modal-dialog-centered::before { .modal-dialog-centered::before {
display: block; display: block;
height: calc(100vh - 1rem); height: calc(100vh - 1rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
content: ""; content: "";
} }
...@@ -6351,6 +6377,9 @@ a.close.disabled { ...@@ -6351,6 +6377,9 @@ a.close.disabled {
.modal-dialog-centered::before { .modal-dialog-centered::before {
height: calc(100vh - 3.5rem); height: calc(100vh - 3.5rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
} }
.modal-sm { .modal-sm {
...@@ -6900,6 +6929,7 @@ a.close.disabled { ...@@ -6900,6 +6929,7 @@ a.close.disabled {
50% { 50% {
opacity: 1; opacity: 1;
transform: none;
} }
} }
...@@ -6910,6 +6940,7 @@ a.close.disabled { ...@@ -6910,6 +6940,7 @@ a.close.disabled {
50% { 50% {
opacity: 1; opacity: 1;
transform: none;
} }
} }
...@@ -8201,6 +8232,27 @@ button.bg-dark:focus { ...@@ -8201,6 +8232,27 @@ button.bg-dark:focus {
} }
} }
.user-select-all {
-webkit-user-select: all !important;
-moz-user-select: all !important;
-ms-user-select: all !important;
user-select: all !important;
}
.user-select-auto {
-webkit-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
user-select: auto !important;
}
.user-select-none {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.overflow-auto { .overflow-auto {
overflow: auto !important; overflow: auto !important;
} }
...@@ -8357,18 +8409,6 @@ button.bg-dark:focus { ...@@ -8357,18 +8409,6 @@ button.bg-dark:focus {
height: 100vh !important; height: 100vh !important;
} }
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0, 0, 0, 0);
}
.m-0 { .m-0 {
margin: 0 !important; margin: 0 !important;
} }
...@@ -10537,6 +10577,18 @@ button.bg-dark:focus { ...@@ -10537,6 +10577,18 @@ button.bg-dark:focus {
} }
} }
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0, 0, 0, 0);
}
.text-monospace { .text-monospace {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
} }
...@@ -10768,8 +10820,7 @@ a.text-dark:focus { ...@@ -10768,8 +10820,7 @@ a.text-dark:focus {
} }
.text-break { .text-break {
word-break: break-word !important; word-wrap: break-word !important;
overflow-wrap: break-word !important;
} }
.text-reset { .text-reset {
...@@ -10897,3 +10948,30 @@ ul { ...@@ -10897,3 +10948,30 @@ ul {
padding-top: 80px; padding-top: 80px;
} }
.loader {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.loader__background {
height: 100%;
background-color: lightgrey;
opacity: 0.6;
}
.loader__img {
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
}
.loader-show {
display: block;
}
public/js/cart.js
View file @ d1889f3b
const loaderElem = document.querySelector('.loader');
class Cart { class Cart {
constructor(cartElem) { constructor(cartElem) {
this.cartHtmlElem = cartElem; this.cartHtmlElem = cartElem;
...@@ -56,6 +58,8 @@ class Cart { ...@@ -56,6 +58,8 @@ class Cart {
const actionUrl = e.target.dataset.action; const actionUrl = e.target.dataset.action;
const productId = e.target.dataset.productId; const productId = e.target.dataset.productId;
loaderElem.classList.toggle('loader-show');
axios.post(actionUrl, { axios.post(actionUrl, {
productId: productId, productId: productId,
}) })
...@@ -68,10 +72,12 @@ class Cart { ...@@ -68,10 +72,12 @@ class Cart {
document.querySelector('.js-cart').removeEventListener('click', this.bindedRemoveItemFromCart); document.querySelector('.js-cart').removeEventListener('click', this.bindedRemoveItemFromCart);
this.show(); this.show();
loaderElem.classList.toggle('loader-show');
toastr.success('Product deleted'); toastr.success('Product deleted');
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
loaderElem.classList.toggle('loader-show');
toastr.error('Error, something went wrong'); toastr.error('Error, something went wrong');
}); });
} }
...@@ -89,7 +95,8 @@ class Cart { ...@@ -89,7 +95,8 @@ class Cart {
const actionUrl = this.updateItemUrl; const actionUrl = this.updateItemUrl;
const productId = event.target.dataset.productId; const productId = event.target.dataset.productId;
setTimeout(() => { loaderElem.classList.toggle('loader-show');
axios.post(actionUrl, { axios.post(actionUrl, {
productId: productId, productId: productId,
changedQty: event.target.value, changedQty: event.target.value,
...@@ -97,16 +104,16 @@ class Cart { ...@@ -97,16 +104,16 @@ class Cart {
.then( (response) => { .then( (response) => {
document.querySelector('.js-cart').removeEventListener('click', this.bindedRemoveItemFromCart); document.querySelector('.js-cart').removeEventListener('click', this.bindedRemoveItemFromCart);
this.show(); this.show();
loaderElem.classList.toggle('loader-show');
toastr.success('Quantity updated'); toastr.success('Quantity updated');
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
loaderElem.classList.toggle('loader-show');
toastr.error('Error, something went wrong'); toastr.error('Error, something went wrong');
}); });
isChanged = false; isChanged = false;
}, 1000);
}); });
}); });
} }
...@@ -117,6 +124,8 @@ class Cart { ...@@ -117,6 +124,8 @@ class Cart {
} }
show() { show() {
loaderElem.classList.toggle('loader-show');
axios.get(this.getItemsUrl) axios.get(this.getItemsUrl)
.then( response => { .then( response => {
const redirectLinkWhenEmpty = response.data.redirectLinkWhenEmpty; const redirectLinkWhenEmpty = response.data.redirectLinkWhenEmpty;
...@@ -133,11 +142,13 @@ class Cart { ...@@ -133,11 +142,13 @@ class Cart {
this.itemUrl = response.data.item_url; this.itemUrl = response.data.item_url;
this.showProducts(); this.showProducts();
loaderElem.classList.toggle('loader-show');
this.events(); this.events();
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
alert('Something went wrong'); loaderElem.classList.toggle('loader-show');
toastr.error('Error, something went wrong');
}); });
} }
} }
......
public/js/product.js
View file @ d1889f3b
const loaderElem = document.querySelector('.loader');
function setAddToCardEventListener() { function setAddToCardEventListener() {
document.querySelector('.js-btn-add-to-basket').addEventListener('click', function(e) { document.querySelector('.js-btn-add-to-basket').addEventListener('click', function(e) {
const actionUrl = this.dataset.action; const actionUrl = this.dataset.action;
loaderElem.classList.toggle('loader-show');
axios.post(actionUrl) axios.post(actionUrl)
.then(function (response) { .then(function (response) {
const cartAmountElem = document.querySelector('.amount-in-cart'); const cartAmountElem = document.querySelector('.amount-in-cart');
cartAmountElem.textContent = response.data; cartAmountElem.textContent = response.data;
loaderElem.classList.toggle('loader-show');
toastr.success('Product added to cart'); toastr.success('Product added to cart');
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
loaderElem.classList.toggle('loader-show');
toastr.error('Error, something went wrong'); toastr.error('Error, something went wrong');
}); });
}); });
......
public/js/welcome.js
View file @ d1889f3b
const loaderElem = document.querySelector('.loader');
function setAddToCardEventListener() { function setAddToCardEventListener() {
document.querySelector('.products').addEventListener('click', function(e) { document.querySelector('.products').addEventListener('click', function(e) {
if (!e.target.classList.contains('js-btn-add-to-basket')) return; if (!e.target.classList.contains('js-btn-add-to-basket')) return;
const actionUrl = e.target.dataset.action; const actionUrl = e.target.dataset.action;
loaderElem.classList.toggle('loader-show');
axios.post(actionUrl) axios.post(actionUrl)
.then(function (response) { .then(function (response) {
const cartAmountElem = document.querySelector('.amount-in-cart'); const cartAmountElem = document.querySelector('.amount-in-cart');
cartAmountElem.textContent = response.data; cartAmountElem.textContent = response.data;
loaderElem.classList.toggle('loader-show');
toastr.success('Product added to cart'); toastr.success('Product added to cart');
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
loaderElem.classList.toggle('loader-show');
toastr.error('Error, something went wrong'); toastr.error('Error, something went wrong');
}); });
}); });
......
public/mix-manifest.json
View file @ d1889f3b
{ {
"/js/app.js": "/js/app.js" "/css/app.css": "/css/app.css"
} }
resources/sass/app.scss
View file @ d1889f3b
...@@ -21,3 +21,28 @@ ul { ...@@ -21,3 +21,28 @@ ul {
.main { .main {
padding-top: 80px; padding-top: 80px;
} }
.loader {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0; left: 0;
z-index: 1;
}
.loader__background {
height: 100%;
background-color: lightgrey;
opacity: 0.6;
}
.loader__img {
position: absolute;
left: 50%; top: 20%;
transform: translateX(-50%);
}
.loader-show {
display: block;
}
resources/views/layouts/app.blade.php
View file @ d1889f3b
...@@ -23,6 +23,11 @@ ...@@ -23,6 +23,11 @@
@include('partials.header') @include('partials.header')
<main class="main"> <main class="main">
<div class="loader">
<div class="loader__background"></div>
<img class="loader__img" src="{{asset('img/loader.gif')}}">
</div>
@yield('content') @yield('content')
</main> </main>
</div> </div>
......
webpack.mix.js
View file @ d1889f3b
...@@ -12,6 +12,6 @@ const mix = require('laravel-mix'); ...@@ -12,6 +12,6 @@ const mix = require('laravel-mix');
*/ */
mix/*.js('resources/js/app.js', 'public/js')*/ mix/*.js('resources/js/app.js', 'public/js')*/
// .sass('resources/sass/app.scss', 'public/css') .sass('resources/sass/app.scss', 'public/css');
.sass('resources/sass/welcome.scss', 'public/css') // .sass('resources/sass/welcome.scss', 'public/css')
.browserSync('http://127.0.0.1:8000/'); // .browserSync('http://127.0.0.1:8000/');
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment