Make Search fully SSR

components/ModResult.vue

@@ -426,6 +426,7 @@ export default {
   grid-column: 2;
   max-height: 150px;
   font-size: 11pt;
+  margin: auto 0;
 }
 
 .mod-name {
@@ -445,7 +446,6 @@ export default {
   grid-template-rows: 20px 20px;
   margin-top: 5px;
   grid-column: 2;
-  align-self: flex-end;
   align-items: flex-start;
   align-self: flex-start;
 
@@ -486,9 +486,8 @@ export default {
 .categories {
   display: flex;
   flex-direction: row;
-  margin: 0 0 5px 0;
   grid-column: 1;
-  margin-bottom: auto;
+  margin: 0 0 auto;
 }
 
 .categories p {
@@ -526,7 +525,7 @@ export default {
 @media screen and (min-width: 900px) {
   .result {
     grid-template-columns: 90px auto;
-    grid-template-rows: auto auto 30px;
+    grid-template-rows: auto auto 35px;
   }
 
   .result-infos {
@@ -564,7 +563,7 @@ export default {
   }
 
   .mod-name {
-    font-size: 16pt;
+    font-size: 18pt;
   }
 
   .result-summary {
@@ -582,13 +581,13 @@ export default {
   }
 
   .categories {
-    margin: auto 0 5px auto;
+    margin: 0 5px 10px auto;
     grid-row: 3;
     grid-column: 3;
   }
 
   .mod-name {
-    font-size: 18pt;
+    font-size: 20pt;
   }
 }
 

components/SearchFilter.vue

@@ -0,0 +1,70 @@
+<template>
+  <p
+    class="filter"
+    :class="{ 'filter-active': activeFilters.includes(facetName) }"
+    @click="toggle"
+  >
+    <slot></slot>
+    {{ displayName }}
+  </p>
+</template>
+
+<script>
+export default {
+  name: 'SearchFilter',
+  props: {
+    facetName: {
+      type: String,
+      default: '',
+    },
+    displayName: {
+      type: String,
+      default: '',
+    },
+    activeFilters: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  methods: {
+    toggle() {
+      this.$emit('toggle', this.facetName)
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.filter {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 2px 2px 2px 20px;
+  margin: 0 0 0 5px;
+  border-left: 4px solid var(--color-grey-3);
+  border-radius: 0 0.25rem 0.25rem 0;
+  color: var(--color-grey-5);
+  font-size: 1rem;
+  letter-spacing: 0.02rem;
+
+  svg {
+    margin-right: 5px;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-grey-1);
+    color: var(--color-text);
+  }
+}
+
+.filter-active {
+  background-color: var(--color-grey-1);
+  color: var(--color-text);
+  border-left: 4px solid var(--color-brand);
+}
+</style>