Skip to content

Commit 1bf1b6f

Browse files
supalarrysupalarry
committed
sort button and WIP slider
1 parent 4023367 commit 1bf1b6f

File tree

8 files changed

+178
-2
lines changed

8 files changed

+178
-2
lines changed

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"axios": "^0.20.0",
1515
"core-js": "^3.6.5",
1616
"jwt-decode": "^3.0.0-beta.2",
17+
"nouislider": "^14.6.2",
1718
"secure-ls": "^1.2.6",
1819
"tailwindcss": "^1.8.10",
1920
"vee-validate": "^3.3.11",

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,9 @@
374374
@apply w-full;
375375
@apply overflow-scroll;
376376
}
377+
378+
.slider-container {
379+
}
377380
}
378381

379382
@tailwind utilities;

‎frontend/src/assets/sort.png‎

7.48 KB
Loading

‎frontend/src/components/app/recommendations/Recommendations.vue‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<template>
22
<!-- eslint-disable max-len -->
33
<section>
4-
<h1 class="text-5xl mb-4 text-center sm:text-left onboarding-sub-container-content-heading">{{title}}</h1>
4+
<h1 class="text-5xl my-4 text-center sm:text-left leading-none onboarding-sub-container-content-heading">{{recommendations.length}} {{title}}</h1>
5+
<div class="flex mb-12 relative">
6+
<Sort
7+
v-bind:options="['Youngest', 'Oldest', 'Closest', 'Farest', 'Most popular', 'Least popular', 'Most common interests', 'Least common interests']"
8+
v-on:sort="sort"></Sort>
9+
<FilterSlider v-bind:name="'Age'" v-on:filter="filter"></FilterSlider>
10+
</div>
511
<div class="flex flex-wrap items-center justify-start">
612
<RecommendationCard
713
v-for="(recommendation, index) in recommendations" :key="index"
@@ -11,11 +17,24 @@
1117
</template>
1218

1319
<script>
20+
/* eslint-disable */
21+
import Sort from '@/components/shared/Sort.vue';
22+
import FilterSlider from '@/components/shared/FilterSlider.vue';
1423
import RecommendationCard from '@/components/app/recommendations/RecommendationCard.vue';
1524
1625
export default {
1726
components: {
27+
Sort,
1828
RecommendationCard,
29+
FilterSlider,
30+
},
31+
methods: {
32+
sort() {
33+
console.log('sort');
34+
},
35+
filter() {
36+
console.log('filter');
37+
},
1938
},
2039
props: ['title', 'recommendations'],
2140
};

‎frontend/src/components/shared/FilterSlider.vue‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<div class="inline-block focus:outline-none ml-2" @focusout="close" tabindex="1">
4+
<div v-bind:class="{'flex': true, 'items-center': true, 'justify-center': true, 'w-20': true, 'h-12': true, 'rounded-xl': true, 'border': true, 'border-gray-matcha': !closed, 'border border-gray-300': closed, 'px-12': true, 'py-2': true, 'focus:outline-none': true, 'cursor-pointer': true}" @click="toggle">
5+
<h1 v-bind:class="{ 'opacity-50': closed }">{{name}}</h1>
6+
</div>
7+
<div id="sliderContainer" ref="afterClick" v-bind:class="{
8+
'h-16': true,
9+
'w-full': true,
10+
'max-w-xs': true,
11+
'mt-4': true,
12+
'flex': true,
13+
'items-center': true,
14+
'justify-center': true,
15+
'overflow-scroll': true,
16+
'rounded-md': true,
17+
'shadow-2xl': true,
18+
'absolute': true,
19+
'left-0': true,
20+
'rounded-md': true,
21+
'bg-white': true,
22+
'slider-bg': true,
23+
'hidden': closed}">
24+
<div ref="slider" class="focus:outline-none w-64"></div>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script>
30+
import noUiSlider from 'nouislider';
31+
import 'nouislider/distribute/nouislider.css';
32+
33+
export default {
34+
props: ['options', 'name'],
35+
data: () => ({
36+
closed: true,
37+
slider: {
38+
startMin: 25,
39+
startMax: 75,
40+
min: 0,
41+
max: 100,
42+
start: 40,
43+
step: 1,
44+
},
45+
}),
46+
methods: {
47+
select(option) {
48+
this.closed = true;
49+
this.$emit('sort', this.name, option);
50+
},
51+
toggle() {
52+
this.closed = !this.closed;
53+
if (!this.closed) {
54+
this.$nextTick(function () {
55+
this.$refs.afterClick.focus();
56+
});
57+
}
58+
},
59+
close(event) {
60+
// console.log(event.currentTarget.id);
61+
if (!event.currentTarget.contains(event.relatedTarget)) {
62+
this.closed = true;
63+
}
64+
},
65+
},
66+
mounted() {
67+
noUiSlider.create(this.$refs.slider, {
68+
start: [this.slider.startMin, this.slider.startMax],
69+
step: this.slider.step,
70+
range: {
71+
min: this.slider.min,
72+
max: this.slider.max,
73+
},
74+
});
75+
},
76+
};
77+
</script>
78+
79+
<style>
80+
.noUi-handle, .slider-bg {
81+
outline: none;
82+
}
83+
.noUi-handle:focus, .slider-bg:focus {
84+
outline: none;
85+
}
86+
</style>

