sort and filter UI finalized

Author: supalarry

frontend/src/assets/css/tailwind.css

@@ -399,7 +399,7 @@
     }
 
     .sort-dropdown {
-        @apply w-56;
+        @apply w-auto;
         @apply h-56;
         @apply mt-4;
         @apply overflow-scroll;
@@ -413,8 +413,7 @@
     .sort-dropdown-option {
         @apply cursor-pointer;
         @apply block;
-        @apply pl-4;
-        @apply py-4;
+        @apply p-4;
         @apply text-sm;
         @apply leading-5;
         @apply text-gray-700;

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

@@ -1,15 +1,30 @@
 <template>
   <!-- eslint-disable max-len -->
   <section>
-    <h1 class="text-5xl my-4 text-center sm:text-left leading-none onboarding-sub-container-content-heading">{{recommendations.length}} {{title}}</h1>
-    <div class="flex w-full items-stretch sm:items-center justify-center sm:justify-start mb-12 relative">
+    <h1 class="text-5xl my-4 text-center md:text-left leading-none onboarding-sub-container-content-heading">{{recommendations.length}} {{title}}</h1>
+    <div class="flex w-full items-stretch sm:items-center justify-center md:justify-start mb-12 relative">
       <Sort
-        v-bind:options="['Youngest', 'Oldest', 'Closest', 'Farest', 'Most popular', 'Least popular', 'Most common interests', 'Least common interests']"
+        v-bind:position="'left'"
+        v-bind:options="['Youngest', 'Oldest', 'Closest', 'Furthest', 'Most popular', 'Least popular', 'Most common interests', 'Least common interests']"
         v-on:sort="sort"></Sort>
       <FilterSlider v-bind:name="'age'" v-on:filter="filter"></FilterSlider>
       <FilterSlider v-bind:unit="'km'" v-bind:name="'distance'" v-on:filter="filter"></FilterSlider>
       <FilterSlider v-bind:unit="'pts'" v-bind:name="'fame'" v-on:filter="filter"></FilterSlider>
-      <FilterSlider v-bind:name="'tags'" v-on:filter="filter"></FilterSlider>
+      <MultipleFiltersDropdown
+        v-bind:position="'right'"
+        v-bind:options="[
+          'swimming', 'wine', 'reading', 'foodie', 'netflix', 'music', 'yoga', 'golf',
+          'photography', 'baking', 'shopping', 'outdoors', 'art', 'travel', 'hiking',
+          'running', 'volunteering', 'cycling', 'climbing', 'tea', 'fishing', 'soccer',
+          'museum', 'dancing', 'surfing', 'karaoke', 'parties', 'diy',
+          'walking', 'cat lover', 'movies', 'gardening', 'trivia', 'working out',
+          'cooking', 'gamer', 'brunch', 'blogging', 'picknicking', 'athlete',
+          'dog lover', 'politics', 'environmentalism', 'instagram', 'spirituality',
+          'language exchange', 'sports', 'comedy', 'fashion', 'disney', 'vlogging',
+          'astrology', 'board games', 'craft beer', 'coffee', 'writer',
+        ]"
+        v-bind:name="'interests'"
+        v-on:filter="filter"></MultipleFiltersDropdown>
     </div>
 <!--    <div class="flex flex-wrap items-center justify-start">-->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
@@ -25,12 +40,14 @@
 import Sort from '@/components/shared/Sort.vue';
 import FilterSlider from '@/components/shared/FilterSlider.vue';
 import RecommendationCard from '@/components/app/recommendations/RecommendationCard.vue';
+import MultipleFiltersDropdown from '@/components/shared/MultipleFiltersDropdown.vue';
 
 export default {
   components: {
     Sort,
     RecommendationCard,
     FilterSlider,
+    MultipleFiltersDropdown,
   },
   methods: {
     sort() {

frontend/src/components/shared/FilterSlider.vue

@@ -5,7 +5,7 @@
       <h1 v-bind:class="{ 'opacity-50': closed, 'noSelect': true, 'capitalize': true }">{{name}}</h1>
     </div>
     <div ref="sliderDropdown" v-bind:class="{'slider-dropdown': true, 'hidden': closed}">
-      <div class="flex my-4">
+      <div class="flex mb-4 mt-2">
         <h1><span class="font-bold">{{this.slider.startMin}} {{this.unit}}</span> to <span class="font-bold">{{this.slider.startMax}} {{this.unit}}</span></h1>
       </div>
       <div ref="slider" class="w-64 mb-4"></div>

frontend/src/components/shared/MultipleFiltersDropdown.vue

@@ -0,0 +1,37 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div class="focus:outline-none ml-2 flex-1 sm:flex-none" @focusout="close" tabindex="0">
+    <div v-bind:class="{'filter-button': true, 'border-gray-matcha': !closed}" @click="toggle">
+      <h1 v-bind:class="{ 'opacity-50': closed, 'noSelect': true, 'capitalize': true }">{{name}}</h1>
+    </div>
+    <div v-bind:class="{'sort-dropdown': true, 'hidden': closed, 'right-0': position === 'right', 'md:right-auto': position === 'right'}">
+      <h1 v-for="(option, index) in options" :key="option + index + option"
+          v-bind:class="{'sort-dropdown-option': true, 'border-b': index !== options.length - 1, 'capitalize': true}"
+          v-on:click="select(option)">
+        {{option}}
+      </h1>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['options', 'name', 'position'],
+  data: () => ({
+    closed: true,
+    selectedFilters: [],
+  }),
+  methods: {
+    select(option) {
+      this.selectedFilters.push(option);
+      this.$emit('sort', option);
+    },
+    toggle() {
+      this.closed = !this.closed;
+    },
+    close() {
+      this.closed = true;
+    },
+  },
+};
+</script>

frontend/src/components/shared/Sort.vue

@@ -2,12 +2,11 @@
   <!-- eslint-disable max-len -->
   <div class="focus:outline-none flex-1 sm:flex-none" @focusout="close" tabindex="0">
     <div v-bind:class="{'sort-button': true, 'border-gray-matcha': !closed}" @click="toggle">
-<!--      <img v-bind:class="{ 'opacity-50': closed, 'noSelect': true }" src="../../assets/sort.png">-->
       <h1 v-bind:class="{ 'opacity-50': closed, 'noSelect': true, 'capitalize': true }">↑↓</h1>
     </div>
-    <div v-bind:class="{'sort-dropdown': true, 'hidden': closed}">
+    <div v-bind:class="{'sort-dropdown': true, 'hidden': closed, 'left-0': position === 'left', 'md:left-auto': position === 'left'}">
         <h1 v-for="(option, index) in options" :key="option + index + option"
-          v-bind:class="{'sort-dropdown-option': true, 'border-b': index !== options.length - 1}"
+          v-bind:class="{'sort-dropdown-option': true, 'border-b': index !== options.length - 1, 'font-bold': option === currentOption}"
           v-on:click="select(option)">
           {{option}}
         </h1>
@@ -17,13 +16,15 @@
 
 <script>
 export default {
-  props: ['options', 'name'],
+  props: ['options', 'name', 'position'],
   data: () => ({
     closed: true,
+    currentOption: '',
   }),
   methods: {
     select(option) {
       this.closed = true;
+      this.currentOption = option;
       this.$emit('sort', option);
     },
     toggle() {