removed modal in favor of regular page

This commit is contained in:
Gamebrary 2021-03-02 20:23:54 -07:00
parent 456fe3acc0
commit a39a649a79
3 changed files with 51 additions and 34 deletions

View file

@ -3,26 +3,52 @@
<!-- TODO: Profile in settings -->
<!-- TODO: Profile public page -->
<template lang="html">
<div>
<b-button v-b-modal.edit-profile>
<b-container>
<h1>{{ profile.name }}</h1>
<p class="lead">{{ profile.bio }}</p>
<pre>gamebrary.com/{{ profile.userName }}</pre>
<empty-state
title="Profile"
message="Create a public profile now!"
action-text="Get Started!"
@action="createProfile"
/>
<b-button :to="{ name: 'edit-profile' }">
Edit
</b-button>
<edit-profile-modal />
</div>
<p><b-badge>{{ profile.followers.length }}</b-badge> Followers</p>
<p><b-badge>{{ profile.following.length }}</b-badge> Followers</p>
<a :href="profile.website" target="_blank">Website</a>
<b-button :href="profile.twitter" target="_blank">
<i class="fab fa-twitter fa-fw" aria-hidden />
</b-button>
<pre>{{ profile }}</pre>
</b-container>
</template>
<script>
import EditProfileModal from '@/components/EditProfileModal';
import { mapGetters } from 'vuex';
import { mapGetters, mapState } from 'vuex';
import EmptyState from '@/components/EmptyState';
export default {
components: {
EditProfileModal,
EmptyState,
},
computed: {
...mapGetters(['darkTheme']),
...mapState(['profile']),
},
methods: {
createProfile() {
// console.log('boom');
},
},
};
</script>

View file

@ -1,27 +1,6 @@
<template lang="html">
<b-modal
id="edit-profile"
:header-bg-variant="darkTheme ? 'dark' : null"
:header-text-variant="darkTheme ? 'white' : null"
:body-bg-variant="darkTheme ? 'dark' : null"
:body-text-variant="darkTheme ? 'white' : null"
hide-footer
>
<template v-slot:modal-header="{ close }">
<modal-header
title="Edit profile"
@close="close"
>
<b-button
variant="primary"
@click="save"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
</modal-header>
</template>
<b-container>
<h1>Edit profile</h1>
<b-button @click="checkUserNameAvailability">
Check availability
</b-button>
@ -35,6 +14,7 @@
>
<b-form-input
id="userName"
disabled
v-model="profile.userName"
placeholder=""
/>
@ -69,7 +49,7 @@
<pre>{{ user }}</pre>
</b-modal>
</b-container>
</template>
<script>
@ -87,8 +67,10 @@ export default {
followers: [],
following: [],
dateJoined: [],
// profilePicture: '',
// backdrop: '',
friendCode: '',
onlineId: '',
gamerTag: '',
profilePicture: '',
location: 'Chandler, AZ',
website: 'https://gamebrary.com',
twitter: 'romancm',

View file

@ -13,6 +13,7 @@ import Boards from '@/components/Boards';
import Settings from '@/pages/Settings';
import Upgrade from '@/pages/Upgrade';
import Profile from '@/pages/Profile';
import EditProfile from '@/pages/Profile/EditProfile';
import NotFound from '@/pages/NotFound';
Vue.use(Router);
@ -95,6 +96,14 @@ export default new Router({
title: 'Profile',
},
},
{
name: 'edit-profile',
path: '/profile/edit',
component: EditProfile,
meta: {
title: 'Edit profile',
},
},
{
name: 'about',
path: '/about',