Commit 305dc056 authored by Aral Balkan's avatar Aral Balkan

Add mock search

parent 0adc0acf
......@@ -4187,6 +4187,12 @@
"debug": "3.1.0"
}
},
"font-awesome": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=",
"dev": true
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
......
......@@ -52,6 +52,7 @@
},
"devDependencies": {
"eslint": "^4.18.0",
"font-awesome": "^4.7.0",
"log-suppress": "^1.0.3",
"mocha": "^4.0.1",
"nodemon": "^1.15.0",
......
......@@ -12,7 +12,18 @@
<div class='shade'></div>
<!-- Search box -->
<input type="search" placeholder="Search">
<!-- TODO: Requires a clear button on the opposite side to the search icon. -->
<b-field position='is-centered'>
<b-autocomplete
rounded
v-model="searchTerm"
:data="filteredMockSearchData"
placeholder="Search"
icon="search"
@select="option => selected = option">
<template slot="empty">No results found</template>
</b-autocomplete>
</b-field>
<!-- Add button -->
<button class='add-button' @click="openComposePanel">+</button>
......@@ -130,16 +141,38 @@
<script>
import 'font-awesome/css/font-awesome.min.css'
export default {
computed: {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio }
bio () { return this.$store.state.bio },
filteredMockSearchData () {
return this.mockSearchData.filter( (option) => {
return option
.toString()
.toLowerCase()
.indexOf(this.searchTerm.toLowerCase()) >= 0
})
}
},
data() {
return {
isComposePanelModalActive: false
isComposePanelModalActive: false,
mockSearchData: [
'Laura Kalbag (laurakalbag.com)',
'Aral Balkan (ar.al)',
'#surveillancecapitalism',
'Aral Balkan (@aral@mastodon.ar.al)'
],
searchTerm: '',
selectedMockSearchResult: null
}
},
methods: {
openComposePanel: function (event) {
this.isComposePanelModalActive = true
......@@ -152,16 +185,12 @@ export default {
</script>
<style>
input[type='search'] {
display: block;
.autocomplete.control {
margin-left: auto;
margin-right: auto;
width: 42vmax;
font-size: 2vmax;
margin-top: 2vmax;
border: 1px solid darkgrey;
border-radius: 1vmax;
-webkit-appearance: none;
}
nav {
......
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
import 'font-awesome/css/font-awesome.min.css'
Vue.use(Buefy)
Vue.use(Buefy, {
defaultIconPack: 'fa'
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment