add algolia instantsearch searchbox, better responsive classes

client/src/App.vue

@@ -1,32 +1,69 @@
 <template>
     <div id="app">
-        <b-container :fluid=true class="py-5 px-5">
+        <b-container :fluid="true" class="py-3 px-lg-5 px-md-4">
+            <b-row class="my-3 pl-1">
+                <b-col lg="3" xl="2" md="12">
+                    <ais-instant-search index-name="prod_THEOFFICEQUOTES" :search-client="searchClient">
+                        <ais-search-box placeholder="Search here…"/>
+                    </ais-instant-search>
+                </b-col>
+            </b-row>
             <b-row>
                 <b-col lg="3" xl="2" md="12">
                     <SeasonList></SeasonList>
                 </b-col>
-                <b-col>
+                <b-col class="pt-md-2 pt-lg-0">
                     <router-view/>
                 </b-col>
-                <b-col md="0" lg="1" xl="2">
-
-                </b-col>
+                <b-col md="0" lg="0" xl="2"></b-col>
             </b-row>
         </b-container>
     </div>
 </template>
 
-<style>
-    body { background-color: #0a0a0a; }
+<style lang="scss">
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+    body { background-color: #0a0a0a; font-family: 'Roboto', sans-serif; }
+
+    .ais-SearchBox-form {
+        border: none;
+    }
+
+    .ais-SearchBox-input {
+        color: #d7d7d7;
+        background-color: #3e3e3e;
+        border-color: transparent;
+        border-radius: 1px;
+    }
+
+    .ais-SearchBox-submitIcon, .ais-SearchBox-resetIcon {
+        > path { fill: #bcbcbc; }
+    }
+
+    .ais-SearchBox-input::placeholder {
+        color: white;
+    }
+
 </style>
 
 <script>
+import algoliasearch from 'algoliasearch/lite';
 import SeasonList from './components/SeasonList.vue';
+import 'instantsearch.css/themes/algolia-min.css';
 
 export default {
   name: 'App',
   components: {
     SeasonList,
   },
+  data() {
+    return {
+      searchClient: algoliasearch(
+        process.env.VUE_APP_ALGOLIA_APP_ID,
+        process.env.VUE_APP_ALGOLIA_API_KEY,
+      ),
+    };
+  },
 };
 </script>

client/src/components/Episode.vue

@@ -7,7 +7,7 @@
             </span>
         </b-card>
         <b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`"
-                class="mb-1" body-class="pb-0">
+                class="mb-1" body-class="p-0 py-2">
             <b-card-text>
                 <QuoteList :quotes="scene.quotes"></QuoteList>
             </b-card-text>
@@ -15,6 +15,10 @@
     </div>
 </template>
 
+<style>
+    .card-title { font-family: 'Montserrat', sans-serif; font-weight: 600; }
+</style>
+
 <script>
 import axios from 'axios';
 import QuoteList from './QuoteList.vue';

client/src/components/QuoteList.vue

@@ -1,25 +1,25 @@
 <template>
-    <table class="quote-list mb-4 px-3 w-100">
+    <table class="quote-list px-3 w-100">
         <tr v-for="(quote, index) in quotes" :key="`quote-${index}`">
             <td class="quote-speaker pl-3" v-if="quote.speaker">
                 <span class="my-3">
                     {{ quote.speaker }}
                 </span>
             </td>
-            <td class="quote-text w-100">{{ quote.text }}</td>
+            <td class="quote-text w-100 pr-3">{{ quote.text }}</td>
         </tr>
     </table>
 </template>
 
 <style lang="scss">
-    tr {
-        &:not(:first-child) {
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-        }
-    }
-
+    /*tr {*/
+    /*    &:not(:first-child) {*/
+    /*        border-top: 1px solid rgba(255, 255, 255, 0.1);*/
+    /*    }*/
+    /*}*/
     .quote-list > tr {
         white-space: nowrap;
+        &:hover { background-color: #242424; }
     }
 
     .quote-text {
@@ -27,11 +27,12 @@
     }
 
     .quote-speaker {
-        /*min-width: 100px;*/
+        min-width: 100px;
         padding-right: 1em;
         font-weight: 600;
         vertical-align: text-top;
         text-align: right;
+        font-family: 'Montserrat', sans-serif;
     }
 </style>
 

client/src/components/SeasonList.vue

@@ -5,7 +5,6 @@
                 <a class="no-link" v-b-toggle="'accordion-' + season.season_id">
                     <h5 class="mb-0 pu-0 mu-0 season-title">
                         Season {{ season.season_id }}
-                        <i class="fas fa-chevron-down float-right"></i>
                     </h5>
                 </a>
             </b-card-header>
@@ -25,7 +24,7 @@
 </template>
 
 <style lang="scss">
-    .season-title { color: #a2a2a2; }
+    .season-title { color: #a2a2a2; cursor: pointer; }
 
     .accordion.list-group-item {
         border-radius: 0;
@@ -35,9 +34,7 @@
         font-weight: 500;
 
         &:first-child { border-top-width: 1px; }
-
         &:last-child { border-bottom-width: 0; }
-
     }
 
     .accordion {
@@ -53,6 +50,7 @@
     .card-header {
         background-color: #161616;
         border-bottom: 1px solid rgba(0, 0, 0, 0.88);
+        font-family: 'Montserrat', sans-serif;
     }
 
     .card {
@@ -70,6 +68,8 @@
         color: #a0a0a0;
         border-left-width: 0;
         border-right-width: 0;
+
+        &:hover { background-color: #161616; }
     }
 
     .no-link {

client/src/main.js

@@ -1,10 +1,13 @@
 import 'bootstrap/dist/css/bootstrap.css';
 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
+import InstantSearch from 'vue-instantsearch';
 import App from './App.vue';
 import router from './router';
 
 Vue.use(BootstrapVue);
+Vue.use(InstantSearch);
+
 Vue.config.productionTip = false;
 
 new Vue({