Style tabs, add grid for posts

Co-authored-by: Alina Beck <alina.beck@mail.com>
Co-authored-by: kachulio1 <jngugi88@gmail.com>

webapp/components/_new/features/SearchResults/SearchResults.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="search-results">
     <tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switchTab="switchTab" />
-    <section>
-      <ul v-if="activeResources.length">
+    <section v-if="activeResources.length">
+      <masonry-grid v-if="activeTab === 'posts'">
+        <masonry-grid-item v-for="resource in activeResources" :key="resource.key">
+          <post-teaser :post="resource" />
+        </masonry-grid-item>
+      </masonry-grid>
+      <ul v-else-if="activeTab === 'users'">
         <li v-for="resource in activeResources" :key="resource.key" class="list">
-          <post-teaser v-if="activeTab === 'posts'" :post="resource" />
-          <base-card v-else-if="activeTab === 'users'" :wideContent="true">
+          <base-card :wideContent="true">
             <user-teaser :user="resource" />
           </base-card>
         </li>
@@ -15,12 +19,16 @@
 </template>
 <script>
 import { searchQuery } from '~/graphql/Search.js'
+import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
+import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem'
 import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
 import PostTeaser from '~/components/PostTeaser/PostTeaser'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
 export default {
   components: {
+    MasonryGrid,
+    MasonryGridItem,
     TabNavigation,
     PostTeaser,
     UserTeaser,
@@ -46,6 +54,7 @@ export default {
     activeResources() {
       if (this.activeTab === 'posts') return this.posts
       else if (this.activeTab === 'users') return this.users
+      else return []
     },
     tabOptions() {
       return [
@@ -80,7 +89,13 @@ export default {
 </script>
 <style lang="scss">
 .search-results {
-  width: 40%;
+  // width: 40%;
+
+  > section {
+    padding: $space-small;
+    background-color: $color-neutral-80;
+    border-radius: 0 $border-radius-base $border-radius-base $border-radius-base;
+  }
 }
 .search-results .list {
   margin: $space-xxx-small 0 $space-small 0;

webapp/components/_new/generic/TabNavigation/TabNavigation.vue

@@ -1,9 +1,13 @@
 <template>
   <ul class="tabs">
-    <li v-for="tab in tabs" :key="tab.type" class="tab">
-      <button :class="{ '--active': activeTab === tab.type }" @click="$emit('switchTab', tab.type)">
-        {{ tab.title }}
-      </button>
+    <li
+      v-for="tab in tabs"
+      :key="tab.type"
+      :class="[activeTab === tab.type && '--active', 'tab']"
+      role="button"
+      @click="$emit('switchTab', tab.type)"
+    >
+      {{ tab.title }}
     </li>
   </ul>
 </template>
@@ -23,24 +27,24 @@ export default {
 </script>
 <style lang="scss">
 .tabs {
-  overflow: hidden;
+  display: flex;
+  margin-top: $space-small;
 
   > .tab {
-    display: inline-block;
-    color: darkgrey;
-    margin: $space-small;
+    font-weight: $font-weight-bold;
+    padding: $space-x-small $space-small;
+    margin-right: $space-xx-small;
+    border-radius: $border-radius-base $border-radius-base 0 0;
+    background: $color-neutral-100;
+    cursor: pointer;
 
-    > button {
-      display: block;
-      font-weight: bold;
-      color: #555;
-      padding: 20px;
-      border-radius: 5px 5px 0 0;
-      border-right: 1px solid #ccc;
+    &.--active {
+      background: $color-neutral-80;
+      border: none;
     }
 
-    .--active {
-      background: $background-color-softer-active;
+    &:hover:not(.--active) {
+      background: $color-neutral-85;
     }
   }
 }