Skip to content

Instantly share code, notes, and snippets.

@theotherzach
Last active November 14, 2017 00:56
Show Gist options
  • Save theotherzach/4b5e07340f2f2884068fb8f0b26cf64e to your computer and use it in GitHub Desktop.
Save theotherzach/4b5e07340f2f2884068fb8f0b26cf64e to your computer and use it in GitHub Desktop.
<template id="template-connect">
<div class="connect">
<div class="connect__searchPanel">
<div class="connect__speciesSelect">
<button @click="handleDogs">Dogs</button>
<button @click="handleCats">Cats</button>
</div>
<div class="connect__search">
<input type="text"
:placeholder="searchPlaceholder"
v-model="searchTerm">
</div>
</div>
<div class="connect__searchResults">
<div class="connect__result"
v-for="psychic in results | filterBy searchTerm">
<div class="connect__resultHeader">
<img src="http://placekitten.com/g/400/150">
</div>
<div class="connect__resultBody">
<div class="connect__resultRow">
<span class="connect__name">{{ psychic.name }}</span>
<em>{{ psychic.price }}</em>
</div>
<div class="connect__resultRow">
<strong>Specialties: </strong>
<em>{{ psychic.specialties }}</em>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
(function () {
"use strict"
Vue.component("vue-connect", {
template: "#template-connect",
data: function () {
return {
dogs: [{
name: "Dennis",
specialties: "Computers, lost children, squirrels",
price: 50
}, {
name: "Daisy",
specialties: "Butt smells",
price: 70
}],
cats: [{
name: "Mimi",
specialties: "Feathers, mice, 20th century art theft",
price: 200,
cares: false
}, {
name: "Sammy",
specialties: "Is actually a dog",
price: 2,
cares: true
}],
species: "dog",
searchTerm: ""
}
},
computed: {
searchPlaceholder: function () {
var self = this
return "Find a psychic " + self.species + "."
},
results: function () {
var self = this
if (self.species === "dog") {
return self.dogs
}
if (self.species === "cat") {
return self.cats
}
},
},
methods: {
handleDogs: function () {
var self = this
self.species = "dog"
},
handleCats: function () {
var self = this
self.species = "cat"
},
}
})
})()
</script>
<style>
/*
red #E74C3C ;
active: #007acc;
"black" #1a1a1a;
light-grey: #f7f7f7;
border-color: #d1d1d1;
input-color: #686868;
padding top and bottom: 0.625em;
padding left and right: 0.4375em;
margin-bottom: 0.5em;
*/
.connect__searchPanel {
margin-bottom: 2em;
padding: 0.75em 0.5em;
border: 3px solid #1a1a1a;
border-radius: 2px;
}
.connect__speciesSelect {
margin-bottom: 0.5em;
}
.connect__result {
margin-bottom: 1em;
background-color: #f7f7f7;
min-height: 200px;
border: 1px solid #1a1a1a;
border-radius: 2px;
}
.connect__resultBody {
padding: 0.625em 0.4375em;
}
.connect__name {
font-size: 1.1875rem;
font-weight: 900;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment