xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-15 00:13:23 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix scenes error, add basic search results panel, move users to SearchResults route on typing,

Browse Source
This commit is contained in:
Xevion
2020-08-05 18:28:25 -05:00
parent 281613c8d1
commit 12961955c0
4 changed files with 68 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/App.vue
View File

@@ -1,29 +1,30 @@
<template> <template>
<div id="app"> <div id="app">
<b-container :fluid="true" class="py-3 px-lg-5 px-md-4"> <ais-instant-search index-name="prod_THEOFFICEQUOTES" :search-client="searchClient">
<b-row class="my-3 pl-1"> <b-container :fluid="true" class="py-3 px-lg-5 px-md-4">
<b-col lg="3" xl="2" md="12"> <b-row class="my-3 pl-1">
<ais-instant-search index-name="prod_THEOFFICEQUOTES" :search-client="searchClient"> <b-col lg="3" xl="2" md="12">
<ais-search-box placeholder="Search here…"/> <ais-search-box @keydown.native="showResults" placeholder="Search here…"/>
</ais-instant-search> </b-col>
</b-col> </b-row>
</b-row> <b-row>
<b-row> <b-col lg="3" xl="2" md="12">
<b-col lg="3" xl="2" md="12"> <SeasonList></SeasonList>
<SeasonList></SeasonList> </b-col>
</b-col> <b-col class="pt-md-2 pt-lg-0">
<b-col class="pt-md-2 pt-lg-0"> <router-view/>
<router-view/> </b-col>
</b-col> <b-col md="0" lg="0" xl="2"></b-col>
<b-col md="0" lg="0" xl="2"></b-col> </b-row>
</b-row> </b-container>
</b-container> </ais-instant-search>
</div> </div>
</template> </template>
<style lang="scss"> <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=Montserrat:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;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; } body { background-color: #0a0a0a; font-family: 'Roboto', sans-serif; }
.ais-SearchBox-form { .ais-SearchBox-form {
@@ -65,5 +66,12 @@ export default {
), ),
}; };
}, },
methods: {
showResults() {
if (this.$route.path !== '/search_results') {
this.$router.push({ name: 'SearchResults' });
}
},
},
}; };
</script> </script>

14
client/src/components/Episode.vue
View File

@@ -6,12 +6,14 @@
{{ episode.description }} {{ episode.description }}
</span> </span>
</b-card> </b-card>
<b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`" <div v-if="episode != null">
class="mb-1" body-class="p-0 py-2"> <b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`"
<b-card-text> class="mb-1" body-class="p-0 py-2">
<QuoteList :quotes="scene.quotes"></QuoteList> <b-card-text>
</b-card-text> <QuoteList :quotes="scene.quotes"></QuoteList>
</b-card> </b-card-text>
</b-card>
</div>
</div> </div>
</template> </template>

28
client/src/components/SearchResults.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div>
<ais-hits>
<div slot-scope="{ items }">
<b-card v-for="item in items" :key="item.objectID" class="mb-1" body-class="p-0 py-2">
<b-card-text class="p-1 pl-2">
<strong>{{ item.speaker }}</strong>: {{ item.text }}
</b-card-text>
</b-card>
</div>
</ais-hits>
</div>
</template>
<style>
.ais-Hits-item, .ais-InfiniteHits-item, .ais-InfiniteResults-item, .ais-Results-item {
/*margin-top: 1rem;*/
/*margin-left: 1rem;*/
/*padding: 1rem;*/
/*width: calc(25% - 1rem);*/
border: none;
box-shadow: none;
}
</style>
<script>
export default {
name: 'SearchResults',
};
</script>

6
client/src/router.js
View File

@@ -2,6 +2,7 @@ import Vue from 'vue';
import Router from 'vue-router'; import Router from 'vue-router';
import Home from './components/Home.vue'; import Home from './components/Home.vue';
import Episode from './components/Episode.vue'; import Episode from './components/Episode.vue';
import SearchResults from './components/SearchResults.vue';
Vue.use(Router); Vue.use(Router);
@@ -19,5 +20,10 @@ export default new Router({
name: 'Episode', name: 'Episode',
component: Episode, component: Episode,
}, },
{
path: '/search_results',
name: 'SearchResults',
component: SearchResults,
},
], ],
}); });