Feat search

.eslintrc.js

@@ -2,23 +2,23 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: 'babel-eslint',
   },
   extends: [
     '@nuxtjs',
     'prettier',
     'plugin:prettier/recommended',
-    'plugin:nuxt/recommended'
+    'plugin:nuxt/recommended',
   ],
   plugins: ['prettier'],
   rules: {
     quotes: ['warn', 'single'],
     semi: ['warn', 'always'],
     indent: ['warn', 2],
     'no-multi-spaces': ['warn'],
-    'vue/comment-directive': 'off'
-  }
+    'vue/comment-directive': 'off',
+  },
 };

assets/logos/ccv-logo.vue

@@ -105,18 +105,7 @@
 </template>
 
 <style lang="scss" scoped>
-@import 'bulma';
 .ccv-logo {
-  margin-left: $size-5;
   z-index: 100;
 }
-.c1 {
-  fill: var(--color-yellow);
-}
-.c2 {
-  fill: var(--color-green);
-}
-.v {
-  fill: var(--color-yellow);
-}
 </style>

assets/scss/_button.scss

@@ -4,9 +4,21 @@
   @extend .button;
   border-radius: 0 !important;
   font-family: $font-family-bold;
+  white-space: normal;
+  line-height: 1.2;
 }
 
 .d-button-delete {
   @extend .delete;
   border-radius: 0 !important;
-}
+}
+
+.button-nostyle {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--color-link);
+  &:hover {
+    color: var(--color-dark);
+  }
+}

assets/scss/_color.scss

@@ -1,5 +1,3 @@
-@import './node_modules/bulma/bulma.sass';
-
 $variants: "yellow",
 "yellow-light",
 "yellow-lighter",
@@ -56,3 +54,15 @@ $variants: "yellow",
   @extend .has-text-grey-dark;
   @extend .has-background-light;
 }
+
+svg {
+  .c1 {
+    fill: var(--color-yellow);
+  }
+  .c2 {
+    fill: var(--color-green);
+  }
+  .v {
+    fill: var(--color-yellow);
+  }
+}

assets/scss/_helpers.scss

@@ -1,5 +1,3 @@
-@import "./node_modules/bulma/bulma.sass";
-
 // cursor
 .has-cursor-pointer {
   cursor: pointer;
@@ -57,4 +55,4 @@
   @include mobile {
     padding-top: 2rem;
   }
-}
+}

assets/scss/disco.scss

@@ -1,20 +1,17 @@
 @charset "utf-8";
 @import 'variables';
 
-@import './node_modules/bulma/bulma.sass';
+@import 'bulma/bulma.sass';
 
 @import 'helpers';
-
 @import 'banner';
 @import 'button';
 @import 'border';
 @import 'card';
 @import 'color';
 @import 'dialog';
 @import 'expandable';
-@import 'footer';
 @import 'hero';
 @import 'icon';
 @import 'layout';
-@import 'navbar';
 @import 'typography';

components/ComparisonTable.vue

@@ -19,7 +19,7 @@
         :key="cat"
         class="px-4 py-4"
         :class="[
-          ind % 2 === 0 ? 'has-background-light' : 'has-background-white'
+          ind % 2 === 0 ? 'has-background-light' : 'has-background-white',
         ]"
       >
         <h2 class="subtitle">{{ cat | humanize }}</h2>
@@ -37,45 +37,45 @@
               <div v-if="feat.name === cat" class="class-item">
                 <span v-if="feat.class === 'fast'" class="title class-item"
                   ><span class="icon is-size-3 has-text-warning"
-                    ><i class="mdi mdi-speedometer"/></span
+                    ><i class="mdi mdi-speedometer" /></span
                   >{{ feat.class }}</span
                 >
                 <span
                   v-else-if="feat.class === 'faster'"
                   class="title class-item"
                   ><span class="icon is-size-3 has-text-link"
-                    ><i class="mdi mdi-speedometer"/></span
+                    ><i class="mdi mdi-speedometer" /></span
                   >{{ feat.class }}</span
                 >
                 <span
                   v-else-if="feat.class === 'fastest'"
                   class="title class-item"
                   ><span class="icon is-size-3 has-text-success"
-                    ><i class="mdi mdi-speedometer"/></span
+                    ><i class="mdi mdi-speedometer" /></span
                   >{{ feat.class }}</span
                 >
                 <span v-else-if="feat.class === true" class="title class-item"
                   ><span class="icon is-size-3 has-text-success"
-                    ><i class="mdi mdi-check"/></span
+                    ><i class="mdi mdi-check" /></span
                   >Yes</span
                 >
                 <span
                   v-else-if="feat.class === 'partial'"
                   class="title class-item"
                   ><span class="icon is-size-3 has-text-success"
