Skip to content

Commit e8075a3

Browse files
supalarrysupalarry
committed
settings route use shared navbar
1 parent 7ee357d commit e8075a3

File tree

2 files changed

+123
-122
lines changed

2 files changed

+123
-122
lines changed

‎frontend/src/App.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div id="app" class="antialiased" v-bind:style="{background: getBackground}">
3+
<NavBar class="px-4 sm:px-16 lg:px-32"></NavBar>
34
<keep-alive include="Browse,Search,History">
45
<router-view/>
56
</keep-alive>
@@ -8,7 +9,12 @@
89

910
<script>
1011
12+
import NavBar from '@/components/shared/NavBar.vue';
13+
1114
export default {
15+
components: {
16+
NavBar,
17+
},
1218
computed: {
1319
getBackground() {
1420
const currentRoute = this.$route.name;

‎frontend/src/views/app/Settings.vue‎

Lines changed: 117 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,135 @@
11
<template>
22
<!-- eslint-disable max-len -->
3-
<div>
4-
<NavBar class="px-4 sm:px-16 lg:px-32" v-bind:currentRoute="'Settings'"></NavBar>
5-
<div class="w-full md:w-auto md:mx-16 lg:mx-32 relative md:flex items-start h-auto md:mb-16">
6-
<section class="w-auto md:max-w-xss md:shadow-md md:rounded-md">
7-
<div class="w-full md:hidden h-1 bg-white-matcha"></div>
8-
<div class="md:border-b profile-card text-wrap p-16 md:py-8 flex flex-col w-full md:rounded-t-md">
9-
<div class="mx-auto overflow-hidden w-48 h-48 md:w-24 md:h-24 rounded-full">
10-
<img class="w-full" v-bind:src="getImage()">
11-
</div>
12-
<h1 class="w-full text-center text-3xl md:text-base mt-4 text-white-matcha md:text-gray-matcha capitalize">
13-
{{this.$store.getters.getLoggedInUser.first_name}} {{this.$store.getters.getLoggedInUser.last_name}}</h1>
14-
<div class="text-white-matcha md:text-gray-matcha w-full flex justify-center text-center mt-4 max-w-xs mx-auto">
15-
<div class="mr-4">
16-
<h1 class="font-bold">{{userViewsReceived}}</h1>
17-
<h1 class="text-xs">Views</h1>
18-
</div>
19-
<div class="ml-4">
20-
<h1 class="font-bold">{{this.$store.getters.getLoggedInUser.likes.received.length}}</h1>
21-
<h1 class="text-xs">Likes</h1>
22-
</div>
23-
</div>
3+
<div class="w-full md:w-auto md:mx-16 lg:mx-32 relative md:flex items-start h-auto md:mb-16">
4+
<section class="w-auto md:max-w-xss md:shadow-md md:rounded-md">
5+
<div class="w-full md:hidden h-1 bg-white-matcha"></div>
6+
<div class="md:border-b profile-card text-wrap p-16 md:py-8 flex flex-col w-full md:rounded-t-md">
7+
<div class="mx-auto overflow-hidden w-48 h-48 md:w-24 md:h-24 rounded-full">
8+
<img class="w-full" v-bind:src="getImage()">
249
</div>
25-
<div class="px-8 py-2 md:py-4 md:px-0 w-full">
26-
<MenuButton v-on:click.native="showSetting('account')" v-bind:class="{'md:px-8':true, 'md:bg-purple-200': getShow === 'account'}" v-bind:text="'Account'"></MenuButton>
27-
<hr class="bg-gray-300 w-full md:hidden">
28-
<MenuButton v-on:click.native="showSetting('profile')" v-bind:class="{'md:px-8':true, 'md:bg-purple-200': getShow === 'profile'}" v-bind:text="'Profile'"></MenuButton>
29-
</div>
30-
</section>
31-
<section v-if="getShow === 'account'" class="flex flex-col items-center z-10 absolute bg-white-matcha px-8 md:pb-8 w-full top-0 left-0 h-full md:h-auto md:ml-4 md:relative md:shadow-md md:rounded-md">
32-
<SectionHeader v-bind:name="'account'" v-on:click.native="closeSetting()"></SectionHeader>
33-
<AccountInput
34-
v-bind:name="'First Name'"
35-
v-bind:type="'firstName'"
36-
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.first_name"></AccountInput>
37-
<AccountInput
38-
v-bind:name="'Last Name'"
39-
v-bind:type="'lastName'"
40-
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.last_name"></AccountInput>
41-
<AccountInput
42-
v-bind:name="'Email'"
43-
v-bind:type="'email'"
44-
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.email"></AccountInput>
45-
<AccountInput
46-
v-bind:name="'Username'"
47-
v-bind:type="'username'"
48-
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.username"></AccountInput>
49-
<AccountInput
50-
v-bind:name="'Password'"
51-
v-bind:type="'password'"
52-
v-bind:currentValuePassed="''"></AccountInput>
53-
</section>
54-
<section v-if="getShow === 'profile'" class="flex flex-col items-start z-10 absolute bg-white-matcha w-full top-0 left-0 md:ml-4 md:relative md:shadow-md md:rounded-md">
55-
<div class="px-8 w-full">
56-
<SectionHeader class="mx-auto" v-bind:name="'profile'" v-on:click.native="closeSetting()"></SectionHeader>
57-
</div>
58-
<div class="pb-8 pt-4 px-8 w-full">
59-
<div class="mx-auto max-w-sm">
60-
<h1 class="inline-block mr-4 text-gray-matcha">I am</h1>
61-
<DropdownDisplayChoice
62-
class="inline-block"
63-
v-on:save-single-choice="saveSingleChoice"
64-
v-bind:name="'gender'"
65-
v-bind:starting-option="this.$store.getters.getLoggedInUser.gender"
66-
v-bind:options="['male', 'female', 'other']"></DropdownDisplayChoice>
67-
</div>
68-
<div class="mt-4 mx-auto max-w-sm">
69-
<h1 class="inline-block mr-4 text-gray-matcha">Sexuality</h1>
70-
<DropdownDisplayChoice
71-
class="inline-block"
72-
v-on:save-single-choice="saveSingleChoice"
73-
v-bind:name="'sexuality'"
74-
v-bind:starting-option="this.$store.getters.getLoggedInUser.orientation"
75-
v-bind:options="['heterosexual', 'homosexual', 'bisexual', 'other']"></DropdownDisplayChoice>
10+
<h1 class="w-full text-center text-3xl md:text-base mt-4 text-white-matcha md:text-gray-matcha capitalize">
11+
{{this.$store.getters.getLoggedInUser.first_name}} {{this.$store.getters.getLoggedInUser.last_name}}</h1>
12+
<div class="text-white-matcha md:text-gray-matcha w-full flex justify-center text-center mt-4 max-w-xs mx-auto">
13+
<div class="mr-4">
14+
<h1 class="font-bold">{{userViewsReceived}}</h1>
15+
<h1 class="text-xs">Views</h1>
7616
</div>
77-
<div class="mt-4 mx-auto max-w-sm">
78-
<h1 class="inline-block mr-3 text-gray-matcha">Interests</h1>
79-
<DropdownDisplayChoices
80-
class="inline-block"
81-
v-bind:options="[
82-
'swimming', 'wine', 'reading', 'foodie', 'netflix', 'music', 'yoga', 'golf',
83-
'photography', 'baking', 'shopping', 'outdoors', 'art', 'travel', 'hiking',
84-
'running', 'volunteering', 'cycling', 'climbing', 'tea', 'fishing', 'soccer',
85-
'museum', 'dancing', 'surfing', 'karaoke', 'parties', 'diy',
86-
'walking', 'cat lover', 'movies', 'gardening', 'trivia', 'working out',
87-
'cooking', 'gamer', 'brunch', 'blogging', 'picknicking', 'athlete',
88-
'dog lover', 'politics', 'environmentalism', 'instagram', 'spirituality',
89-
'language exchange', 'sports', 'comedy', 'fashion', 'disney', 'vlogging',
90-
'astrology', 'board games', 'craft beer', 'coffee', 'writer',
91-
]"
92-
v-bind:startingOptions="userInterests"
93-
v-bind:min="3"
94-
v-bind:max="10"
95-
v-bind:name="'interests'"
96-
v-on:save-multiple-choice="saveMultipleChoice"></DropdownDisplayChoices>
17+
<div class="ml-4">
18+
<h1 class="font-bold">{{this.$store.getters.getLoggedInUser.likes.received.length}}</h1>
19+
<h1 class="text-xs">Likes</h1>
9720
</div>
9821
</div>
99-
<div class="py-4 px-8 border-t border-gray-300 w-full">
100-
<AccountInput
101-
class="mx-auto"
102-
v-bind:name="'Bio'"
103-
v-bind:type="'bio'"
104-
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.bio"></AccountInput>
22+
</div>
23+
<div class="px-8 py-2 md:py-4 md:px-0 w-full">
24+
<MenuButton v-on:click.native="showSetting('account')" v-bind:class="{'md:px-8':true, 'md:bg-purple-200': getShow === 'account'}" v-bind:text="'Account'"></MenuButton>
25+
<hr class="bg-gray-300 w-full md:hidden">
26+
<MenuButton v-on:click.native="showSetting('profile')" v-bind:class="{'md:px-8':true, 'md:bg-purple-200': getShow === 'profile'}" v-bind:text="'Profile'"></MenuButton>
27+
</div>
28+
</section>
29+
<section v-if="getShow === 'account'" class="flex flex-col items-center z-10 absolute bg-white-matcha px-8 md:pb-8 w-full top-0 left-0 h-full md:h-auto md:ml-4 md:relative md:shadow-md md:rounded-md">
30+
<SectionHeader v-bind:name="'account'" v-on:click.native="closeSetting()"></SectionHeader>
31+
<AccountInput
32+
v-bind:name="'First Name'"
33+
v-bind:type="'firstName'"
34+
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.first_name"></AccountInput>
35+
<AccountInput
36+
v-bind:name="'Last Name'"
37+
v-bind:type="'lastName'"
38+
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.last_name"></AccountInput>
39+
<AccountInput
40+
v-bind:name="'Email'"
41+
v-bind:type="'email'"
42+
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.email"></AccountInput>
43+
<AccountInput
44+
v-bind:name="'Username'"
45+
v-bind:type="'username'"
46+
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.username"></AccountInput>
47+
<AccountInput
48+
v-bind:name="'Password'"
49+
v-bind:type="'password'"
50+
v-bind:currentValuePassed="''"></AccountInput>
51+
</section>
52+
<section v-if="getShow === 'profile'" class="flex flex-col items-start z-10 absolute bg-white-matcha w-full top-0 left-0 md:ml-4 md:relative md:shadow-md md:rounded-md">
53+
<div class="px-8 w-full">
54+
<SectionHeader class="mx-auto" v-bind:name="'profile'" v-on:click.native="closeSetting()"></SectionHeader>
55+
</div>
56+
<div class="pb-8 pt-4 px-8 w-full">
57+
<div class="mx-auto max-w-sm">
58+
<h1 class="inline-block mr-4 text-gray-matcha">I am</h1>
59+
<DropdownDisplayChoice
60+
class="inline-block"
61+
v-on:save-single-choice="saveSingleChoice"
62+
v-bind:name="'gender'"
63+
v-bind:starting-option="this.$store.getters.getLoggedInUser.gender"
64+
v-bind:options="['male', 'female', 'other']"></DropdownDisplayChoice>
10565
</div>
106-
<div class="text-center px-8 py-8 border-t border-gray-300 w-full">
107-
<h1 class="inline-block mr-3 font-bold text-gray-matcha leading-none">Location</h1>
108-
<h1 class="text-md font-normal opacity-50 text-gray-matcha mx-auto pb-2 max-w-sm">If you refused sharing location, it will be approximated from your computer address </h1>
109-
<h1 v-if="!locationUpdateSuccess" class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer" v-on:click="updateLocation()">Update current location</h1>
110-
<h1 v-else class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer text-green-500">Success</h1>
66+
<div class="mt-4 mx-auto max-w-sm">
67+
<h1 class="inline-block mr-4 text-gray-matcha">Sexuality</h1>
68+
<DropdownDisplayChoice
69+
class="inline-block"
70+
v-on:save-single-choice="saveSingleChoice"
71+
v-bind:name="'sexuality'"
72+
v-bind:starting-option="this.$store.getters.getLoggedInUser.orientation"
73+
v-bind:options="['heterosexual', 'homosexual', 'bisexual', 'other']"></DropdownDisplayChoice>
11174
</div>
112-
<div class="text-center py-8 w-full px-8 border-t border-gray-300">
113-
<h1 class="font-bold text-gray-matcha">Images<span class="text-md font-normal ml-2 opacity-50 text-gray-matcha">{{this.$store.getters.getLoggedInUser.images.length}} / 5</span></h1>
114-
<div class="auth-sub-container-error mt-8" v-if="image.error">
115-
<h1 class="auth-sub-container-error-message">{{image.error}}</h1>
116-
</div>
117-
<button v-if="this.$store.getters.getLoggedInUser.images.length < 6" class="overflow-hidden relative onboarding-sub-container-content-button-outline border w-full max-w-sm my-4">
118-
<input style="padding-left: 100%;" class="cursor-pointer opacity-0 absolute top-0 left-0 w-full h-full rounded-md" type="file" v-on:change="selectFile()" ref="file">
119-
<img src="../../assets/onboarding/cloudPurple.png" class="w-8 mx-auto">
120-
</button>
121-
<ProfileImage
122-
v-for="image in this.$store.getters.getLoggedInUser.images"
123-
:key="image.id"
124-
v-bind:image="image"
125-
v-on:make-primary-image="makePrimaryImage"
126-
v-on:delete-image="deleteImage"></ProfileImage>
75+
<div class="mt-4 mx-auto max-w-sm">
76+
<h1 class="inline-block mr-3 text-gray-matcha">Interests</h1>
77+
<DropdownDisplayChoices
78+
class="inline-block"
79+
v-bind:options="[
80+
'swimming', 'wine', 'reading', 'foodie', 'netflix', 'music', 'yoga', 'golf',
81+
'photography', 'baking', 'shopping', 'outdoors', 'art', 'travel', 'hiking',
82+
'running', 'volunteering', 'cycling', 'climbing', 'tea', 'fishing', 'soccer',
83+
'museum', 'dancing', 'surfing', 'karaoke', 'parties', 'diy',
84+
'walking', 'cat lover', 'movies', 'gardening', 'trivia', 'working out',
85+
'cooking', 'gamer', 'brunch', 'blogging', 'picknicking', 'athlete',
86+
'dog lover', 'politics', 'environmentalism', 'instagram', 'spirituality',
87+
'language exchange', 'sports', 'comedy', 'fashion', 'disney', 'vlogging',
88+
'astrology', 'board games', 'craft beer', 'coffee', 'writer',
89+
]"
90+
v-bind:startingOptions="userInterests"
91+
v-bind:min="3"
92+
v-bind:max="10"
93+
v-bind:name="'interests'"
94+
v-on:save-multiple-choice="saveMultipleChoice"></DropdownDisplayChoices>
95+
</div>
96+
</div>
97+
<div class="py-4 px-8 border-t border-gray-300 w-full">
98+
<AccountInput
99+
class="mx-auto"
100+
v-bind:name="'Bio'"
101+
v-bind:type="'bio'"
102+
v-bind:currentValuePassed="this.$store.getters.getLoggedInUser.bio"></AccountInput>
103+
</div>
104+
<div class="text-center px-8 py-8 border-t border-gray-300 w-full">
105+
<h1 class="inline-block mr-3 font-bold text-gray-matcha leading-none">Location</h1>
106+
<h1 class="text-md font-normal opacity-50 text-gray-matcha mx-auto pb-2 max-w-sm">If you refused sharing location, it will be approximated from your computer address </h1>
107+
<h1 v-if="!locationUpdateSuccess" class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer" v-on:click="updateLocation()">Update current location</h1>
108+
<h1 v-else class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer text-green-500">Success</h1>
109+
</div>
110+
<div class="text-center py-8 w-full px-8 border-t border-gray-300">
111+
<h1 class="font-bold text-gray-matcha">Images<span class="text-md font-normal ml-2 opacity-50 text-gray-matcha">{{this.$store.getters.getLoggedInUser.images.length}} / 5</span></h1>
112+
<div class="auth-sub-container-error mt-8" v-if="image.error">
113+
<h1 class="auth-sub-container-error-message">{{image.error}}</h1>
127114
</div>
128-
</section>
129-
</div>
115+
<button v-if="this.$store.getters.getLoggedInUser.images.length < 6" class="overflow-hidden relative onboarding-sub-container-content-button-outline border w-full max-w-sm my-4">
116+
<input style="padding-left: 100%;" class="cursor-pointer opacity-0 absolute top-0 left-0 w-full h-full rounded-md" type="file" v-on:change="selectFile()" ref="file">
117+
<img src="../../assets/onboarding/cloudPurple.png" class="w-8 mx-auto">
118+
</button>
119+
<ProfileImage
120+
v-for="image in this.$store.getters.getLoggedInUser.images"
121+
:key="image.id"
122+
v-bind:image="image"
123+
v-on:make-primary-image="makePrimaryImage"
124+
v-on:delete-image="deleteImage"></ProfileImage>
125+
</div>
126+
</section>
130127
</div>
131128
</template>
132129

133130
<script>
134131
/* eslint-disable prefer-destructuring */
135132
/* eslint-disable prefer-const */
136-
import NavBar from '@/components/shared/NavBar.vue';
137133
import MenuButton from '@/components/app/settings/MenuButton.vue';
138134
import SectionHeader from '@/components/app/settings/SectionHeader.vue';
139135
import AccountInput from '@/components/app/settings/AccountInput.vue';
@@ -146,7 +142,6 @@ import imageOther from '../../assets/recommendations/avatars/other.png';
146142
147143
export default {
148144
components: {
149-
NavBar,
150145
MenuButton,
151146
AccountInput,
152147
SectionHeader,

0 commit comments

Comments
 (0)