• Click a contact
• Scroll the page so the toolbar collapses but you can still see the back arrow
• Click the back arrow
• Click a different contact

Notice the page is still scrolled down and the toolbar is collapsed. This same situation occurs on the add contact page. I want to reset the scroll position of the info-page and add-page whenever we're transitioning in.

It looks like every Contacts/Favorites/Circles menu link doesn't work. My environment is iOS8 on iPad mini and the iOS Simulator.
Hold the menu then tap "Open" on mobile safari's menu make the navigation success.

If you click on the gap between the <a> element and the <paper-item>, the selected element change, but the section doesn't change.
A quick fix is to make the <a> tag be as high as the <paper-item> element

Currently getting this error:
DOMException: The scope must be under the directory of the script URL.

Seeing if Jake can help me.

Notice that the paper-icon-buttons all sit a little low relative to any toolbar text. If you inspect the paper-icon-button you'll see that it has a lot of space above the icon that's just empty but causing the icon to be pushed down. This needs to be fixed prior to CDS because it makes the site look unpolished.

When adding a new user, clean out the page every time.

The add-page should let you click the camera fab to upload a real photo.

Right now my file size is being bloated because, as luck would have it, I need one or two icons from a bunch of different sets. I think I'll need to pop open the sets, and copy the icons I need into a custom core-iconset-svg and use that. A bit of extra work but it will give a nice file size boost.

Should be able to save the app to home screen and demo via android L's new app switcher

I'm very new to web development and am teaching myself, I tried to follow the steps but i can't get it to load properly so I can edit. If you could do a tutorial on this i would be really grateful, even just one with screenshots rather than whole video.

I really love the videos and the things you guys on the Polymer team are doing. Very exited for the possibility.

gotta have them icons man!

Hi Rob,

In your code you have created the "contact" template and have left the code for it inside the main "contacts page" template, which is then imported into the index.html page. Would it not be a better best practice to make the "contact" element it's own separate element and then import it into the "contacts page" element, which is then imported and declared in the index.html page? Just wanted to clarify if I'm missing something or if there is an issue with the web component spec that limits nesting of elements within elements or anything like that.

Anywayzzz, thanks for your time and effort on the future :-)

Richard Nash

Just tried to run it, but it needs SASS, so I got this error:

Running "sass:server" (sass) task
Warning: 
You need to have Ruby and Sass installed and in your PATH for this task to work.
More info: https://github.com/gruntjs/grunt-contrib-sass
 Use --force to continue.

May be it will be a good idea to remove that extra step from a set up?

Scrolling down quickly and then changing directions seems to cause the core-list to start chopping off the bottom item(s) on the list.

See the attached gif (take a moment to load):

The list of contacts should be grouped alphabetically by first name

The contacts list currently uses avatars from http://uifaces.com/ as generated by faker.js. The avatars max out at 128x128 so they look pixelated on the info page.

Hi Rob, great job on this demo app!
I also watched your youtube where you explained about it.

I tried doing all the steps in the .md file and it downloaded a lot of files, but when i try to load the app, its broken, i tried with a few different approaches but i couldn't make it work.

Is there anything that was changed when moving to polymer 0.5.1? like webcomponents or such that may need to be further edited here so it will work?

Thanks :)

Right now it does kind of a flickery cross-fade but this is not ideal. I would rather it just changes to the next page, but core-animated-pages seems to break if it doesn't have a transition to play.

I observed this everytime ...
After boot up the server by issuing grunt serve:dist, the browser successfully displays the contacts/all.
And then press Cmd + r to refresh the page, the page is yelling "Cannot GET /contacts/all"

I may did something wrong, if it is please correct me. Thanks.

This requires testing on a phone:

• Click the + button to add a contact
• Click a paper-input and enter some text
• Close the keyboard
• Hit the back button

The screen will be blank or you may see everything crushed into a single row. If you scroll the list will sort itself out and things will look ok again except you'll probably notice a few items at the bottom of the list disappearing as you scroll up.

hi there.. im trying to rebuild the app in a separate project.. so far so nice..
but under no circumstances can i get the app.js to be able to resolve anything inside the
<template id="app"></template> via document.querySelector().. therefore the routing fails and and and..

having read up on shadowdom, i know now it's not supposed to work that way..
now the big question.. WHY does it work here ???
i'm slowly running out of hair to pull ;D please enlighten me!

The ideal is that someone adds to homescreen but we can't expect every user to do that for every app built with Polymer. A scroll hack could work as well but that's not exactly a best practice or something we want to encourage :(

I feel like I still haven't quite nailed the transition I want when moving from contacts to any of the other pages. It seems like the contacts page should fade a bit to dark so there's a bit more contrast with the new page that's animating in.

I'm betting this is user error on my part and that there is already a solution to this using paper-input. But I noticed on my phone there's no easy way to move from one item to the next when I'm adding a contact.

To really get the true, end to end flow, you should be able to create a new contact and see them appear in the list. Not sure if this will make it in time for Chrome dev summit.

Click a contact to open the info page. Notice as you scroll, the core-scrol-header-panel causes a lot of jank during its transition.

On transition from contact details back to contacts/all scroll position is reseated to the top of the page. Correct way would be to preserve scroll position between transitions.

if you click on a contact and go to their info page, the name is always 'john doe'. this is easy enough to fix because the contactId is being passed to the element by the router. just need to grab that entry from the contacts collection

Sometimes on first load the contacts list will render blank

Right now the site is primarily designed for mobile. I would like to make the desktop view be a bit nicer. I'm thinking of just moving the the pages into cover mode and giving them enough margin on either side that hopefully they look ok

Related to #19

• Open the app
• Click on a contact. Scroll around and the core-scroll-header-panel should animated smoothly
• Go back to the contact's list and click the paper-fab to open the add contact page
• Go back to the contact's list and click a contact
• Scroll around and notice the core-scroll-header-panel animates very poorly now

From the contacts page, click on any avatar that is very light colored. When it transitions to the info page you'll notice that it's very difficult to read the contact's name and almost impossible to see the back button icon.

I think a potential fix is to add a dark to transparent gradient to the top and bottom of the image area to give the text and icons some contrast.

• In package.json, replace grunt-vulcanize with 0.5.0
• Run grunt serve:dist

The console will be full of 404s, looking for /elements/core-toolbar, for instance. The proper path is actually in bower_components. Switching back to grunt-vulcanize 0.3.0 fixes the issue.

@azakus