diff --git a/shiny/Contacts-v2/components/contacts-app.html b/shiny/Contacts-v2/components/contacts-app.html index 52b5d43..5b4517e 100644 --- a/shiny/Contacts-v2/components/contacts-app.html +++ b/shiny/Contacts-v2/components/contacts-app.html @@ -12,7 +12,7 @@ - + @@ -70,29 +70,25 @@ min-width: 320px; max-width: 384px; } - polymer-list { + polymer-sectioned-list { height: 100%; } - [tabletLayout] polymer-list { + [tabletLayout] polymer-sectioned-list { margin: 24px; } .contactItem { position: relative; + } + polymer-sectioned-list ^ #sticky, + .contactItem { font-size: 14px; font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, sans-serif; user-select: none; } - .contactItem.sticky { - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 10; - opacity: 0.95; - } - [tabletLayout] .contactItem.sticky { + [tabletLayout] polymer-sectioned-list ^ #sticky { display: none; } + polymer-sectioned-list ^ #sticky, .contactItem.header { background: white; border-style: solid; @@ -229,10 +225,7 @@
-
- {{stickyContent}} -
- + - +
@@ -298,7 +291,6 @@ Polymer('contacts-app', { desktopLayout: false, tabletLayout: false, - stickyContent: 'A', selectedContact: null, observe: { desktopLayout: 'layoutChanged', @@ -340,28 +332,6 @@ layoutAction: function() { this.$.list.refresh(); }, - scrollAction: function() { - var items = this.$.list.querySelectorAll('.contactItem'); - var scrollTop = this.$.list.scrollOffset; - var lastHeader; - for (var i = 0, item; item = items[i]; i++) { - var offset = item.offsetTop + (item.offsetParent ? item.offsetParent.offsetTop : 0); - var isHeader = item.classList.contains('header'); - if (lastHeader && offset > scrollTop) { - this.stickyContent = lastHeader.textContent; - var transY = offset - scrollTop - lastHeader.offsetHeight; - if (transY < 0 && isHeader) { - this.$.sticky.style['-webkit-transform'] = 'translateY(' + transY + 'px)'; - } else { - this.$.sticky.style['-webkit-transform'] = null; - } - break; - } - if (isHeader) { - lastHeader = item; - } - } - }, pointerdownAction: function(e, detail, sender) { this.$.scrub.target = sender; this.$.translateAnimation.target = sender;