I'm using the demo provided for iron-list to fetch json data and create the iron-list items. All is working well.
However when creating a dom-module the layout styling for each item is not correct and i suspect #apply(--layout-horizontal); #apply(--layout-flex); #apply(--layout-vertical); are not getting picked up.
If i go directly into iron-flex-layout.html and copy the css for those layouts the items look ok
I had a look at styling documentation for v.1 but i couldn't see anything obvious in there
Thanks
Code
<body unresolved>
<paper-scroll-header-panel class="fit" condenses keep-condensed-header>
<paper-toolbar class="tall">
<paper-icon-button icon="arrow-back"></paper-icon-button>
<div class="flex"></div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<div class="bottom title">iron-list</div>
</paper-toolbar>
<my-request></my-request>
</paper-scroll-header-panel>
<dom-module id="my-request">
<template>
<iron-ajax auto id="ajaxPost" url="the-url" handle-as="json" last-response="{{data}}" on-respone="handleResponse"></iron-ajax>
<iron-list items="{{data.items}}" as="item">
<style>
iron-list {
background-color: var(--paper-grey-200, #eee);
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
.pad {
padding: 0 16px;
#apply(--layout-flex);
#apply(--layout-vertical);
}
.primary {
font-size: 16px;
font-weight: bold;
}
.secondary {
font-size: 14px;
}
.dim {
color: gray;
position: absolute;
right: 70px;
bottom: 10px;
}
.more {
position: absolute;
bottom: 10;
right: 37px;
color:#D3D3D3;
}
</style>
<template>
<div>
<div class="item">
<iron-image style="box-shadow: 0 0 5px rgba(0,0,0,0.50);background-color:gray;width:80px; height:80px;" sizing="cover" src="[[item.path]]" preload></iron-image>
<div class="pad">
<div class="primary">{{item.the_title}}</div>
<div class="secondary">{{item.info}}</div>
<div class="dist secondary dim"><span>{{item.lat}}</span>,<span>{{item.lng}}</span></div>
</div>
<iron-icon class="more" icon="star"></iron-icon>
<iron-icon icon="more-vert"></iron-icon>
</div>
</div>
</template>
</iron-list>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'my-request',
handleResponse: function() {
console.log('handleResponse');
}
});
})();
</script>
</body>
I had another look at the styling documentation and the examples in there have <style>...</style> just underneath the <dom-module ... like so
<dom-module id="the-id">
<style>
.
.
</style>
So placing <style>..</style> below <template> when using <dom-module .. don't get loaded in.
Related
UPDATE I was able to close the drawer with document.querySelector('paper-drawer-panel').forceNarrow = true;. I was going to delete this question but maybe I will leave this up to see if there is a way to do this proper with closeDrawer()
I wrote my own custom header, which doesn't use any of the paper header behaviors. It's just it's own custom element html styled header with no behavior or features.
I implemented paper-drawer-panel which worked great with my custom header. However, I can not get closeDrawer() to close the drawer. I see the function itself is function () { this.selected = 'main' }, but not sure how that applies to the inner code of paper-drawer-panel.
How can I make paper-drawer-panel's closeDrawer() to close the drawer?
index.html:
<template is="dom-bind" id="app">
<paper-drawer-panel>
<div drawer>
<drawer-custom></drawer-custom>
</div>
<div main>
<header-custom></header-custom>
<video-selection data-route="home" tabindex="-1"></video-selection>
</div>
</paper-drawer-panel>
</template>
app/elements/drawer-custom.html:
<dom-module id="drawer-custom">
<template>
<style include="iron-flex iron-flex-alignment">
:host {
background-color: var(--brown-color);
height: 1000px;
width: 100%;
overflow-x: hidden;
outline: none;
display: block;
padding-right: 1px;
--iron-icon-height: 42px;
--iron-icon-width: 42px;
}
.v-center {
#apply(--layout-vertical);
#apply(--layout-center-center);
}
#close-drawer {
height: 130px;
width: 100%;
background-color: var(--pink-color);
padding-right: 1px;
}
#contact {
background-color: #a9483b;
height: 130px;
width: 100%;
padding-right: 1px;
}
</style>
<div on-click="_closeDrawer" id="close-drawer" class="v-center">
<iron-icon src='../images/menu-button-close.svg'></iron-icon>
</div>
<div id="contact">
contact
</div>
</template>
<script>
Polymer({
is: 'drawer-custom',
_closeDrawer: function() {
document.querySelector('paper-drawer-panel').closeDrawer();
}
})
</script>
</dom-module>
Solution:
when I added <paper-icon-button> as a child to paper-drawer-panel then the function closeDrawer() worked.
I had a wokring app with some :host styles on custom elements built with Polymer 5.5. Now, I'm converting this to Polymer 1.0 but run into this weird issue:
Styles defined with :host are not applied. For testing purposes I took the example right from the documentation:
<dom-element id="my-element">
<style>
:host {
display: block;
border: 1px solid red;
}
#child-element {
background: yellow;
}
</style>
<template>
<div id="child-element">In local DOM!</div>
<content></content>
</template>
<script>
Polymer({
is: 'my-element'
});
</script>
</dom-element>
When I render (latest chrome) it does have a yellow background but does NOT have a 1px red border, which it should have.
Any idea what's going on here? There are no js warnings or other clues...
You should be using dom-module instead of dom-element:
<dom-module id="my-element">
<style>
:host {
display: block;
border: 1px solid red;
}
#child-element {
background: yellow;
}
</style>
<template>
<div id="child-element">In local DOM!</div>
<content></content>
</template>
<script>
Polymer({
is: 'my-element'
});
</script>
</dom-module>
I am using Polymer 0.9.2 using following body tag. However, the paper-header-panel will not scroll and even setting CSS to overflow:scroll, I get scroll bars but no scrolling.
<body class="fullbleed layout vertical">
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div><img src="my-image.png"></div>
</paper-toolbar>
<paper-menu id="mainMenu">
<paper-item>One</paper-item>
<paper-item>Two</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>My Title</div>
<img src="my-avatar.png" aria-label="avatar" title="avatar" width="64px" height="64px"/>
Logout
</paper-toolbar>
<div id="content">My content/div>
</paper-header-panel>
</paper-drawer-panel>
</body>
The css that I'm using
body {
font-family: 'Roboto',Arial,sans-serif;
color: #4B8A4B;
background-color: #001900;
}
[main] paper-toolbar {
background-color: #004C00;
color: #001900;
}
[drawer] a {
width: 100%;
}
[drawer] paper-toolbar {
height: 265px;
}
[drawer] paper-toolbar div {
overflow: hidden;
position: relative;
}
#content {
padding-left: 15px;
padding-right: 15px;
}
[drawer] {
border-right: thin #000 inset;
-moz-border-right-colors: #000;
background: #001900;
}
Please not that I have cut out a bunch of extra code that shouldn't impact this problem and I know 0.9 is still Beta.
If you are using polymer ~0.5:
<body layout vertical>
</body>
If you are using >0.8:
<body class="layout vertical">
</body>
or with CSS (works for any version that I know of):
paper-header-panel {
height: 100%
}
body, html {
height: 100%
margin: 0
}
If you are using the "layout" versions, you must import Polymer/layout (0.5 docs) for your version of Polymer.
Make sure paper-header-panel is filling the page.
This should be enough to make your content scrollable:
paper-header-panel {
height: 100%
}
First off I'm having a tough time understanding the fundamentals of the hero-transition within Polymer. I am attempting to build a hero transition card like the one in the example provided by them, which can be found here.
Below I've built the mini card and I'm just trying to understand the transition and how the larger card works with the smaller one.
My specific question is, how does the transition bind to each element? Do I need to complete the CSS for both before I can begin playing with the core-animated-pages? Does having an embedded template matter?
Any guidance would be extremely helpful.
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/core-image/core-image.html">
<link rel="import" href="../components/paper-shadow/paper-shadow.html">
<polymer-element name="chip-card">
<template>
<style>
#page2 {
width: 100%;
height: 100%;
}
#paper_shadow {
position: relative;
display: inline-block;
font-family:'Roboto', sans-serif;
font-size: 12px;
color: white;
}
#chip_body {
height: 400px;
width: 300px;
background-color: aqua;
color: black;
}
#chip_top {
background-color: deeppink;
background-image: url();
background-size: cover;
background-position: center center;
width: 100%;
position: relative;
}
#chip_bottom {
background-color: #fbfbfb;
width: 100%;
height: 20%;
position: relative;
font-size: 1.2em;
word-wrap: break-word;
}
#text {
padding-left: 5%;
padding-right: 2.5%;
overflow: hidden;
}
#coreImage {
display: block;
}
#card_container {
width: 70%;
height: 600px;
background-color: aqua;
color: black;
}
#card_right {
height: 100%;
width: 30%;
}
#card_left {
background-color: darkblue;
height: 100%;
width;
70%;
}
#card_left_top {
padding-right: 20px;
padding-top: 20px;
background-color: skyblue;
}
#circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
}
#header_text {
}
#card_content {
width:100%;
background-color: lightcoral;
}
</style>
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" animated=true; hero-p="" on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero=""></div>
</section>
</core-animated-pages>
</template>
<script>
Polymer('chip-card', {
page: 0,
raise: function() {
this.$.paper_shadow.setZ(2);
},
lower: function() {
this.$.paper_shadow.setZ(1);
},
transition: function(e) {
if (this.page === 0) {
this.$.paper_shadow = e.currentTarget;
this.page = 1;
} else {
this.page = 0;
}
}
});
</script>
</polymer-element>
you are actually very close to a working transition with the code you have.
I've implemented a more complicated hero transition on my website and took some code from there to get yours to work.
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" hero-p on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" hero vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero></div>
</section>
</core-animated-pages>
I've made but a few adjustments.
First off, any hero parent element, with the hero-p attribute, should contain just that attribute. So no need for the quotation marks :)
<paper-shadow hero-p .. >
Every element that's part of the Hero transition, needs a hero attribute.
Again, without the quotation marks. <div id="chip_body" .. hero .. >
And the same thing goes for the element you're transitioning to.
<div id="card_container" .. hero .. >
I've put a working version of your code on my website.
There's page containing the <chip-card> element and a second page containing the working template file.
Index page
Template file
Please note : I edited the reference to webcomponentsjs to conform with my folder structure.
Feel free to ask me if there's anything else!
I want to add two core-icon buttons one right-top of a (custom) post-card polymer component and the other at the bottom-center. How do I do this? The current code applies to both the core-icon-buttons (below). Is there a way to qualify the styling of core-icon-button by the icon type?
<template>
<style>
....
core-icon-button {
content: '.icon clear';
position: absolute;
top: 3px;
right: 3px;
color: blue;
}
....
</style>
<core-icon-button icon="clear"></core-icon-button>
<core-icon-button icon="thumb-up"></core-icon-button>
</template>
You are free to use standard well-known HTML elements’ ids/classes for that:
<template>
<style>
.clearbtn { color: white }
#thumbupbtn { left: 100px }
</style>
<core-icon-button class="clearbtn" icon="clear"></core-icon-button>
<core-icon-button id="thumpupbtn" icon="thumb-up"></core-icon-button>
</template>
You might as well use CSS selectors for that:
<style>
core-icon-button[icon="clear"] { color: white }
core-icon-button[icon="thumb-up"] { left: 100px }
</style>
Hope it helps.