use grid instead of flexbox for recommendations

Author: supalarry

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

@@ -1,16 +1,12 @@
 <template>
   <!-- eslint-disable max-len -->
   <div v-bind:class="{
-    'card': true,
-    'flex w-full': true,
-    'ml-1': true,
+    'flex': true,
     'flex-col': true,
-    'justify-end items-start': true,
+    'justify-end': true,
     'shadow-inner': true,
     'recommendation-card': true,
-    'rounded-md': true,
-    'mb-2': true,
-    'ml-2': index % 2 === 0}"
+    'rounded-md': true}"
        v-bind:style="{
       'background-repeat': 'no-repeat',
       'background-position': 'center center',
@@ -48,7 +44,6 @@ export default {
           imageForShowcase = userImages[i].link;
         }
       }
-      console.log(imageForShowcase);
       if (imageForShowcase) {
         return imageForShowcase;
       }
@@ -71,9 +66,6 @@ export default {
       return Math.floor(this.recommendation.distance);
     },
   },
-  created() {
-    console.log(this.index);
-  },
 };
 </script>
 
@@ -83,9 +75,4 @@ export default {
   height: 32rem;
   box-shadow: inset 0 -8rem 1rem rgba(0, 0, 0, 0.3);
 }
-@screen md {
-  .card {
-    width: 48%;
-  }
-}
 </style>

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

@@ -2,13 +2,17 @@
   <!-- 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 mb-12 relative">
-    <Sort
-      v-bind:options="['Youngest', 'Oldest', 'Closest', 'Farest', '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>
+    <div class="flex w-full items-stretch sm:items-center justify-center sm:justify-start mb-12 relative">
+      <Sort
+        v-bind:options="['Youngest', 'Oldest', 'Closest', 'Farest', '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>
     </div>
-    <div class="flex flex-wrap items-center justify-start">
+<!--    <div class="flex flex-wrap items-center justify-start">-->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
     <RecommendationCard
       v-for="(recommendation, index) in recommendations" :key="index"
       v-bind:recommendation="recommendation" v-bind:index="index + 1"></RecommendationCard>