‎frontend/src/components/shared/NavBar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<router-link v-if="loggedIn" to="/search" class="navigation-button-logged-in">Search</router-link>
3030
<router-link v-if="loggedIn" to="/" class="navigation-button-logged-in">Matches</router-link>
3131
<router-link v-if="loggedIn" to="/" class="navigation-button-logged-in">Profile</router-link>
32-
<router-link v-if="loggedIn" v-on:click.native="logout()" to="/" class="navigation-button-logged-in">Log Out</router-link>
32+
<router-link v-if="loggedIn" v-on:click.native="logout()" to="/" class="navigation-button-logged-in">Exit</router-link>
3333
</div>
3434
</nav>
3535
</template>

‎frontend/src/components/shared/Sort.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<div class="inline-block focus:outline-none">
4+
<div v-bind:class="{'flex': true, 'items-center': true, 'justify-center': true, 'w-20': true, 'h-12': true, 'rounded-xl': true, 'border': true, 'border-gray-matcha': !closed, 'border-gray-300': closed, 'px-4': true, 'py-2': true, 'focus:outline-none': true, 'cursor-pointer': true}" @click="toggle" @focusout="close" tabindex="0">
5+
<img v-bind:class="{ 'opacity-50': closed, 'h-8': true, }" src="../../assets/sort.png">
6+
</div>
7+
<div v-bind:class="{
8+
'w-56': true,
9+
'h-56': true,
10+
'mt-4': true,
11+
'overflow-scroll': true,
12+
'rounded-md': true,
13+
'shadow-2xl': true,
14+
'absolute': true,
15+
'rounded-md': true,
16+
'bg-white': true,
17+
'hidden': closed}">
18+
<h1
19+
v-for="(option, index) in options"
20+
:key="option + index + option"
21+
v-bind:class="{
22+
'cursor-pointer': true,
23+
'block': true,
24+
'pl-4': true,
25+
'border-b': index !== options.length - 1,
26+
'border-gray-300': index !== options.length - 1,
27+
'py-4': true,
28+
'text-sm': true,
29+
'leading-5': true,
30+
'text-gray-700': true,
31+
'hover:bg-gray-100': true,
32+
'hover:text-gray-900': true,
33+
'focus:outline-none': true,
34+
'focus:bg-gray-100': true,
35+
'focus:text-gray-900': true}"
36+
v-on:click="select(option)">
37+
{{option}}
38+
</h1>
39+
</div>
40+
</div>
41+
</template>
42+
43+
<script>
44+
export default {
45+
props: ['options', 'name'],
46+
data: () => ({
47+
closed: true,
48+
}),
49+
methods: {
50+
select(option) {
51+
this.closed = true;
52+
this.$emit('sort', this.name, option);
53+
},
54+
toggle() {
55+
this.closed = !this.closed;
56+
},
57+
close() {
58+
this.closed = true;
59+
},
60+
},
61+
};
62+
</script>

‎frontend/yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6017,6 +6017,11 @@ normalize.css@^8.0.1:
60176017
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
60186018
integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
60196019

6020+
nouislider@^14.6.2:
6021+
version "14.6.2"
6022+
resolved "https://registry.yarnpkg.com/nouislider/-/nouislider-14.6.2.tgz#ecf7b7d1554672e705aab6fcd27e195ed3f67c98"
6023+
integrity sha512-/lJeqJBghNAZS3P2VYrHzm1RM6YJPvvC/1wNpGaHBRX+05wpzUDafrW/ohAYp4kjKhRH8+BJ0vkorCHiMmgTMQ==
6024+
60206025
npm-run-path@^2.0.0:
60216026
version "2.0.2"
60226027
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"

0 commit comments

Comments
 (0)