Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-28 06:00:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Flatten settings

Browse source
This commit is contained in:
Roman Cervantes 2019-09-18 21:44:46 -07:00
parent dcdceaf496
commit 9b567bab2a
3 changed files with 30 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/components/Settings/AccountSettings.vue
View file

@ -1,42 +1,23 @@
<template lang="html">
<section>
<div class="profile">
<gravatar
:email="user.email"
class="avatar"
/>
<section class="account-setting">
<button class="tiny accent hollow" @click="signOut">
<i class="fas fa-sign-out-alt" />
{{ $t('settings.signOut') }}
</button>
<div class="user-info">
<span>{{ user.displayName }}</span>
<span>{{ user.email }}</span>
<small>Joined {{ moment(user.dateJoined).format('ll') }}</small>
<div class="verified" v-if="user.emailVerified">
<i class="fas fa-user-check" />
Verified
</div>
</div>
</div>
<div class="account-actions">
<button class="tiny accent hollow" @click="signOut">
<i class="fas fa-sign-out-alt" />
{{ $t('settings.signOut') }}
<modal
padded
confirm
:message="$t('settings.deleteAccount.message')"
:title="$t('settings.deleteAccount.title')"
:action-text="$t('settings.deleteAccount.button')"
@action="deleteAccount"
>
<button class="tiny error hollow">
<i class="fas fa-exclamation-triangle" />
{{ $t('settings.deleteAccount.button') }}
</button>
<modal
padded
confirm
:message="$t('settings.deleteAccount.message')"
:title="$t('settings.deleteAccount.title')"
:action-text="$t('settings.deleteAccount.button')"
@action="deleteAccount"
>
<button class="tiny error hollow">
<i class="fas fa-exclamation-triangle" />
{{ $t('settings.deleteAccount.button') }}
</button>
</modal>
</div>
</modal>
</section>
</template>
@ -117,35 +98,8 @@ export default {
@import "~styles/styles";
@import "settings";
.profile {
display: grid;
grid-template-columns: 100px auto;
margin: $gp 0;
position: relative;
border-radius: $border-radius;
background-color: $color-light-gray-transparent;
overflow: hidden;
}
.user-info {
padding: $gp / 2 0;
.account-setting {
display: flex;
flex-direction: column;
}
.verified {
position: absolute;
top: $gp / 4;
right: $gp / 4;
border-radius: $border-radius;
padding: $gp / 2;
background-color: $color-orange;
color: $color-white;
font-size: 10px;
}
.account-actions {
display: flex;
justify-content: space-between;
background: #cf0;
}
</style>

5
src/components/Settings/TagsSettings.vue
View file

@ -1,5 +1,6 @@
<template lang="html">
<div class="tags-settings">
<h4>Tags</h4>
<div class="tag-input">
<input
type="text"
@ -177,6 +178,10 @@ export default {
.tags-settings {
display: grid;
grid-gap: $gp;
margin: $gp 0;
background-color: $color-light-gray;
padding: $gp;
border-radius: $border-radius;
}
.tag-input {

31
src/pages/Settings.vue
View file

@ -1,25 +1,10 @@
<template lang="html">
<div class="settings" :class="{ dark: darkModeEnabled }">
<nav>
<a
class="setting-link"
v-for="section in settingsSections"
:key="section.name"
:class="{ active: activeSection === section.name }"
@click="openSettings(section)"
>
<i :class="section.icon" />
{{ $t(`settings.${section.name}`) }}
</a>
</nav>
<main>
<component
:is="activeComponent"
:reloading="reloading"
v-model="localSettings"
/>
</main>
<general-settings v-model="localSettings" :reloading="reloading" />
<platforms-settings v-model="localSettings" :reloading="reloading" />
<game-board-settings v-model="localSettings" :reloading="reloading" />
<tags-settings v-model="localSettings" :reloading="reloading" />
<account-settings v-model="localSettings" :reloading="reloading" />
</div>
</template>
@ -159,7 +144,7 @@ export default {
.settings {
display: flex;
flex-direction: column;
padding: $gp $gp * 2;
padding: 0 $gp * 2 $gp * 2;
margin: 0 auto;
min-height: 600px;
}
@ -192,10 +177,6 @@ export default {
}
}
main {
margin-top: $gp;
}
footer {
position: absolute;
bottom: 0;