Skip to content

Commit 99022b0

Browse files
kabaluyotkabaluyot
authored
Merge pull request #39 from danvincent11/master
fix: add full page loader and remove unused library
2 parents ed3cc7e + d2f01ea commit 99022b0

12 files changed

+168
-130
lines changed

‎components/Loading.vue

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div v-if="loading" class="loading--page">
3+
<v-container fluid class="loading--container">
4+
<img src="/icon.png" alt="Nuxify logo" width="100" height="100" />
5+
</v-container>
6+
</div>
7+
</template>
8+
9+
<script lang="ts">
10+
import { Component, Vue } from 'nuxt-property-decorator'
11+
12+
@Component
13+
export default class SnackbarAlert extends Vue {
14+
loading: boolean = false
15+
16+
/**
17+
* Start loading
18+
*
19+
* @return {void}
20+
*/
21+
start(): void {
22+
this.loading = true
23+
}
24+
25+
/**
26+
* Finish loading
27+
*
28+
* @return {void}
29+
*/
30+
finish(): void {
31+
this.loading = false
32+
}
33+
}
34+
</script>
35+
36+
<style lang="scss" scoped>
37+
.loading--page {
38+
position: fixed;
39+
top: 0;
40+
left: 0;
41+
width: 100%;
42+
height: 100%;
43+
background: #ffffff;
44+
z-index: 99999999;
45+
.loading--container {
46+
width: 100%;
47+
height: 100%;
48+
display: flex;
49+
justify-content: center;
50+
align-items: center;
51+
img {
52+
animation: beat 0.75s infinite alternate;
53+
transform-origin: center !important;
54+
}
55+
56+
/* Heart beat animation */
57+
@keyframes beat {
58+
to {
59+
transform: scale(1.4);
60+
}
61+
}
62+
}
63+
}
64+
</style>

‎components/SnackbarAlert.vue

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<div class="alert--container">
3+
<v-alert
4+
v-if="global_alert.state"
5+
tile
6+
:color="global_alert.variant"
7+
class="alert-message white--text"
8+
>
9+
<h1>{{ global_alert.message }}</h1>
10+
<v-btn fab x-small depressed text @click="global_set_alert(false)">
11+
<v-icon color="white"> mdi-close </v-icon>
12+
</v-btn>
13+
</v-alert>
14+
</div>
15+
</template>
16+
17+
<script lang="ts">
18+
import { Component, Vue, namespace, Watch } from 'nuxt-property-decorator'
19+
import { AlertInterface } from '~/store/global/state.types'
20+
21+
const GLOBAL_STORE = namespace('global')
22+
23+
@Component
24+
export default class SnackbarAlert extends Vue {
25+
@GLOBAL_STORE.State('alert') global_alert!: AlertInterface
26+
@GLOBAL_STORE.Action('setAlert')
27+
global_set_alert!: (payload: AlertInterface) => void
28+
29+
@Watch('global_alert', { immediate: true, deep: true })
30+
onAlertChange(): void {
31+
if (this.global_alert.state) {
32+
if (!this.global_alert.dismiss) {
33+
return
34+
}
35+
36+
setTimeout(() => {
37+
this.global_set_alert({ state: false })
38+
}, this.global_alert.timeout)
39+
}
40+
}
41+
}
42+
</script>
43+
44+
<style lang="scss" scoped>
45+
.alert--container {
46+
position: fixed;
47+
width: 100%;
48+
bottom: 0;
49+
left: 0;
50+
z-index: 9999;
51+
.alert-message {
52+
margin-bottom: 0;
53+
padding: 10px 20px !important;
54+
h1 {
55+
font-size: 18px;
56+
text-align: center;
57+
font-weight: normal;
58+
font-stretch: normal;
59+
font-style: normal;
60+
line-height: normal;
61+
padding: 0 40px !important;
62+
}
63+
.v-btn {
64+
position: absolute;
65+
right: 1%;
66+
top: 50%;
67+
-ms-transform: translateY(-50%);
68+
transform: translateY(-50%);
69+
}
70+
}
71+
}
72+
73+
@media (max-device-width: 599px) {
74+
.alert--container {
75+
.alert-message {
76+
h1 {
77+
padding: 5px 20px !important;
78+
}
79+
}
80+
}
81+
}
82+
</style>

