connect_backup.html

<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>