From b52cbc5438c870b657418bb7297ec55d0252958e Mon Sep 17 00:00:00 2001 From: Lionell Briones Date: Thu, 12 Jan 2023 16:15:07 +0800 Subject: [PATCH] changed skeleton loaders to spinner --- public/css/skeleton.css | 2 +- public/index.html | 392 +----------------- .../ChangeProviderScreenLoader.vue | 23 - src/content-loader/PopupScreenLoader.vue | 27 -- src/content-loader/index.js | 2 - src/views/Confirm/Confirm.scss | 3 + src/views/Confirm/Confirm.vue | 8 +- src/views/ProviderChange/ProviderChange.scss | 3 + src/views/ProviderChange/ProviderChange.vue | 8 +- 9 files changed, 27 insertions(+), 441 deletions(-) delete mode 100644 src/content-loader/ChangeProviderScreenLoader.vue delete mode 100644 src/content-loader/PopupScreenLoader.vue delete mode 100644 src/content-loader/index.js diff --git a/public/css/skeleton.css b/public/css/skeleton.css index a8335e891..f55fd9084 100644 --- a/public/css/skeleton.css +++ b/public/css/skeleton.css @@ -1 +1 @@ -.sk-grid{box-sizing:border-box;display:flex;margin-left:auto;margin-right:auto;flex-wrap:wrap;max-width:1400px;width:88.5714285714%}@media screen and (max-width:1020px){.sk-grid{width:88.2352941176%}}@media screen and (max-width:600px){.sk-grid{width:97.4193548387%}}.sk-grid-0{box-sizing:border-box;display:flex;margin-left:auto;margin-right:auto;flex-wrap:wrap;max-width:1400px;width:100%}.sk-grid__col-desk-0{margin-bottom:4px;box-sizing:border-box;width:0%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-0{margin-left:0}.sk-grid__col-desk-1{margin-bottom:4px;box-sizing:border-box;width:8.3333333333%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-1{margin-left:8.3333333333%}.sk-grid__col-desk-2{margin-bottom:4px;box-sizing:border-box;width:16.6666666667%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-2{margin-left:16.6666666667%}.sk-grid__col-desk-3{margin-bottom:4px;box-sizing:border-box;width:25%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-3{margin-left:25%}.sk-grid__col-desk-4{margin-bottom:4px;box-sizing:border-box;width:33.3333333333%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-4{margin-left:33.3333333333%}.sk-grid__col-desk-5{margin-bottom:4px;box-sizing:border-box;width:41.6666666667%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-5{margin-left:41.6666666667%}.sk-grid__col-desk-6{margin-bottom:4px;box-sizing:border-box;width:50%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-6{margin-left:50%}.sk-grid__col-desk-7{margin-bottom:4px;box-sizing:border-box;width:58.3333333333%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-7{margin-left:58.3333333333%}.sk-grid__col-desk-8{margin-bottom:4px;box-sizing:border-box;width:66.6666666667%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-8{margin-left:66.6666666667%}.sk-grid__col-desk-9{margin-bottom:4px;box-sizing:border-box;width:75%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-9{margin-left:75%}.sk-grid__col-desk-10{margin-bottom:4px;box-sizing:border-box;width:83.3333333333%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-10{margin-left:83.3333333333%}.sk-grid__col-desk-11{margin-bottom:4px;box-sizing:border-box;width:91.6666666667%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-11{margin-left:91.6666666667%}.sk-grid__col-desk-12{margin-bottom:4px;box-sizing:border-box;width:100%;padding-left:1.6129032258%;padding-right:1.6129032258%}.sk-grid__col-desk-shift-12{margin-left:100%}@media screen and (max-width:1020px){.sk-grid__col-tab-0{margin-bottom:4px;box-sizing:border-box;width:0%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-0{margin-left:0}.sk-grid__col-tab-1{margin-bottom:4px;box-sizing:border-box;width:8.3333333333%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-1{margin-left:8.3333333333%}.sk-grid__col-tab-2{margin-bottom:4px;box-sizing:border-box;width:16.6666666667%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-2{margin-left:16.6666666667%}.sk-grid__col-tab-3{margin-bottom:4px;box-sizing:border-box;width:25%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-3{margin-left:25%}.sk-grid__col-tab-4{margin-bottom:4px;box-sizing:border-box;width:33.3333333333%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-4{margin-left:33.3333333333%}.sk-grid__col-tab-5{margin-bottom:4px;box-sizing:border-box;width:41.6666666667%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-5{margin-left:41.6666666667%}.sk-grid__col-tab-6{margin-bottom:4px;box-sizing:border-box;width:50%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-6{margin-left:50%}.sk-grid__col-tab-7{margin-bottom:4px;box-sizing:border-box;width:58.3333333333%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-7{margin-left:58.3333333333%}.sk-grid__col-tab-8{margin-bottom:4px;box-sizing:border-box;width:66.6666666667%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-8{margin-left:66.6666666667%}.sk-grid__col-tab-9{margin-bottom:4px;box-sizing:border-box;width:75%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-9{margin-left:75%}.sk-grid__col-tab-10{margin-bottom:4px;box-sizing:border-box;width:83.3333333333%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-10{margin-left:83.3333333333%}.sk-grid__col-tab-11{margin-bottom:4px;box-sizing:border-box;width:91.6666666667%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-11{margin-left:91.6666666667%}.sk-grid__col-tab-12{margin-bottom:4px;box-sizing:border-box;width:100%;padding-left:1.6666666667%;padding-right:1.6666666667%}.sk-grid__col-tab-shift-12{margin-left:100%}}@media screen and (max-width:600px){.sk-grid__col-mob-0{margin-bottom:4px;box-sizing:border-box;width:0%;padding-left:1.6556291391%;padding-right:1.6556291391%}.sk-grid__col-mob-shift-0{margin-left:0}.sk-grid__col-mob-1{margin-bottom:4px;box-sizing:border-box;width:25%;padding-left:1.6556291391%;padding-right:1.6556291391%}.sk-grid__col-mob-shift-1{margin-left:25%}.sk-grid__col-mob-2{margin-bottom:4px;box-sizing:border-box;width:50%;padding-left:1.6556291391%;padding-right:1.6556291391%}.sk-grid__col-mob-shift-2{margin-left:50%}.sk-grid__col-mob-3{margin-bottom:4px;box-sizing:border-box;width:75%;padding-left:1.6556291391%;padding-right:1.6556291391%}.sk-grid__col-mob-shift-3{margin-left:75%}.sk-grid__col-mob-4{margin-bottom:4px;box-sizing:border-box;width:100%;padding-left:1.6556291391%;padding-right:1.6556291391%}.sk-grid__col-mob-shift-4{margin-left:100%}}.sk-loader{background:linear-gradient(270deg,#e2e9f0,#f0f4f8,#e2e9f0,#f0f4f8);background-size:300% 300%;-webkit-animation:sk-animation 3s ease infinite;-moz-animation:sk-animation 3s ease infinite;animation:sk-animation 3s ease infinite;width:100%;height:25px;border-radius:10px}.sk-loader.dark{background:linear-gradient(270deg,#2e3135,#2d2f34,#2e3135,#2d2f34);background-size:300% 300%}.sk-loader--box{border-radius:0}.sk-loader--round{border-radius:50%}@-webkit-keyframes sk-animation{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes sk-animation{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes sk-animation{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.redirect-skeleton-container{width:100%;height:100%;justify-content:center;align-items:center;flex-direction:column}.redirect-skeleton-content{text-align:center;margin-top:-20px}.redirect-skeleton-container h1.title{font-size:14px;color:#0f1222;font-family:Roboto,sans-serif!important;margin:0;text-align:center;background:0 0}@-webkit-keyframes beatStretchDelay{50%{-webkit-transform:scale(.75);transform:scale(.75);-webkit-opacity:.2;opacity:.2}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}}@keyframes beatStretchDelay{50%{-webkit-transform:scale(.75);transform:scale(.75);-webkit-opacity:.2;opacity:.2}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-opacity:1;opacity:1}}@media (min-width:768px){.redirect-skeleton-container h1.title{font-size:14px}.redirect-skeleton-container p.info{font-size:28px}}.redirect-skeleton-container .spinner{display:inline-block;position:relative;background-color:#0364ff;height:60px;width:60px;border-radius:50%;background:conic-gradient(transparent,#0364ff);animation:rotate 1s linear infinite}.redirect-skeleton-container .head,.redirect-skeleton-container .mask{content:'';position:absolute;border-radius:50%}.redirect-skeleton-container .mask{width:50px;height:50px;top:5px;left:5px;background-color:#fcfcfc}.redirect-skeleton-container .head{height:5px;width:5px;background-color:#0364ff;top:0;left:26px}@keyframes rotate{from{transform:rotateZ(0)}to{transform:rotateZ(360deg)}} \ No newline at end of file +.redirect-skeleton-container{width:100%;height:100%;justify-content:center;align-items:center;flex-direction:column;display:none}.redirect-skeleton-content{text-align:center;margin-top:-20px}.redirect-skeleton-container .spinner{display:inline-block;position:relative;background-color:#0364ff;height:60px;width:60px;border-radius:50%;background:conic-gradient(transparent,#0364ff);animation:rotate 1s linear infinite}.redirect-skeleton-container .head,.redirect-skeleton-container .mask{content:'';position:absolute;border-radius:50%}.redirect-skeleton-container .mask{width:50px;height:50px;top:5px;left:5px;background-color:#fcfcfc}.redirect-skeleton-container .head{height:5px;width:5px;background-color:#0364ff;top:0;left:26px}@keyframes rotate{from{transform:rotateZ(0)}to{transform:rotateZ(360deg)}} \ No newline at end of file diff --git a/public/index.html b/public/index.html index e9f55f823..71360a9c3 100644 --- a/public/index.html +++ b/public/index.html @@ -68,10 +68,6 @@ margin: 0; } - .skeleton-holder { - display: none; - } - @media screen and (max-width: 150px) { .crisp-client { display: none; @@ -85,9 +81,8 @@ We're sorry but app doesn't work properly without javascript enabled. Please enable it to continue.
- - -
+ +
- - -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
- -
- -
-
-
-
- - -
-
- -
-
- -
-
-
- -
-
- -
-
-
-
-
-
- - -
-
- -
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-
- - -
-
- -
-
- -
-
- -
-
- -
- -
-
-
- -
-
- - -
-
- -
-
- -
-
-
- -
-
-
- - -
-
- -
-
- -
-
- -
-
- - -
-
- -
-
- -
-
-
-
- -
-
-
- -
-
- -
-
-
- -
-
-
- -
-
- -
-
-
- -
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
- - -
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- -
-
-
-
- -
-
-
- -
-
- - -
-
- -
-
- -
-
-
-
-
-
-
-
-
-
- -
-
-
-
- - -
-
- -
-
- -
-
-
-
-
- -
-
-
-
- - -
-
- -
-
-
- -
-
-
-
-
- -
-
-
-
- - -
-
- -
-
- -
- -
-
-
-
-
-
-
- - -
-
- -
-
- -
-
-
-
-
- - -
-
- -
-
- -
- -
-
-
-
-
- - -
-
-
- -
- -
- -
-
-
- - -
-
-
- -
- -
-
-
diff --git a/src/content-loader/ChangeProviderScreenLoader.vue b/src/content-loader/ChangeProviderScreenLoader.vue deleted file mode 100644 index a52a69d97..000000000 --- a/src/content-loader/ChangeProviderScreenLoader.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - diff --git a/src/content-loader/PopupScreenLoader.vue b/src/content-loader/PopupScreenLoader.vue deleted file mode 100644 index 4cd26ffb5..000000000 --- a/src/content-loader/PopupScreenLoader.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - diff --git a/src/content-loader/index.js b/src/content-loader/index.js deleted file mode 100644 index 9bc1e01a7..000000000 --- a/src/content-loader/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as ChangeProviderScreenLoader } from './ChangeProviderScreenLoader.vue' -export { default as PopupScreenLoader } from './PopupScreenLoader.vue' diff --git a/src/views/Confirm/Confirm.scss b/src/views/Confirm/Confirm.scss index c0d5450b1..ae1fd61f1 100644 --- a/src/views/Confirm/Confirm.scss +++ b/src/views/Confirm/Confirm.scss @@ -1,3 +1,6 @@ .container { max-width: 600px; + &.spinner { + max-width: unset; + } } diff --git a/src/views/Confirm/Confirm.vue b/src/views/Confirm/Confirm.vue index a0d8ba3a6..8d2ff9534 100644 --- a/src/views/Confirm/Confirm.vue +++ b/src/views/Confirm/Confirm.vue @@ -1,7 +1,7 @@