‎components/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Loading from './Loading.vue'
2+
import SnackbarAlert from './SnackbarAlert.vue'
3+
4+
export { Loading, SnackbarAlert }

‎layouts/default.vue

+12-33
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,36 @@
22
<v-app id="app">
33
<Header />
44
<nuxt />
5+
56
<!-- Alert pop-up -->
6-
<div class="alert--container">
7-
<v-alert
8-
v-if="global_alert.state"
9-
tile
10-
:color="global_alert.variant"
11-
class="alert-message white--text"
12-
>
13-
<h1>{{ global_alert.message }}</h1>
14-
<v-btn fab x-small depressed text @click="global_set_alert(false)">
15-
<v-icon color="white"> mdi-close </v-icon>
16-
</v-btn>
17-
</v-alert>
18-
</div>
7+
<SnackbarAlert />
8+
199
<Footer />
2010
</v-app>
2111
</template>
2212

2313
<script lang="ts">
24-
import { Component, Vue, namespace, Watch } from 'nuxt-property-decorator'
14+
import { Component, Vue } from 'nuxt-property-decorator'
2515
import { Footer } from '~/components/footer'
2616
import { Header } from '~/components/header'
27-
import { AlertInterface } from '~/store/global/state.types'
28-
29-
const GLOBAL_STORE = namespace('global')
17+
import { SnackbarAlert } from '~/components'
3018
3119
@Component({
3220
components: {
3321
Header,
3422
Footer,
23+
SnackbarAlert,
3524
},
3625
})
3726
export default class Default extends Vue {
38-
@GLOBAL_STORE.State('alert') global_alert!: AlertInterface
39-
@GLOBAL_STORE.Action('setAlert')
40-
global_set_alert!: (payload: AlertInterface) => void
41-
42-
@Watch('global_alert')
43-
onAlertChange(): void {
44-
if (this.global_alert.state) {
45-
if (!this.global_alert.dismiss) {
46-
return
47-
}
48-
49-
setTimeout(() => {
50-
this.global_set_alert({ state: false })
51-
}, this.global_alert.timeout)
27+
beforeCreate(): void {
28+
if (process.client) {
29+
this.$nextTick(() => {
30+
this.$nuxt.$loading.start()
31+
setTimeout(() => this.$nuxt.$loading.finish(), 3000)
32+
})
5233
}
5334
}
54-
55-
mounted(): void {}
5635
}
5736
</script>
5837

‎nuxt.config.js

+2-24
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,8 @@ export default {
8383
/*
8484
** Customize the progress-bar color
8585
*/
86-
loading: false,
87-
88-
loadingIndicator: {
89-
name: false,
90-
},
86+
loading: '~/components/Loading.vue',
87+
loadingIndicator: '~/components/Loading.vue',
9188
/*
9289
** Global CSS
9390
*/
@@ -97,7 +94,6 @@ export default {
9794
*/
9895
plugins: [
9996
{ src: '~/plugins/repository' },
100-
{ src: '~/plugins/components/vue-slick-carousel' },
10197
{ src: '~/plugins/components/icons' },
10298
],
10399
/*
@@ -108,7 +104,6 @@ export default {
108104
// Doc: https://github.com/nuxt-community/stylelint-module
109105
'@nuxtjs/stylelint-module',
110106
'@nuxtjs/vuetify',
111-
'vue-toastification/nuxt',
112107
],
113108
/*
114109
** Nuxt.js modules
@@ -153,23 +148,6 @@ export default {
153148
baseURL: process.env.API_URL,
154149
debug: DEBUG,
155150
},
156-
toast: {
157-
transition: 'Vue-Toastification__fade',
158-
maxToasts: 20,
159-
newestOnTop: true,
160-
position: 'bottom-left',
161-
timeout: 5000,
162-
closeOnClick: true,
163-
pauseOnFocusLoss: true,
164-
pauseOnHover: true,
165-
draggable: false,
166-
draggablePercent: 0.6,
167-
showCloseButtonOnHover: true,
168-
hideProgressBar: true,
169-
closeButton: 'button',
170-
icon: true,
171-
rtl: false,
172-
},
173151
/*
174152
** vuetify module configuration
175153
** https://github.com/nuxt-community/vuetify-module

‎package-lock.json

+2-54
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)