-                    ><i class="mdi mdi-check"/></span
+                    ><i class="mdi mdi-check" /></span
                   >{{ feat.class }}</span
                 >
                 <span v-else-if="feat.class === false" class="title class-item"
                   ><span class="icon is-size-3 has-text-danger"
-                    ><i class="mdi mdi-close"/></span
+                    ><i class="mdi mdi-close" /></span
                   >No</span
                 >
                 <span
                   v-else-if="[1, 2, 3].includes(feat.class)"
                   class="title class-item"
                   ><span class="icon is-size-3 has-text-warning"
-                    ><i class="mdi mdi-shield-half-full"/></span
+                    ><i class="mdi mdi-shield-half-full" /></span
                   >{{ feat.class }}</span
                 >
                 <span v-else class="title">{{ feat.class }}</span>
@@ -100,18 +100,18 @@ export default {
       const cleanStr = str.replace(/_/g, ' ');
       const upperFirst = cleanStr.charAt(0).toUpperCase() + cleanStr.slice(1);
       return upperFirst;
-    }
+    },
   },
   props: {
     data: {
       type: [Array, Object],
-      required: true
+      required: true,
     },
     categories: {
       type: Array,
-      required: true
-    }
-  }
+      required: true,
+    },
+  },
 };
 </script>
 

components/ServiceSelection.vue

@@ -4,11 +4,11 @@
       v-for="(s, i) in data"
       :id="'field' + s.service + i"
       :key="'field' + s.service + i"
-      class="field service-box"
+      class="field service-box my-1 p-4"
       :class="[
         selectedData.includes(s.service)
           ? 'has-background-info'
-          : 'has-background-light'
+          : 'has-background-light',
       ]"
     >
       <button
@@ -19,12 +19,12 @@
         <span v-if="selectedData.includes(s.service)" class="icon is-size-2"
           ><i class="mdi mdi-checkbox-marked"
         /></span>
-        <span v-else class="icon is-size-2"><i class="mdi mdi-square"/></span>
+        <span v-else class="icon is-size-2"><i class="mdi mdi-square" /></span>
       </button>
       <button class="button-nostyle service-label" @click="toggleShowModal(s)">
         <span
           >{{ s.service | humanize }}
-          <span class="icon"><i class="mdi mdi-information"/></span>
+          <span class="icon"><i class="mdi mdi-information" /></span>
         </span>
       </button>
     </div>
@@ -48,34 +48,34 @@
 </template>
 
 <script>
-import DModal from '@/components/base/DModal';
+import DModal from '@/components/base/DModal.vue';
 
 export default {
   components: {
-    DModal
+    DModal,
   },
   filters: {
     humanize(str) {
       const cleanStr = str.replace(/_/g, ' ');
       const upperFirst = cleanStr.charAt(0).toUpperCase() + cleanStr.slice(1);
       return upperFirst;
-    }
+    },
   },
   props: {
     data: {
       type: Array,
-      required: true
+      required: true,
     },
     selectedData: {
       type: Array,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       selected: [],
       showModal: false,
-      modalData: ''
+      modalData: '',
     };
   },
   watch: {
@@ -85,8 +85,8 @@ export default {
         if (newVal.length === 0) {
           this.selected = [];
         }
-      }
-    }
+      },
+    },
   },
   methods: {
     change(service) {
@@ -100,24 +100,19 @@ export default {
     toggleShowModal(data) {
       this.modalData = data;
       this.showModal = true;
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-@import '~bulma/sass/utilities/_all';
-@import '~bulma/sass/helpers/spacing';
 .service-selection {
   display: flex;
   flex-basis: 30%;
   flex-wrap: wrap;
   align-content: flex-start;
 }
 .service-box {
-  @extend .my-1;
-  @extend .px-4;
-  @extend .py-4;
   width: 100%;
   border-radius: 0;
   border: none;
@@ -132,13 +127,4 @@ export default {
 .mdi-checkbox-marked {
   align-self: flex-end;
 }
-.button-nostyle {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--color-link);
-  &:hover {
-    color: var(--color-dark);
-  }
-}
 </style>

components/base/BrownLogo.vue

@@ -9,7 +9,7 @@ import BrownLogo from '@/assets/logos/brown-logo.vue';
 
 export default {
   components: {
-    BrownLogo
+    BrownLogo,
   },
   props: {
     size: {
@@ -18,8 +18,8 @@ export default {
       validator(value) {
         // The value must match one of these strings
         return ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'].includes(value);
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>