From 05f8bf76d767cd21e455a8bba143be5a83728a8d Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Tue, 29 Oct 2013 16:59:17 -0700
Subject: [PATCH] contacts-v2: some responsive styling

---
 .../components/contacts-detail.html           | 78 ++++++++---------
 .../Contacts-v2/components/contacts-icon.html | 12 +--
 .../Contacts-v2/components/contacts-list.html | 83 ++++++++++++-------
 3 files changed, 100 insertions(+), 73 deletions(-)

diff --git a/shiny/Contacts-v2/components/contacts-detail.html b/shiny/Contacts-v2/components/contacts-detail.html
index 4714109..8064fc3 100644
--- a/shiny/Contacts-v2/components/contacts-detail.html
+++ b/shiny/Contacts-v2/components/contacts-detail.html
@@ -1,9 +1,8 @@
 <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">
-<polymer-element name="contacts-detail" attributes="contact">
+<polymer-element name="contacts-detail" attributes="contact desktopLayout">
 	<template>
 		<style>
 			polymer-ui-toolbar {
@@ -12,58 +11,63 @@
 			}
 			.detailHeader {
 				height: 275px;
+				border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 			}
 			.detailIconContainer {
 				padding: 16px;
 			}
-			.detailName {
+			[desktopLayout] .detailIconContainer {
+				padding: 24px 36px;
+			}
+			.detailIconContainer > div {
 				font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
-				background: #999;
-				color: white;
 				font-size: 20px;
-				box-sizing: border-box;
-				padding: 16px 20px;
+				color: white;
 			}
 			contacts-detail-item {
-				border-color: rgba(0, 0, 0, 0.14902);
+				border-color: rgba(0, 0, 0, 0.15);
 				border-width: 0 1px 1px;
 				border-style: solid;
 			}
+			[desktopLayout] contacts-detail-item {
+				padding: 24px 36px !important;
+				border-width: 0 0 1px;
+			}
 		</style>
-		<div class="detailHeader" style="background: url('{{contact.background}}') repeat-x;">
-			<polymer-media-query query="min-width: 768px" queryMatches="{{wideLayout}}"></polymer-media-query>
-			<polymer-flex-layout vertical="true"></polymer-flex-layout>
-			<template if="{{!wideLayout}}">
-				<polymer-ui-toolbar theme="polymer-ui-dark-theme">
-					<polymer-ui-icon-button icon="left" on-tap="{{backAction}}"></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>
+		<div desktopLayout?="{{desktopLayout}}">
+			<div class="detailHeader" style="background: url('{{contact.background}}') repeat-x;">
+				<polymer-flex-layout vertical="true"></polymer-flex-layout>
+				<template if="{{!desktopLayout}}">
+					<polymer-ui-toolbar theme="polymer-ui-dark-theme">
+						<polymer-ui-icon-button icon="left" on-tap="{{backAction}}"></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">
+					<polymer-flex-layout align="center"></polymer-flex-layout>
+					<contacts-icon contact="{{contact}}" large></contacts-icon>
+					<div flex>{{contact.name}}</div>
+				</div>
 			</div>
+			<template repeat="{{contact.phone}}">
+				<contacts-detail-item label="Phone" value="{{value}}"></contacts-detail-item>
+			</template>
+			<template repeat="{{contact.email}}">
+				<contacts-detail-item label="Email" value="{{value}}"></contacts-detail-item>
+			</template>
+			<template repeat="{{contact.address}}">
+				<contacts-detail-item label="Address" value="{{value}}"></contacts-detail-item>
+			</template>
+			<contacts-detail-item label="Handle" value="{{contact.handle}}"></contacts-detail-item>
 		</div>
-		<div class="detailName">
-			{{contact.name}}
-		</div>
-		<template repeat="{{contact.phone}}">
-			<contacts-detail-item label="Phone" value="{{value}}"></contacts-detail-item>
-		</template>
-		<template repeat="{{contact.email}}">
-			<contacts-detail-item label="Email" value="{{value}}"></contacts-detail-item>
-		</template>
-		<template repeat="{{contact.address}}">
-			<contacts-detail-item label="Address" value="{{value}}"></contacts-detail-item>
-		</template>
-		<contacts-detail-item label="Handle" value="{{contact.handle}}"></contacts-detail-item>
 	</template>
 	<script>
 		Polymer('contacts-detail', {
-			wideLayout: false,
+			desktopLayout: false,
 			backAction: function() {
 				this.fire('contacts-detail-shrink');
 			}
diff --git a/shiny/Contacts-v2/components/contacts-icon.html b/shiny/Contacts-v2/components/contacts-icon.html
index b7c9cff..5a327ce 100644
--- a/shiny/Contacts-v2/components/contacts-icon.html
+++ b/shiny/Contacts-v2/components/contacts-icon.html
@@ -16,12 +16,12 @@
 				color: #d3d2d3;
 			}
 			.contactIcon.large {
-				border-radius: 60px;
-				font-size: 42px;
-				padding: 24px;
-				width: 64px;
-				height: 64px;
-				line-height: 64px;
+				border-radius: 48px;
+				font-size: 48px;
+				padding: 16px;
+				width: 48px;
+				height: 48px;
+				line-height: 48px;
 			}
 		</style>
 		<template if="{{large}}">
diff --git a/shiny/Contacts-v2/components/contacts-list.html b/shiny/Contacts-v2/components/contacts-list.html
index 52fa532..8f3e3dc 100644
--- a/shiny/Contacts-v2/components/contacts-list.html
+++ b/shiny/Contacts-v2/components/contacts-list.html
@@ -12,7 +12,7 @@
 <link href="contacts-detail.html" rel="import">
 <link href="contacts-icon.html" rel="import">
 <link href="mock-data.html" rel="import">
-<polymer-element name="contacts-list" attributes="wideLayout">
+<polymer-element name="contacts-list" attributes="desktopLayout tabletLayout">
 	<template>
 		<style>
 			/* @polyfill @host */
@@ -27,14 +27,21 @@
 				padding-left: 8px;
 				padding-right: 8px;
 			}
-			.clip {
+			#clip {
 				background: #eeeeee;
 				overflow: hidden;
 				position: relative;
 			}
+      [desktopLayout]#clip {
+        min-width: 320px;
+        max-width: 384px;
+      }
 			polymer-list {
 				height: 100%;
 			}
