contacts-v2: hide toolbar in contact details if tablet

Author: Yvonne Yip

shiny/Contacts-v2/components/contacts-detail.html

@@ -1,4 +1,5 @@
 <link href="../../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html" rel="import">
+<link href="../../../../polymer-elements/polymer-media-query/polymer-media-query.html" rel="import">
 <link href="../../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html" rel="import">
 <link href="contacts-detail-item.html" rel="import">
 <link href="contacts-icon.html" rel="import">
@@ -32,14 +33,17 @@
 			}
 		</style>
 		<div class="detailHeader">
+			<polymer-media-query query="min-width: 768px" queryMatches="{{wideLayout}}"></polymer-media-query>
 			<polymer-flex-layout vertical="true"></polymer-flex-layout>
-			<polymer-ui-toolbar theme="polymer-ui-dark-theme">
-				<polymer-ui-icon-button icon="shrink" on-tap="shrinkAction"></polymer-ui-icon-button>
-				<div flex></div>
-				<!-- <polymer-ui-icon-button icon="edit"></polymer-ui-icon-button> no such icon -->
-				<polymer-ui-icon-button icon="shortcut"></polymer-ui-icon-button>
-				<polymer-ui-icon-button icon="favorite"></polymer-ui-icon-button>
-			</polymer-ui-toolbar>
+			<template if="{{!wideLayout}}">
+				<polymer-ui-toolbar theme="polymer-ui-dark-theme">
+					<polymer-ui-icon-button icon="shrink" on-tap="shrinkAction"></polymer-ui-icon-button>
+					<div flex></div>
+					<!-- <polymer-ui-icon-button icon="edit"></polymer-ui-icon-button> no such icon -->
+					<polymer-ui-icon-button icon="shortcut"></polymer-ui-icon-button>
+					<polymer-ui-icon-button icon="favorite"></polymer-ui-icon-button>
+				</polymer-ui-toolbar>
+			</template>
 			<div flex></div>
 			<div class="detailIconContainer">
 				<contacts-icon contact="{{contact}}" large></contacts-icon>
@@ -55,6 +59,7 @@
 	</template>
 	<script>
 		Polymer('contacts-detail', {
+			wideLayout: false,
 			shrinkAction: function() {
 				this.fire('contacts-detail-shrink');
 			}