Skip to content

Commit 2e34891

Browse files
supalarrysupalarry
committed
code cleaned up
1 parent 01ea98d commit 2e34891

File tree

14 files changed

+362
-311
lines changed

14 files changed

+362
-311
lines changed

‎frontend/src/App.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
<template>
2-
<div id="app" class="antialiased">
2+
<div id="app" class="antialiased" v-bind:style="{background: getBackground}">
33
<router-view/>
44
</div>
55
</template>
66

77
<script>
88
99
export default {
10-
components: {
10+
computed: {
11+
getBackground() {
12+
const currentRoute = this.$route.name;
13+
if (currentRoute === 'Onboarding') {
14+
return '#FDFDFD';
15+
}
16+
return '#FFFFFE';
17+
},
1118
},
1219
};
1320
</script>

‎frontend/src/assets/css/tailwind.css‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@
211211
}
212212

213213
.onboarding-sub-container-content-button-outline {
214-
@apply bg-white-matcha;
214+
background: #FDFDFD;
215215
@apply text-purple-matcha;
216216
@apply font-bold;
217217
@apply w-full;
@@ -285,11 +285,11 @@
285285
@apply flex-col;
286286
@apply justify-center;
287287
@apply items-center;
288-
@apply bg-white-matcha;
288+
background: #FDFDFD;
289289
@apply rounded-md;
290290
@apply w-full;
291291
@apply max-w-md;
292-
@apply p-8;
292+
@apply p-4;
293293
}
294294

295295
.onboarding-sub-container-content {
@@ -334,6 +334,27 @@
334334
background-image: linear-gradient(315deg, #ad1deb 0%, #6e72fc 74%);
335335
}
336336
}
337+
338+
@screen sm {
339+
.onboarding-sub-container {
340+
@apply p-8;
341+
}
342+
}
343+
344+
.onboarding-textarea {
345+
@apply w-full;
346+
@apply h-full;
347+
background: #FDFDFD;
348+
@apply py-2;
349+
@apply px-4;
350+
@apply my-8;
351+
@apply rounded-md;
352+
@apply text-gray-matcha;
353+
}
354+
355+
.onboarding-textarea:active, .onboarding-textarea:focus {
356+
outline: none;
357+
}
337358
}
338359

339360
@tailwind utilities;

‎frontend/src/components/app/onboarding/ImageUpload.vue‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
<!-- eslint-disable max-len -->
33
<div class="w-full max-w-sm flex flex-col justify-center items-center">
44
<div class="w-full mt-4">
5-
<p class="text-gray-matcha text-center">{{info.explanation}}</p>
5+
<p class="text-gray-matcha text-center">{{explanation}}</p>
6+
</div>
7+
<div class="auth-sub-container-error mt-8" v-if="image.error">
8+
<h1 class="auth-sub-container-error-message">{{image.error}}</h1>
69
</div>
710
<button v-if="!image.uploaded" class="relative onboarding-sub-container-upload-button w-full my-8">
811
<input class="cursor-pointer opacity-0 absolute top-0 left-0 w-full h-full rounded-md" type="file" v-on:change="selectFile()" ref="file">
@@ -16,8 +19,10 @@
1619
</template>
1720

