Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
contacts-v2: some responsive styling
Browse files Browse the repository at this point in the history
  • Loading branch information
Yvonne Yip committed Oct 30, 2013
1 parent aa6116c commit 05f8bf7
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 73 deletions.
78 changes: 41 additions & 37 deletions shiny/Contacts-v2/components/contacts-detail.html
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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');
}
Expand Down
12 changes: 6 additions & 6 deletions shiny/Contacts-v2/components/contacts-icon.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}}">
Expand Down
83 changes: 53 additions & 30 deletions shiny/Contacts-v2/components/contacts-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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>
Expand Down Expand Up @@ -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">
Expand All @@ -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],
];
}
},
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
}
Expand Down

0 comments on commit 05f8bf7

Please sign in to comment.