Skip to content

Commit 36ebd39

Browse files
supalarrysupalarry
committed
WIP
1 parent 511c8e3 commit 36ebd39

File tree

4 files changed

+259
-3
lines changed

4 files changed

+259
-3
lines changed

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

Lines changed: 124 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
@apply max-w-sm;
8989
}
9090

91-
.auth-sub-container-thinner {
91+
.auth-sub-container-thinner{
9292
@apply flex;
9393
@apply flex-col;
9494
@apply justify-center;
@@ -103,6 +103,25 @@
103103
@apply max-w-sm;
104104
}
105105

106+
.onboarding-sub-container-thinner {
107+
@apply flex;
108+
@apply flex-col;
109+
@apply justify-center;
110+
@apply items-center;
111+
@apply bg-white;
112+
@apply px-4;
113+
@apply py-4;
114+
@apply w-full;
115+
@apply max-w-sm;
116+
}
117+
118+
.onboarding-sub-container-content-heading {
119+
@apply text-6xl;
120+
@apply font-bold;
121+
@apply leading-tight;
122+
@apply text-gray-matcha;
123+
}
124+
106125
@screen sm {
107126
.auth-sub-container {
108127
@apply px-8;
@@ -115,6 +134,16 @@
115134
@apply items-center;
116135
}
117136

137+
.onboarding-sub-container-main-content-scroll {
138+
@apply flex;
139+
@apply flex-col;
140+
@apply items-center;
141+
@apply w-full;
142+
@apply h-64;
143+
@apply my-8;
144+
@apply overflow-y-scroll;
145+
}
146+
118147
.auth-sub-container-error {
119148
@apply bg-red-500;
120149
@apply p-4;
@@ -180,6 +209,100 @@
180209
@apply cursor-pointer;
181210
@apply text-center;
182211
}
212+
213+
.onboarding-sub-container-content-button-outline {
214+
@apply bg-white-matcha;
215+
@apply text-purple-matcha;
216+
@apply font-bold;
217+
@apply w-full;
218+
@apply max-w-xs;
219+
@apply border-2;
220+
@apply border-purple-matcha;
221+
@apply rounded-md;
222+
@apply py-2;
223+
@apply mt-4;
224+
@apply cursor-pointer;
225+
@apply text-center;
226+
}
227+
228+
.onboarding-sub-container-content-button-outline-light {
229+
@apply bg-white-matcha;
230+
@apply text-purple-matcha;
231+
@apply font-normal;
232+
@apply w-full;
233+
@apply max-w-xs;
234+
@apply border;
235+
@apply border-purple-matcha;
236+
@apply rounded-md;
237+
@apply py-2;
238+
@apply mt-4;
239+
@apply cursor-pointer;
240+
@apply text-center;
241+
@apply w-2/3;
242+
}
243+
244+
.auth-sub-container-content-button:active, .auth-sub-container-content-button:focus,
245+
.onboarding-sub-container-content-button:active, .onboarding-sub-container-content-button:focus{
246+
outline: none;
247+
}
248+
249+
.onboarding-container {
250+
@apply px-4;
251+
@apply h-screen;
252+
@apply flex;
253+
@apply flex-col;
254+
@apply justify-center;
255+
@apply items-center;
256+
}
257+
258+
.onboarding-sub-container {
259+
@apply flex;
260+
@apply flex-col;
261+
@apply justify-center;
262+
@apply items-center;
263+
@apply bg-white-matcha;
264+
@apply rounded-md;
265+
@apply w-full;
266+
@apply max-w-md;
267+
@apply p-8;
268+
}
269+
270+
.onboarding-sub-container-content {
271+
@apply flex;
272+
@apply flex-col;
273+
@apply items-center;
274+
@apply w-full;
275+
}
276+
277+
.onboarding-sub-container-content-button {
278+
@apply bg-purple-matcha;
279+
@apply w-1/2;
280+
@apply rounded-md;
281+
@apply text-white-matcha;
282+
@apply py-2;
283+
@apply mt-4;
284+
@apply cursor-pointer;
285+
@apply text-center;
286+
}
287+
288+
.onboarding-sub-container-upload-button {
289+
background-image: linear-gradient(315deg, #ad1deb 0%, #6e72fc 74%);
290+
@apply w-2/3;
291+
@apply rounded-md;
292+
@apply text-white-matcha;
293+
@apply font-bold;
294+
@apply py-4;
295+
@apply mt-4;
296+
@apply cursor-pointer;
297+
@apply text-center;
298+
}
299+
300+
@screen sm {
301+
.onboarding-container {
302+
@apply px-0;
303+
background-image: linear-gradient(315deg, #ad1deb 0%, #6e72fc 74%);
304+
}
305+
}
183306
}
184307

185308
@tailwind utilities;

‎frontend/src/assets/onboarding/remove.png‎

16.5 KB
Loading

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

Lines changed: 131 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,142 @@
11
<template>
22
<!-- eslint-disable max-len -->
3-
<div>
4-
<h1>onboarding</h1>
3+
<div class="onboarding-container">
4+
<section class="onboarding-sub-container" v-if="slide === 0">
5+
<h1 class="onboarding-sub-container-content-heading text-8xl introduction mb-8 text-center leading-none">Meet<br>your<br>lover</h1>
6+
<button class="onboarding-sub-container-content-button-outline w-1/2 mt-0" v-on:click="nextSlide()">{{buttonText}}</button>
7+
</section>
8+
<section class="onboarding-sub-container" v-if="slide === 1">
9+
<h1>{{slide}} / {{slideCount}}</h1>
10+
<h1 class="onboarding-sub-container-content-heading leading-none">I am</h1>
11+
<div class="h-64 flex flex-col items-center justify-center w-full">
12+
<h1 class="onboarding-sub-container-content-button-outline mt-0">Man</h1>
13+
<h1 class="onboarding-sub-container-content-button-outline mt-2">Woman</h1>
14+
<h1 class="onboarding-sub-container-content-button-outline mt-2">Other</h1>
15+
</div>
16+
<button class="onboarding-sub-container-content-button-outline-light mt-0" v-on:click="nextSlide()">{{buttonText}}</button>
17+
</section>
18+
<section class="onboarding-sub-container" v-if="slide === 2">
19+
<h1>{{slide}} / {{slideCount}}</h1>
20+
<h1 class="onboarding-sub-container-content-heading leading-none">I want</h1>
21+
<div class="h-64 flex flex-col items-center justify-center w-full">
22+
<h1 class="onboarding-sub-container-content-button-outline mt-0">Men</h1>
23+
<h1 class="onboarding-sub-container-content-button-outline mt-2">Women</h1>
24+
<h1 class="onboarding-sub-container-content-button-outline mt-2">Other</h1>
25+
</div>
26+
<button class="onboarding-sub-container-content-button-outline-light mt-0" v-on:click="nextSlide()">{{buttonText}}</button>
27+
</section>
28+
<section class="onboarding-sub-container" v-if="slide === 3">
29+
<h1>{{slide}} / {{slideCount}}</h1>
30+
<h1 class="onboarding-sub-container-content-heading leading-none">I like</h1>
31+
<div class="h-64 pb-4 my-8 sm:my-16 flex flex-col items-center w-full overflow-scroll">
32+
<h1 class="onboarding-sub-container-content-button-outline mt-0">coffee</h1>
33+
<h1 class="onboarding-sub-container-content-button-outline">yoga</h1>
34+
<h1 class="onboarding-sub-container-content-button-outline">football</h1>
35+
<h1 class="onboarding-sub-container-content-button-outline">rap</h1>
36+
<h1 class="onboarding-sub-container-content-button-outline">travelling</h1>
37+
<h1 class="onboarding-sub-container-content-button-outline">Coffee</h1>
38+
<h1 class="onboarding-sub-container-content-button-outline">Coffee</h1>
39+
<h1 class="onboarding-sub-container-content-button-outline">Coffee</h1>
40+
<h1 class="onboarding-sub-container-content-button-outline">Coffee</h1>
41+
<h1 class="onboarding-sub-container-content-button-outline">Coffee</h1>
42+
<h1 class="onboarding-sub-container-content-button-outline">Coffee</h1>
43+
<h1 class="onboarding-sub-container-content-button-outline">Coffee</h1>
44+
</div>
45+
<button class="onboarding-sub-container-content-button-outline-light mt-0" v-on:click="nextSlide()">{{buttonText}}</button>
46+
</section>
47+
<section class="onboarding-sub-container" v-if="slide === 4">
48+
<h1>{{slide}} / {{slideCount}}</h1>
49+
<h1 class="onboarding-sub-container-content-heading leading-none text-center">Profile<br>image</h1>
50+
<button v-if="!slide4.imageUploaded" class="relative onboarding-sub-container-upload-button my-8">
51+
<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">ADD
52+
</button>
53+
<div class="relative my-8 rounded-lg" v-if="slide4.imageUploaded">
54+
<img src="../../assets/onboarding/remove.png" class="absolute cursor-pointer top-0 left-0 -ml-5 -mt-5 w-10" v-on:click="deleteImage()">
55+
<img v-bind:src="slide4.imageUrl" class="w-full rounded-lg">
56+
</div>
57+
<button class="onboarding-sub-container-content-button-outline-light mt-0" v-on:click="nextSlide()">{{buttonText}}</button>
58+
</section>
59+
<section class="onboarding-sub-container" v-if="slide === 5">
60+
<h1>{{slide}} / {{slideCount}}</h1>
61+
<h1 class="onboarding-sub-container-content-heading leading-none text-center">Other<br>images</h1>
62+
<button class="onboarding-sub-container-upload-button my-8" v-on:click="nextSlide()">ADD</button>
63+
<div class="uploaded-image-container">
64+
</div>
65+
<button class="onboarding-sub-container-content-button-outline-light mt-0" v-on:click="nextSlide()">{{buttonText}}</button>
66+
</section>
567
</div>
668
</template>
769

870
<script>
971
1072
export default {
73+
data: () => ({
74+
slide: 0,
75+
slideCount: 6,
76+
slide4: {
77+
image: null,
78+
imageUrl: null,
79+
imageUploaded: false,
80+
imageUploadError: false,
81+
errorText: '',
82+
},
83+
}),
84+
methods: {
85+
nextSlide() {
86+
if (this.slide === this.slideCount) {
87+
this.$router.push('/browse');
88+
}
89+
if (this.slide < this.slideCount) {
90+
this.slide += 1;
91+
}
92+
},
93+
selectFile() {
94+
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
95+
const file = this.$refs.file.files[0];
96+
this.slide4.file = file;
97+
98+
if (!allowedTypes.includes(file.type)) {
99+
this.slide4.errorText = 'Only images allowed';
100+
this.slide4.imageUploadError = true;
101+
return;
102+
}
103+
if (file.size > 2000000) {
104+
this.slide4.errorText = 'File too large';
105+
this.slide4.imageUploadError = true;
106+
return;
107+
}
108+
this.slide4.imageUploaded = true;
109+
this.slide4.imageUrl = URL.createObjectURL(file);
110+
console.log(this.slide4.imageUrl);
111+
},
112+
deleteImage() {
113+
this.slide4.image = null;
114+
this.slide4.imageUploaded = false;
115+
this.slide4.imageUrl = '';
116+
},
117+
},
118+
computed: {
119+
buttonText() {
120+
if (this.slide === 0) {
121+
return 'Let\'s go';
122+
}
123+
if (this.slide < this.slideCount) {
124+
return 'Continue';
125+
}
126+
return 'Finish';
127+
},
128+
},
11129
};
12130
13131
</script>
132+
133+
<style scoped>
134+
.introduction {
135+
background: linear-gradient(315deg, #ad1deb 0%, #6e72fc 74%);
136+
-webkit-background-clip: text;
137+
-webkit-text-fill-color: transparent;
138+
}
139+
.upload-small {
140+
height: 50%;
141+
}
142+
</style>

‎frontend/tailwind.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ module.exports = {
1414
borderRadius: {
1515
'xl' : '2rem',
1616
},
17+
fontSize: {
18+
'7xl': '5rem',
19+
'8xl': '6rem',
20+
},
1721
},
1822
},
1923
variants: {

0 commit comments

Comments
 (0)