more updates

This commit is contained in:
Gamebrary 2020-10-13 17:38:35 -07:00
parent 06eeb65e40
commit 3f87019aa5
2 changed files with 19 additions and 16 deletions

View file

@ -4,7 +4,9 @@
:dir="dir" :dir="dir"
> >
<page-header v-if="user" /> <page-header v-if="user" />
<main :class="{ 'authorizing': !user }"> <main
:class="{ 'authorizing': !user, 'bg-dark text-white': nightMode }"
>
<router-view /> <router-view />
</main> </main>
<session-expired v-if="user" /> <session-expired v-if="user" />
@ -15,7 +17,7 @@
import PageHeader from '@/components/PageHeader'; import PageHeader from '@/components/PageHeader';
import SessionExpired from '@/components/SessionExpired'; import SessionExpired from '@/components/SessionExpired';
import firebase from 'firebase/app'; import firebase from 'firebase/app';
import { mapState } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import 'firebase/firestore'; import 'firebase/firestore';
// TODO: store in env vars // TODO: store in env vars
@ -46,6 +48,7 @@ export default {
computed: { computed: {
...mapState(['user', 'wallpaperUrl', 'settings', 'sessionExpired']), ...mapState(['user', 'wallpaperUrl', 'settings', 'sessionExpired']),
...mapGetters(['nightMode']),
userId() { userId() {
return this.debugUserId || this.user.uid; return this.debugUserId || this.user.uid;
@ -103,17 +106,7 @@ export default {
this.loadWallpapers(); this.loadWallpapers();
// TODO: remove onSnapshot? May get costly $$$ // TODO: remove onSnapshot? May get costly $$$
// TODO: track progresses as well // TODO: track progresses as well
// TODO: move to actions
db.collection('lists').doc(this.userId)
.onSnapshot((doc) => {
if (doc.exists) {
const gameLists = doc.data();
this.$store.commit('SET_GAME_LISTS_LEGACY', gameLists);
}
});
// TODO: move to actions // TODO: move to actions
db.collection('settings').doc(this.userId) db.collection('settings').doc(this.userId)
@ -164,9 +157,6 @@ export default {
</style> </style>
<style lang="scss" rel="stylesheet/scss" scoped> <style lang="scss" rel="stylesheet/scss" scoped>
#app {
}
main { main {
position: fixed; position: fixed;
left: 50px; left: 50px;

View file

@ -1,11 +1,13 @@
<template lang="html"> <template lang="html">
<img <img
:src="`static/octicons/${name}.svg`" :src="`static/octicons/${name}.svg`"
:class="{ white, animated, small }" :class="{ white, animated, small, invert: nightMode }"
/> />
</template> </template>
<script> <script>
import { mapGetters } from 'vuex';
export default { export default {
props: { props: {
name: { name: {
@ -16,6 +18,10 @@ export default {
animated: Boolean, animated: Boolean,
small: Boolean, small: Boolean,
}, },
computed: {
...mapGetters(['nightMode']),
},
}; };
</script> </script>
@ -30,11 +36,18 @@ img {
filter: invert(1); filter: invert(1);
} }
width: 22px;
height: 22px;
&.small { &.small {
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
&.invert {
filter: invert(1);
}
&.animated { &.animated {
animation: spin 500ms linear infinite; animation: spin 500ms linear infinite;
transform:rotate(360deg); transform:rotate(360deg);