+      [tabletLayout] polymer-list {
+        margin: 24px;
+      }
 			.contactItem {
 				font-size: 14px;
 				font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, sans-serif;
@@ -47,21 +54,27 @@
 				z-index: 10;
 				opacity: 0.95;
 			}
+      [tabletLayout] .contactItem.sticky {
+        display: none;
+      }
 			.contactItem.header {
 		    background: #f0f0f0;
 				border-style: solid;
 				border-color: rgba(0, 0, 0, 0.15);
-				border-width: 0 0 1px;
+				border-width: 0 1px 1px;
 				box-sizing: border-box;
 		    color: #999;
 				font-variant: small-caps;
-				padding: 16px;
+				padding: 16px 24px;
 			}
+      [tabletLayout] .contactItem.header:nth-child(3) {
+        border-top-width: 1px;
+      }
       .contactItem .firstName {
         font-weight: bold;
       }
-			[wideLayout] .contactItem.polymer-selected {
-		    background: #f0f0f0;
+			[desktopLayout] .contactItem.polymer-selected {
+		    background: #f7f7f7;
 		  }
 		  .contactItemControls {
 		  	position: absolute;
@@ -71,7 +84,7 @@
 		  	width: 100%;
 		  	height: 100%;
 				border-style: solid;
-				border-color: rgba(0, 0, 0, 0.14902);
+				border-color: rgba(0, 0, 0, 0.15);
 				border-width: 0 0 1px;
 		  	text-align: right;
 		  	padding: 17px 24px;
@@ -83,13 +96,14 @@
 		  .contactItemBody {
 				background-color: white;
 				border-style: solid;
-				border-color: rgba(0, 0, 0, 0.14902);
-				border-width: 0 0 1px 1px;
+				border-color: rgba(0, 0, 0, 0.15);
+				border-width: 0 1px 1px;
 				box-sizing: border-box;
 				padding: 16px;
 		  }
 		  .addButton {
 		  	position: absolute;
+        left: auto;
 		  	bottom: 16px;
 		  	right: 16px;
 		  	color: white;
@@ -115,23 +129,24 @@
 			#overlay::x-overlay {
 				height: 100%;
 			}
-			contacts-detail {
-				min-width: 65%;
-			}
+      contacts-detail {
+        min-width: 50%;
+      }
 		</style>
 		<mock-data id="mock"></mock-data>
-		<polymer-media-query query="min-width: 768px" queryMatches="{{wideLayout}}"></polymer-media-query>
-		<polymer-grid-layout id="grid" on-polymer-grid-layout="{{layoutAction}}"></polymer-grid-layout>
+		<polymer-media-query query="min-width: 768px" queryMatches="{{desktopLayout}}"></polymer-media-query>
+    <polymer-media-query query="(min-width: 480px) and (max-width: 768px)" queryMatches="{{tabletLayout}}"></polymer-media-query>
+		<polymer-grid-layout id="grid" nodes="{{layoutNodes}}" on-polymer-grid-layout="{{layoutAction}}"></polymer-grid-layout>
 		<polymer-ui-toolbar id="toolbar">
 			<polymer-ui-icon-button icon="menu" on-tap="{{menuAction}}"></polymer-ui-icon-button>
 			<div flex>Everyone</div>
 			<polymer-ui-icon-button icon="search"></polymer-ui-icon-button>
-			<template if="{{wideLayout}}">
+			<template if="{{desktopLayout}}">
 				<polymer-ui-icon-button icon="shortcut"></polymer-ui-icon-button>
 				<polymer-ui-icon-button icon="favorite"></polymer-ui-icon-button>
 			</template>
 		</polymer-ui-toolbar>
-		<div class="clip">
+		<div id="clip" desktopLayout?="{{desktopLayout}}" tabletLayout?="{{tabletLayout}}">
 			<div id="sticky" class="contactItem header sticky">
 				{{stickyContent}}
 			</div>
@@ -164,7 +179,6 @@
 				<contacts-detail contact="{{selectedContact.contact}}" on-contacts-detail-shrink="{{overlayCloseAction}}">
 				</contacts-detail>
 			</polymer-ui-overlay>
-			<div class="addButton" on-tap="{{addAction}}">&#x2b;</div>
 			<!-- scrubbing -->
 			<polymer-scrub id="scrub" animation="{{$.slideAnimation.animation}}" snapThreshold="0.2" on-polymer-scrub-animation-end="{{scrubAnimationEndAction}}"></polymer-scrub>
 			<polymer-animation-group id="slideAnimation" type="par" fillMode="forwards">
@@ -191,31 +205,40 @@
 				</polymer-animation>
 			</polymer-animation-group>
 		</div>
-		<contacts-detail contact="{{selectedContact.contact}}" on-contacts-detail-shrink="{{overlayCloseAction}}">
+		<contacts-detail id="details" contact="{{selectedContact.contact}}" desktopLayout?="{{desktopLayout}}" on-contacts-detail-shrink="{{overlayCloseAction}}">
 		</contacts-detail>
+    <div class="addButton" on-tap="{{addAction}}">&#x2b;</div>
 	</template>
 	<script>
 		Polymer('contacts-list', {
-			wideLayout: true,
+			desktopLayout: true,
+      tabletLayout: false,
 			stickyContent: 'A',
 			selectedContact: null,
+      observe: {
+        desktopLayout: 'layoutChanged',
+        tabletLayout: 'layoutChanged'
+      },
 			ready: function() {
 				this.activateTransitions = [this.$.activateAnimation, null];
-				this.wideLayoutChanged();
+        this.selectedContact = {contact: this.$.mock.contacts[0]};
+        this.layoutNodes = [this.$.toolbar, this.$.clip, this.$.details];
+        this.layoutChanged();
 			},
-			wideLayoutChanged: function() {
-				if (this.wideLayout) {
+			layoutChanged: function() {
+				if (this.desktopLayout) {
 					this.$.overlay.active && (this.$.overlay.active = false);
+          this.$.clip.style.width = null;
 					this.$.grid.layout = [
-						[3, 3],
-						[4, 5],
-						[4, 5],
+						[1, 1],
+						[2, 3],
+						[2, 3],
 					];
 				} else {
 					this.$.grid.layout = [
-						[3, 3],
-						[4, 4],
-						[4, 4],
+						[1, 1],
+						[2, 2],
+						[2, 2],
 					];
 				}
 			},
@@ -231,7 +254,7 @@
 					var isHeader = item.classList.contains('header');
 					if (offset > scrollTop) {
 						this.stickyContent = lastHeader.textContent;
-						var transY = offset - scrollTop - 60;
+						var transY = offset - scrollTop - lastHeader.offsetHeight;
 						if (transY < 0 && isHeader) {
 							this.$.sticky.style['-webkit-transform'] = 'translateY(' + transY + 'px)';
 						} else {
@@ -284,7 +307,7 @@
 			activateAction: function(e, detail, sender) {
 				if (!this.$.scrub.scrubbing) {
 					this.selectedContact = sender.templateInstance.model;
-					if (!this.wideLayout) {
+					if (!this.desktopLayout) {
 						this.$.overlay.active = true;
 					}
 				}