95 lines
2.1 KiB
Vue
95 lines
2.1 KiB
Vue
<template>
|
|
<app-container>
|
|
<v-row>
|
|
<v-col cols="12" sm="auto" class="d-flex">
|
|
<h1 class="display-2">Blog</h1>
|
|
|
|
<v-spacer />
|
|
|
|
<v-btn
|
|
v-if="$vuetify.breakpoint.xsOnly"
|
|
dark fab small
|
|
color="light-blue lighten-1"
|
|
@click="toggleMobileSearch"
|
|
class="elevation-2"
|
|
>
|
|
<v-icon>search</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
|
|
<v-spacer />
|
|
|
|
<v-col cols="12" sm="auto">
|
|
<v-text-field
|
|
v-if="$vuetify.breakpoint.smAndUp"
|
|
v-model="searchText"
|
|
label="Search"
|
|
outlined
|
|
append-icon="search"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-expand-transition>
|
|
<v-row v-show="$vuetify.breakpoint.xsOnly && showMobileSearch">
|
|
<v-col class="pt-0">
|
|
<v-text-field v-model="searchText" placeholder="Search" ref="mobileSearchField" single-line outlined />
|
|
</v-col>
|
|
</v-row>
|
|
</v-expand-transition>
|
|
|
|
<v-row class="justify-center">
|
|
<v-col v-for="(blogPost, i) in filteredPosts" :key="i" cols="12" sm="10" md="6" lg="5">
|
|
<router-link :to="'/blog/post/' + blogPost.key">
|
|
<v-card>
|
|
<v-card-title>
|
|
<v-row class="align-center">
|
|
<v-col cols="auto" class="mr-3"><img v-if="blogPost.image" :src="blogPost.image" width="64" height="64"></v-col>
|
|
<v-col class="title">{{ blogPost.title }}</v-col>
|
|
</v-row>
|
|
</v-card-title>
|
|
|
|
<v-divider />
|
|
|
|
<v-card-text>{{ blogPost.desc }}...</v-card-text>
|
|
</v-card>
|
|
</router-link>
|
|
</v-col>
|
|
</v-row>
|
|
</app-container>
|
|
</template>
|
|
|
|
<script>
|
|
import blogPosts from '@/assets/blogPosts'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
posts: blogPosts.map(bPost => {
|
|
return {
|
|
key: bPost.key,
|
|
...bPost.module.attributes,
|
|
}
|
|
}),
|
|
showMobileSearch: false,
|
|
searchText: '',
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
filteredPosts() {
|
|
return this.posts.filter(post => {
|
|
return this.searchText === '' || post.title.toLowerCase().includes(this.searchText.toLowerCase()) || post.desc.toLowerCase().includes(this.searchText.toLowerCase())
|
|
})
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
toggleMobileSearch() {
|
|
this.showMobileSearch = !this.showMobileSearch
|
|
this.$nextTick(() => this.$refs.mobileSearchField.focus())
|
|
},
|
|
},
|
|
}
|
|
</script>
|