1821
<script>
22+
/* eslint-disable */
23+
1924
export default {
20-
props: ['info', 'bus'],
25+
props: ['explanation', 'bus'],
2126
data: () => ({
2227
image: {
2328
uploaded: false,
@@ -28,9 +33,9 @@ export default {
2833
}),
2934
methods: {
3035
selectFile() {
36+
this.image.error = '';
3137
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
3238
const file = this.$refs.file.files[0];
33-
this.image.content = file;
3439
3540
if (!allowedTypes.includes(file.type)) {
3641
this.image.error = 'Only images allowed';
@@ -40,24 +45,27 @@ export default {
4045
this.image.error = 'File too large';
4146
return;
4247
}
48+
this.image.content = file;
4349
this.image.url = URL.createObjectURL(file);
4450
this.image.uploaded = true;
45-
this.$emit('imageUploaded');
51+
this.$emit('imageUploaded', {
52+
'content' : this.image.content,
53+
'url' : this.image.url,
54+
});
4655
},
4756
deleteImage() {
57+
this.clearForNextImage();
58+
this.$emit('imageDeleted');
59+
},
60+
clearForNextImage() {
4861
this.image.uploaded = false;
4962
this.image.url = null;
5063
this.image.content = null;
5164
this.image.error = null;
52-
this.$emit('imageDeleted');
53-
},
54-
getImageObject() {
55-
this.$emit('imageObjectGiven', this.image);
56-
this.deleteImage();
5765
},
5866
},
5967
mounted() {
60-
this.bus.$on('getImageObject', this.getImageObject);
68+
this.bus.$on('clearForNextImage', this.clearForNextImage);
6169
},
6270
};
6371
</script>

‎frontend/src/components/app/onboarding/Introduction.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<section class="onboarding-sub-container">
4+
<h1 class="onboarding-sub-container-content-heading text-8xl introduction mb-8 text-center leading-none">
5+
Meet<br>your<br>lover
6+
</h1>
7+
<button class="onboarding-sub-container-content-button-outline w-1/2 mt-0" v-on:click="nextSlide()">
8+
{{slide.buttonText}}
9+
</button>
10+
</section>
11+
</template>
12+
13+
<script>
14+
export default {
15+
props: ['slide'],
16+
methods: {
17+
nextSlide() {
18+
this.$emit('nextSlide');
19+
},
20+
},
21+
};
22+
</script>

‎frontend/src/components/app/onboarding/MainAndSecondaryImagesUpload.vue‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<section class="onboarding-sub-container relative">
4+
<h1>{{slide.current}} / {{slide.count}}</h1>
5+
<h1 class="onboarding-sub-container-content-heading leading-none text-center">{{slide.header}}</h1>
6+
<ImageUpload v-if="imageIndex <= slide.maxImagesAllowed"
7+
v-bind:explanation="explanation"
8+
v-bind:bus="bus"
9+
v-on:imageUploaded="imageUploaded"
10+
v-on:imageDeleted="imageDeleted">
11+
</ImageUpload>
12+
<button class="onboarding-sub-container-slide-button"
13+
v-on:click="saveInput()">{{buttonText}}</button>
14+
</section>
15+
</template>
16+
17+
<script>
18+
/* eslint-disable */
19+
import Vue from 'vue';
20+
import ImageUpload from '@/components/app/onboarding/ImageUpload.vue';
21+
22+
export default {
23+
components: {
24+
ImageUpload,
25+
},
26+
props: ['slide'],
27+
data: () => ({
28+
imageIndex: 1,
29+
imagesUploaded: [],
30+
bus: new Vue(),
31+
}),
32+
methods: {
33+
imageUploaded(...args) {
34+
const [imageObject] = args;
35+
this.imagesUploaded.push(imageObject);
36+
},
37+
imageDeleted() {
38+
this.imagesUploaded.pop();
39+
},
40+
saveInput() {
41+
if (this.imagesUploaded.length === this.imageIndex && this.imageIndex !== this.slide.maxImagesAllowed) {
42+
this.bus.$emit('clearForNextImage');
43+
this.imageIndex += 1;
44+
} else {
45+
this.$emit('saveInput', this.slide.key, this.imagesUploaded);
46+
}
47+
},
48+
},
49+
computed: {
50+
explanation() {
51+
if (this.imageIndex === 1) {
52+
return this.slide.mainImageExplanation;
53+
}
54+
return `${this.slide.secondaryImageExplanation} ${this.imageIndex - 1} / ${this.slide.maxImagesAllowed - 1}`;
55+
},
56+
buttonText() {
57+
if (this.imagesUploaded.length === this.imageIndex) {
58+
return 'Continue';
59+
}
60+
return 'Skip';
61+
},
62+
},
63+
};
64+
</script>

‎frontend/src/components/app/onboarding/MultipleChoice.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<section class="onboarding-sub-container">
4+
<h1>{{slide.current}} / {{slide.count}}</h1>
5+
<h1 class="onboarding-sub-container-content-heading leading-none">{{slide.header}}</h1>
6+
<p class="mt-2">{{optionsSelectedCount}} / {{slide.maxOptionsForSelection}}</p>
7+
<div class="h-64 pb-1 my-8 border-b-4 max-w-xs border-white-matcha flex flex-col items-center w-full overflow-scroll">
8+
<SelectionButton v-for="(option, index) in slide.options" :key="index + option"
9+
v-bind:val="option"
10+
v-bind:canBeSelected="canSelectMoreOptions"
11+
v-bind:bus="bus"
12+
v-on:select="select"
13+
v-on:deselect="deselect">
14+
</SelectionButton>
15+
</div>
16+
<button
17+
v-bind:disabled="!optionSelected.length"
18+
v-bind:class="{
19+
'onboarding-sub-container-slide-button': true,
20+
'opacity-25': !optionSelected.length,
21+
'cursor-default': !optionSelected.length}"
22+
v-on:click="saveInput()">
23+
{{slide.buttonText}}
24+
</button>
25+
</section>
26+
</template>
27+
28+
<script>
29+
import Vue from 'vue';
30+
import SelectionButton from '@/components/app/onboarding/SelectionButton.vue';
31+
32+
export default {
33+
components: {
34+
SelectionButton,
35+
},
36+
props: ['slide'],
37+
data: () => ({
38+
optionSelected: [],
39+
bus: new Vue(),
40+
}),
41+
methods: {
42+
saveInput() {
43+
this.$emit('saveInput', this.slide.key, this.optionSelected);
44+
this.optionSelected = [];
45+
},
46+
select(...args) {
47+
if (this.canSelectMoreOptions) {
48+
const [val] = args;
49+
this.optionSelected.push(val);
50+
}
51+
},
52+
deselect(val) {
53+
this.optionSelected = this.optionSelected.filter((option) => option !== val);
54+
},
55+
},
56+
computed: {
57+
optionsSelectedCount() {
58+
return this.optionSelected.length;
59+
},
60+
canSelectMoreOptions() {
61+
return this.optionsSelectedCount < this.slide.maxOptionsForSelection;
62+
},
63+
},
64+
};
65+
</script>

‎frontend/src/components/app/onboarding/SelectionButton.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,31 @@
66
'onboarding-sub-container-content-button-outline-selected': selected,
77
'cursor-default': invalid,
88
}"
9-
v-on:click="select(val)">{{val}}</h1>
9+
v-on:click="select(val)">
10+
{{val}}
11+
</h1>
1012
</template>
1113

1214
<script>
1315
/* eslint-disable max-len */
1416
1517
export default {
16-
props: ['val', 'bus'],
18+
props: ['val', 'canBeSelected', 'bus'],
1719
data: () => ({
1820
selected: false,
19-
selectedValue: '',
2021
}),
2122
methods: {
2223
select(val) {
23-
if (!this.selected && this.$parent.maxInterests && this.$parent.optionSelected.length === this.$parent.maxInterests) {
24+
if (this.invalid) {
2425
return;
2526
}
2627
if (this.selected) {
2728
this.selected = false;
28-
this.selectedValue = '';
2929
this.$emit('deselect', val);
30-
return;
30+
} else {
31+
this.selected = true;
32+
this.$emit('select', val);
3133
}
32-
this.selected = true;
33-
this.selectedValue = val;
34-
this.$emit('select', val);
3534
},
3635
deselectIfNot(selectedVal) {
3736
if (this.val !== selectedVal) {
@@ -41,7 +40,7 @@ export default {
4140
},
4241
computed: {
4342
invalid() {
44-
return !this.selected && this.$parent.maxInterests && this.$parent.optionSelected.length === this.$parent.maxInterests;
43+
return !this.selected && !this.canBeSelected;
4544
},
4645
},
4746
mounted() {

frontend/src/components/app/onboarding/SlideOne.vue renamed to frontend/src/components/app/onboarding/SingleChoice.vue

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,25 @@
22
<!-- eslint-disable max-len -->
33
<section class="onboarding-sub-container">
44
<h1 class="text-gray-matcha">{{slide.current}} / {{slide.count}}</h1>
5-
<h1 class="onboarding-sub-container-content-heading leading-none">I am</h1>
5+
<h1 class="onboarding-sub-container-content-heading leading-none">{{slide.header}}</h1>
66
<div class="h-64 flex flex-col items-center justify-center w-full">
7-
<SelectionButton v-bind:val="'Male'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
8-
<SelectionButton v-bind:val="'Female'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
9-
<SelectionButton v-bind:val="'Other'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
7+
<SelectionButton v-for="(option, index) in slide.options" :key="index + option"
8+
v-bind:val="option"
9+
v-bind:canBeSelected="true"
10+
v-bind:bus="bus"
11+
v-on:select="select"
12+
v-on:deselect="deselect">
13+
</SelectionButton>
1014
</div>
11-
<button v-bind:disabled="!optionSelected" v-bind:class="{'onboarding-sub-container-slide-button': true, 'opacity-25': !optionSelected, 'cursor-default': !optionSelected}" v-on:click="saveInput()">{{slide.buttonText}}</button>
15+
<button
16+
v-bind:disabled="!optionSelected"
17+
v-bind:class="{
18+
'onboarding-sub-container-slide-button': true,
19+
'opacity-25': !optionSelected,
20+
'cursor-default': !optionSelected}"
21+
v-on:click="saveInput()">
22+
{{slide.buttonText}}
23+
</button>
1224
</section>
1325
</template>
1426

@@ -27,7 +39,8 @@ export default {
2739
}),
2840
methods: {
2941
saveInput() {
30-
this.$emit('saveInput', 'slideOne', this.optionSelected, 0);
42+
this.$emit('saveInput', this.slide.key, this.optionSelected);
43+
this.optionSelected = null;
3144
},
3245
select(...args) {
3346
const [val] = args;

0 commit comments

Comments
 (0)