Files
habitica/website/client/app.vue
Keith Holliday f529a5c64c New client many fixes (#8981)
* Footer style fixes

* Limited string display

* Fixed background reload

* Began adding more avatar items

* Fixed challenge updated cats and official to be seen by admins

* Fixed min prize

* Fixed required fields

* Added my challenges and find challenges to menu

* Removed nav to party page when have no party

* Updated user and notifications icon

* Added accept, reject and messages

* Added selfcare

* Underline links

* Added forgot password

* Fixed task adding

* Disabled habit options that should be

* Added markdown to tags

* Added confirm to delete

* Fixed cancel/delete style

* Fixed rounding

* Added gold icon

* Fixed task icon styles

* Fixed margin botton

* Fixed some repeat styles

* Fixed custom reward style

* Hide like count 0

* Added new tavern images

* Redirect to party page after create

* Hid leader options from non leaders

* Removed manager options from non group plan

* Fixed some nav styles

* Fixed overlay color

* Prevented edit data from being transfered to create

* Added hover state for spells

* Add performance fixes for chat avatars

* Fixed merge conflicts

* Updated fron navigation

* Fixed reg gryphon logo

* Began adding gem modal functionality

* Added purchase gems with gold

* Fixed restore

* Replaced description with summary

* Spells that target tasks fix

* Added initial challenge task load

* Fixed lint issue
2017-08-22 21:58:13 -06:00

104 lines
2.7 KiB
Vue

<template lang="pug">
#app(:class='{"casting-spell": castingSpell}')
notifications
router-view(v-if="!isUserLoggedIn || isStaticPage")
template(v-else)
#loading-screen.h-100.w-100.d-flex.justify-content-center.align-items-center(v-if="!isUserLoaded")
p Loading...
template(v-else)
notifications-display
app-menu
.container-fluid
app-header
div(:class='{sticky: user.preferences.stickyHeader}')
router-view
app-footer
</template>
<style scoped>
.casting-spell {
cursor: crosshair;
}
</style>
<style>
.modal-backdrop.show {
opacity: 1 !important;
background-color: rgba(67, 40, 116, 0.9) !important;
}
</style>
<script>
import axios from 'axios';
import AppMenu from './components/appMenu';
import AppHeader from './components/appHeader';
import AppFooter from './components/appFooter';
import notificationsDisplay from './components/notifications';
import { mapState } from 'client/libs/store';
export default {
name: 'app',
components: {
AppMenu,
AppHeader,
AppFooter,
notificationsDisplay,
},
data () {
return {
isUserLoaded: false,
};
},
computed: {
...mapState(['isUserLoggedIn']),
...mapState({user: 'user.data'}),
isStaticPage () {
return this.$route.meta.requiresLogin === false ? true : false;
},
castingSpell () {
return this.$store.state.spellOptions.castingSpell;
},
},
created () {
// Set up Error interceptors
axios.interceptors.response.use((response) => {
if (this.user) {
this.$set(this.user, 'notifications', response.data.notifications);
}
return response;
}, (error) => {
if (error.response.status >= 400) {
this.$notify({
title: 'Habitica',
text: error.response.data.message,
});
}
return Promise.reject(error);
});
// Setup listener for title
this.$store.watch(state => state.title, (title) => {
document.title = title;
});
if (this.isUserLoggedIn && !this.isStaticPage) {
// Load the user and the user tasks
Promise.all([
this.$store.dispatch('user:fetch'),
this.$store.dispatch('tasks:fetchUserTasks'),
]).then(() => {
this.isUserLoaded = true;
}).catch((err) => {
console.error('Impossible to fetch user. Clean up localStorage and refresh.', err); // eslint-disable-line no-console
});
}
},
};
</script>
<style src="intro.js/minified/introjs.min.css"></style>
<style src="bootstrap/scss/bootstrap.scss" lang="scss"></style>
<style src="assets/scss/index.scss" lang="scss"></style>
<style src="assets/css/index.css"></style>