tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Made Search tile functionality, and filter component

This commit is contained in:
Alicia Sykes 2019-08-20 00:04:56 +01:00
parent 4e9f436972
commit 7623d4be5b
1 changed files with 45 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/FilterTile.vue
View File

@ -1,11 +1,12 @@
<template> <template>
<div> <section>
<el-input <label for="filter-tiles">Search</label>
placeholder="Start typing station name or code" <input
v-model="input" id="filter-tiles"
v-on:input="userIsTypingSomething"> v-model="input"
</el-input> placeholder="Start typing to filter tiles..."
</div> v-on:input="userIsTypingSomething" />
</section>
</template> </template>
<script> <script>
@ -18,14 +19,48 @@ export default {
} }
}, },
methods: { methods: {
userIsTypingSomething (stuff) { userIsTypingSomething () {
this.$emit('user-is-searchin', stuff) this.$emit('user-is-searchin', this.input)
} }
} }
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
section {
display: flex;
align-items: center;
margin: 0.25em;
border-radius: 5px;
border: 1px solid transparent;
border: 1px solid #30556469;
-webkit-box-shadow: 1px 1px 2px #130f23;
box-shadow: 1px 1px 2px #130f23;
}
label {
display: inline;
background: -webkit-gradient(linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0.5em;
display: inline;
}
input {
display: inline-block;
width: 200px;
padding: 0.5em;
margin: 0.5em;
outline: none;
border: none;
border-radius: 5px;
background: #607d8b33;
box-shadow: 1px 1px 2px #232323;
color: #1CA8DD;
font-family: 'Comfortaa', cursive;
&:focus {
background: #607d8b4a;
}
}
</style> </style>