mirror of
https://github.com/romancm/gamebrary
synced 2024-12-18 15:23:14 +00:00
more updates
This commit is contained in:
parent
06eeb65e40
commit
3f87019aa5
2 changed files with 19 additions and 16 deletions
20
src/App.vue
20
src/App.vue
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue