search

zerodevx / zero-list-hero

DEPRECATED - It's hero time! A Polymer 1.1+ web component that hero-animates and layouts a sequence of elements.
https://zerodevx.github.io/zero-list-hero/
MIT License
15 stars 2 forks source link

newreader demo - content not loading #1

Closed ghost closed 8 years ago

ghost commented 9 years ago

https://zerodevx.github.io/zero-list-hero/newsreader-demo.html

page loads, but no content.

zerodevx commented 9 years ago

Thanks for the info - should be fixed now.

ghost commented 9 years ago

yes. thanks. Helps me learn

ghost commented 9 years ago

I am wondering how to change this so it works on different sized screens.

Layout is really hard with polymer i am finding. I see you made your own here: https://github.com/zerodevx/polymer-style-modules

The image would get bigger progressively, or in segments (using media query) The text is sometimes much bigger than the image. SO i guess behaviour could be to let expand vertically past the image.

These type of things are really hard to get right.

zerodevx commented 9 years ago

I find styling to be quite tricky generally as well; but Polymer actually makes it easier rather than more difficult. That's because Polymer somewhat ensures that the styles you define inside your custom component are encapsulated - allowing you to quite safely layer additional styles on top of all your little components in your web app.

The layout feature of <zero-list-hero> is actually built to align items left-to-right nicely, automatically, and responsively, so the component user shouldn't need to bother with constructing complicated rules/media queries.

I've updated the demo to use this feature:

<zero-list-hero id="hero" manual layout="masonry" layoutOptions='{"breakpoint": 360}' debounce-delay="125" cascade-delay="75" on-news-card-fav="favTapped" on-news-card-tapped="itemTapped">

so see if it helps you.

As for polymer-style-modules, it's just a repo to provide common styling patterns to be used the Polymer-way (Google keeps changing shadow dom implementation specs so I'll expect it to change again), that is (currently) to use

<style include="my-styles">

when applying a basket of rules into your custom component.

If you have any questions regarding Polymer or CSS, Stackoverflow is great for that because your question will be visible to a large user base.

Hope this helps.

ghost commented 9 years ago

i agree with the encapsulation aspect, and this is really nice work.

Can i ask though. I have been using Polymer for maybe 1 month non stop. One thing i get stuck on is the relationship between the themes file, shared styles and my components. First i dont get why i need shared styles. For example, if i add a style to the theme, i dont see it manipulate a component.

Another is a Dialog. I added everything it needs and i see nothing on screen.

zerodevx commented 8 years ago

I'm closing this!