mirror of
https://github.com/romancm/gamebrary
synced 2024-11-23 19:53:14 +00:00
Remove side menu in favor of unified settings page
This commit is contained in:
Roman Cervantes
parent
6d1a5da7a5
commit
c4212e85a8
3 changed files with 127 additions and 124 deletions
|
|
@ -32,7 +32,6 @@
|
|||
"vue": "^2.5.2",
|
||||
"vue-analytics": "^5.16.0",
|
||||
"vue-axios": "^2.1.1",
|
||||
"vue-burger-menu": "^1.0.9",
|
||||
"vue-content-placeholders": "^0.2.1",
|
||||
"vue-dragscroll": "^1.5.0",
|
||||
"vue-gallery": "^1.5.0",
|
||||
|
|
|
|||
|
|
@ -8,96 +8,44 @@
|
|||
GAMEBRARY
|
||||
</router-link>
|
||||
|
||||
<button
|
||||
@click="showShareModal"
|
||||
v-if="showShareUrl"
|
||||
title="Share"
|
||||
class="small share"
|
||||
>
|
||||
<i class="fas fa-share-alt" />
|
||||
</button>
|
||||
<div class="share">
|
||||
<button
|
||||
@click="showShareModal"
|
||||
v-if="showShareUrl"
|
||||
title="Share"
|
||||
>
|
||||
<i class="fas fa-share-alt" />
|
||||
</button>
|
||||
|
||||
<slide width="300">
|
||||
<main>
|
||||
<section class="profile">
|
||||
<gravatar :email="user.email" />
|
||||
|
||||
<div class="info">
|
||||
<strong>{{ user.displayName }}</strong>
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="actions">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<i class="fas fa-home" />
|
||||
Home
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'platforms' }" v-if="platform">
|
||||
<i class="fas fa-exchange-alt" />
|
||||
Change platform
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'settings' }">
|
||||
<i class="fas fa-cog" />
|
||||
Settings
|
||||
</router-link>
|
||||
|
||||
<a href="https://www.paypal.me/RomanCervantes/5" target="_blank">
|
||||
<i class="fas fa-donate" />
|
||||
Donate
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/romancmx/gamebrary/issues" target="_blank">
|
||||
<i class="fas fa-bug" />
|
||||
Report bugs
|
||||
</a>
|
||||
|
||||
<a href="https://goo.gl/forms/r0juBCsZaUtJ03qb2" target="_blank">
|
||||
<i class="fas fa-comments" />
|
||||
Submit feedback
|
||||
</a>
|
||||
|
||||
<a @click="signOut">
|
||||
<i class="fas fa-sign-out-alt" />
|
||||
Sign out
|
||||
</a>
|
||||
|
||||
<p>© 2018 Gamebrary</p>
|
||||
</section>
|
||||
</main>
|
||||
</slide>
|
||||
<router-link
|
||||
v-if="showSettings"
|
||||
tag="button"
|
||||
:to="{ name: 'settings' }"
|
||||
>
|
||||
<i class="fas fa-cog" />
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Gravatar from 'vue-gravatar';
|
||||
import firebase from 'firebase/app';
|
||||
import 'firebase/auth';
|
||||
import { swal, $error } from '@/shared/modals';
|
||||
import { Slide } from 'vue-burger-menu';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Gravatar,
|
||||
Slide,
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user', 'platform', 'settings']),
|
||||
|
||||
platformLogo() {
|
||||
return this.platform.useAlt
|
||||
? `/static/img/platforms/${this.platform.code}-alt.svg`
|
||||
: `/static/img/platforms/${this.platform.code}.svg`;
|
||||
},
|
||||
|
||||
isHome() {
|
||||
return this.$route.name === 'home';
|
||||
},
|
||||
|
||||
showSettings() {
|
||||
return this.$route.name !== 'settings';
|
||||
},
|
||||
|
||||
showShareUrl() {
|
||||
return this.$route.name === 'home' && this.platform;
|
||||
},
|
||||
|
|
@ -107,23 +55,11 @@ export default {
|
|||
? 'http://localhost:3000'
|
||||
: 'https://gamebrary.com';
|
||||
|
||||
// eslint-disable-next-line
|
||||
return `${url}/#/s/${this.user.uid}/${this.platform.code}`;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
signOut() {
|
||||
firebase.auth().signOut()
|
||||
.then(() => {
|
||||
this.$store.commit('CLEAR_SESSION');
|
||||
this.$router.push({ name: 'home' });
|
||||
})
|
||||
.catch((error) => {
|
||||
$error(error);
|
||||
});
|
||||
},
|
||||
|
||||
showShareModal() {
|
||||
swal({
|
||||
titleText: 'Share your list',
|
||||
|
|
@ -155,8 +91,12 @@ export default {
|
|||
|
||||
.share {
|
||||
position: fixed;
|
||||
top: $gp / 2;
|
||||
right: $gp / 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
button {
|
||||
height: $navHeight;
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
|
|
@ -179,31 +119,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: $gp;
|
||||
color: $color-dark-gray;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid $color-white;
|
||||
box-shadow: 0 0 2px 0px $color-dark-gray;
|
||||
|
||||
@media($small) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100vh;
|
||||
border-right: 2px solid $color-light-gray;
|
||||
|
|
@ -228,16 +143,6 @@ export default {
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.bm-overlay {
|
||||
nav > div {
|
||||
background: #0008;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,18 @@
|
|||
<template lang="html">
|
||||
<div class="settings" v-if="user" :class="{ dark: settings && settings.nightMode }">
|
||||
<section>
|
||||
<h4>Settings</h4>
|
||||
<h3>Settings</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="profile">
|
||||
<gravatar :email="user.email" />
|
||||
|
||||
<div class="info">
|
||||
<strong>{{ user.displayName }}</strong>
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
|
@ -35,11 +46,40 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<button class="hollow small info logout" @click="signOut">
|
||||
<i class="fas fa-sign-out-alt" />
|
||||
Sign out
|
||||
</button>
|
||||
|
||||
<button @click="promptDelete" class="error hollow small">
|
||||
<i class="fas fa-exclamation-triangle" />
|
||||
Delete Account
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a href="https://www.paypal.me/RomanCervantes/5" class="link small" target="_blank">
|
||||
<i class="fas fa-donate" />
|
||||
Donate
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/romancmx/gamebrary/issues" class="link small" target="_blank">
|
||||
<i class="fas fa-bug" />
|
||||
Report bugs
|
||||
</a>
|
||||
|
||||
<a href="https://goo.gl/forms/r0juBCsZaUtJ03qb2" class="link small" target="_blank">
|
||||
<i class="fas fa-comments" />
|
||||
Submit feedback
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<div class="copyright">
|
||||
<p>
|
||||
<i class="far fa-copyright" /> 2018 Gamebrary.
|
||||
<i class="fas fa-code" /> with <i class="fas fa-heart" /> by
|
||||
<a href="https://twitter.com/romancm" target="_blank">@romancm</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -141,6 +181,17 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
signOut() {
|
||||
firebase.auth().signOut()
|
||||
.then(() => {
|
||||
this.$store.commit('CLEAR_SESSION');
|
||||
this.$router.push({ name: 'home' });
|
||||
})
|
||||
.catch((error) => {
|
||||
$error(error);
|
||||
});
|
||||
},
|
||||
|
||||
save: debounce(
|
||||
// eslint-disable-next-line
|
||||
function() {
|
||||
|
|
@ -162,13 +213,41 @@ export default {
|
|||
|
||||
.settings {
|
||||
background: $color-white;
|
||||
color: $color-dark-gray;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: calc(100vh - #{$navHeight});
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: $gp;
|
||||
color: $color-dark-gray;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid $color-white;
|
||||
box-shadow: 0 0 2px 0px $color-dark-gray;
|
||||
|
||||
@media($small) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
color: $color-dark-gray;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: $gp;
|
||||
display: flex;
|
||||
|
|
@ -192,6 +271,10 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
margin-right: $gp;
|
||||
}
|
||||
|
||||
.share-link {
|
||||
max-width: 340px;
|
||||
margin: 0;
|
||||
|
|
@ -206,4 +289,20 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
padding: $gp;
|
||||
|
||||
p {
|
||||
margin: $gp / 3 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-dark-gray;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue