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";
/*!
* Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Bootstrap v4.5.0 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
......@@ -202,6 +202,7 @@ pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
-ms-overflow-style: scrollbar;
}
figure {
......@@ -269,6 +270,10 @@ select {
text-transform: none;
}
[role=button] {
cursor: pointer;
}
select {
word-wrap: normal;
}
......@@ -301,13 +306,6 @@ input[type=checkbox] {
padding: 0;
}
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
-webkit-appearance: listbox;
}
textarea {
overflow: auto;
resize: vertical;
......@@ -749,6 +747,7 @@ pre code {
.col {
flex-basis: 0;
flex-grow: 1;
min-width: 0;
max-width: 100%;
}
......@@ -956,6 +955,7 @@ pre code {
.col-sm {
flex-basis: 0;
flex-grow: 1;
min-width: 0;
max-width: 100%;
}
......@@ -1168,6 +1168,7 @@ pre code {
.col-md {
flex-basis: 0;
flex-grow: 1;
min-width: 0;
max-width: 100%;
}
......@@ -1380,6 +1381,7 @@ pre code {
.col-lg {
flex-basis: 0;
flex-grow: 1;
min-width: 0;
max-width: 100%;
}
......@@ -1592,6 +1594,7 @@ pre code {
.col-xl {
flex-basis: 0;
flex-grow: 1;
min-width: 0;
max-width: 100%;
}
......@@ -2218,6 +2221,15 @@ pre code {
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 {
color: #495057;
background-color: #fff;
......@@ -2653,7 +2665,6 @@ textarea.form-control.is-invalid {
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
......@@ -2689,6 +2700,10 @@ textarea.form-control.is-invalid {
opacity: 0.65;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
a.btn.disabled,
fieldset:disabled a.btn {
pointer-events: none;
......@@ -3324,7 +3339,6 @@ fieldset:disabled a.btn {
.btn-link:focus,
.btn-link.focus {
text-decoration: underline;
box-shadow: none;
}
.btn-link:disabled,
......@@ -3789,7 +3803,8 @@ input[type=button].btn-block {
.input-group > .custom-select,
.input-group > .custom-file {
position: relative;
flex: 1 1 0%;
flex: 1 1 auto;
width: 1%;
min-width: 0;
margin-bottom: 0;
}
......@@ -4889,7 +4904,7 @@ input[type=button].btn-block {
}
.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 {
......@@ -4940,7 +4955,7 @@ input[type=button].btn-block {
}
.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 {
......@@ -4973,14 +4988,21 @@ input[type=button].btn-block {
margin-left: 0;
}
.card > .list-group:first-child .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
.card > .list-group {
border-top: inherit;
border-bottom: inherit;
}
.card > .list-group:last-child .list-group-item:last-child {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
.card > .list-group:first-child {
border-top-width: 0;
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 {
......@@ -5196,6 +5218,10 @@ input[type=button].btn-block {
border-radius: 0.25rem;
}
.breadcrumb-item {
display: flex;
}
.breadcrumb-item + .breadcrumb-item {
padding-left: 0.5rem;
}
......@@ -5667,6 +5693,7 @@ a.badge-dark.focus {
display: flex;
height: 1rem;
overflow: hidden;
line-height: 0;
font-size: 0.675rem;
background-color: #e9ecef;
border-radius: 0.25rem;
......@@ -5721,6 +5748,7 @@ a.badge-dark.focus {
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
border-radius: 0.25rem;
}
.list-group-item-action {
......@@ -5751,13 +5779,13 @@ a.badge-dark.focus {
}
.list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.list-group-item:last-child {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit;
}
.list-group-item.disabled,
......@@ -5787,26 +5815,26 @@ a.badge-dark.focus {
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-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-bottom-left-radius: 0;
}
.list-group-horizontal .list-group-item.active {
.list-group-horizontal > .list-group-item.active {
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-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;
border-left-width: 1px;
}
......@@ -5816,26 +5844,26 @@ a.badge-dark.focus {
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-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-bottom-left-radius: 0;
}
.list-group-horizontal-sm .list-group-item.active {
.list-group-horizontal-sm > .list-group-item.active {
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-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;
border-left-width: 1px;
}
......@@ -5846,26 +5874,26 @@ a.badge-dark.focus {
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-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-bottom-left-radius: 0;
}
.list-group-horizontal-md .list-group-item.active {
.list-group-horizontal-md > .list-group-item.active {
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-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;
border-left-width: 1px;
}
......@@ -5876,26 +5904,26 @@ a.badge-dark.focus {
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-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-bottom-left-radius: 0;
}
.list-group-horizontal-lg .list-group-item.active {
.list-group-horizontal-lg > .list-group-item.active {
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-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;
border-left-width: 1px;
}
......@@ -5906,42 +5934,40 @@ a.badge-dark.focus {
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-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-bottom-left-radius: 0;
}
.list-group-horizontal-xl .list-group-item.active {
.list-group-horizontal-xl > .list-group-item.active {
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-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;
border-left-width: 1px;
}
}
.list-group-flush .list-group-item {
border-right-width: 0;
border-left-width: 0;
.list-group-flush {
border-radius: 0;
}
.list-group-flush .list-group-item:first-child {
border-top-width: 0;
.list-group-flush > .list-group-item {
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;
}
......@@ -6105,9 +6131,6 @@ button.close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
a.close.disabled {
......@@ -6234,6 +6257,9 @@ a.close.disabled {
.modal-dialog-centered::before {
display: block;
height: calc(100vh - 1rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
content: "";
}
......@@ -6351,6 +6377,9 @@ a.close.disabled {
.modal-dialog-centered::before {
height: calc(100vh - 3.5rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
}
.modal-sm {
......@@ -6900,6 +6929,7 @@ a.close.disabled {
50% {
opacity: 1;
transform: none;
}
}
......@@ -6910,6 +6940,7 @@ a.close.disabled {
50% {
opacity: 1;
transform: none;
}
}
......@@ -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 !important;
}
......@@ -8357,18 +8409,6 @@ button.bg-dark:focus {
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 {
margin: 0 !important;
}
......@@ -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 {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
......@@ -10768,8 +10820,7 @@ a.text-dark:focus {
}
.text-break {
word-break: break-word !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
}
.text-reset {
......@@ -10897,3 +10948,30 @@ ul {
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 {
constructor(cartElem) {
this.cartHtmlElem = cartElem;
......@@ -56,6 +58,8 @@ class Cart {
const actionUrl = e.target.dataset.action;
const productId = e.target.dataset.productId;
loaderElem.classList.toggle('loader-show');
axios.post(actionUrl, {
productId: productId,
})
......@@ -68,10 +72,12 @@ class Cart {
document.querySelector('.js-cart').removeEventListener('click', this.bindedRemoveItemFromCart);
this.show();
loaderElem.classList.toggle('loader-show');
toastr.success('Product deleted');
})
.catch(function (error) {
console.log(error);
loaderElem.classList.toggle('loader-show');
toastr.error('Error, something went wrong');
});
}
......@@ -89,7 +95,8 @@ class Cart {
const actionUrl = this.updateItemUrl;
const productId = event.target.dataset.productId;
setTimeout(() => {
loaderElem.classList.toggle('loader-show');
axios.post(actionUrl, {
productId: productId,
changedQty: event.target.value,
......@@ -97,16 +104,16 @@ class Cart {
.then( (response) => {
document.querySelector('.js-cart').removeEventListener('click', this.bindedRemoveItemFromCart);
this.show();
loaderElem.classList.toggle('loader-show');
toastr.success('Quantity updated');
})
.catch(function (error) {
console.log(error);
loaderElem.classList.toggle('loader-show');
toastr.error('Error, something went wrong');
});
isChanged = false;
}, 1000);
});
});
}
......@@ -117,6 +124,8 @@ class Cart {
}
show() {
loaderElem.classList.toggle('loader-show');
axios.get(this.getItemsUrl)
.then( response => {
const redirectLinkWhenEmpty = response.data.redirectLinkWhenEmpty;
......@@ -133,11 +142,13 @@ class Cart {
this.itemUrl = response.data.item_url;
this.showProducts();
loaderElem.classList.toggle('loader-show');
this.events();
})
.catch(function (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() {
document.querySelector('.js-btn-add-to-basket').addEventListener('click', function(e) {
const actionUrl = this.dataset.action;
loaderElem.classList.toggle('loader-show');
axios.post(actionUrl)
.then(function (response) {
const cartAmountElem = document.querySelector('.amount-in-cart');
cartAmountElem.textContent = response.data;
loaderElem.classList.toggle('loader-show');
toastr.success('Product added to cart');
})
.catch(function (error) {
console.log(error);
loaderElem.classList.toggle('loader-show');
toastr.error('Error, something went wrong');
});
});
......
public/js/welcome.js
View file @ d1889f3b
const loaderElem = document.querySelector('.loader');
function setAddToCardEventListener() {
document.querySelector('.products').addEventListener('click', function(e) {
if (!e.target.classList.contains('js-btn-add-to-basket')) return;
const actionUrl = e.target.dataset.action;
loaderElem.classList.toggle('loader-show');
axios.post(actionUrl)
.then(function (response) {
const cartAmountElem = document.querySelector('.amount-in-cart');
cartAmountElem.textContent = response.data;
loaderElem.classList.toggle('loader-show');
toastr.success('Product added to cart');
})
.catch(function (error) {
console.log(error);
loaderElem.classList.toggle('loader-show');
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 {
.main {
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 @@
@include('partials.header')
<main class="main">
<div class="loader">
<div class="loader__background"></div>
<img class="loader__img" src="{{asset('img/loader.gif')}}">
</div>
@yield('content')
</main>
</div>
......
webpack.mix.js
View file @ d1889f3b
......@@ -12,6 +12,6 @@ const mix = require('laravel-mix');
*/
mix/*.js('resources/js/app.js', 'public/js')*/
// .sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/welcome.scss', 'public/css')
.browserSync('http://127.0.0.1:8000/');
.sass('resources/sass/app.scss', 'public/css');
// .sass('resources/sass/welcome.scss', 'public/css')
// .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