How to place paper-icon-buttonin right corner of application header ?
Now my icon floats under title and it's not looking good.
Screenshot below
My element Code:
<polymer-element name="sidebar-layout" attributes="selected" noscript>
<template>
<link rel="stylesheet" href="/assets/css/sidebar-layout.css">
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Menu</core-toolbar>
<core menu theme="core-light-theme">
<core-item icon="info-outline" label="Notes" active?="{{selected == 'notes-page'}}"><a is="pushstate-anchor" href="/notes"></a></core-item>
<core-item icon="key" label="Logowanie" active?="{{selected == 'login-page'}}}}"><a is="pushstate-anchor" href="/login"></a></core-item>
<core-item icon="key" label="Pozalogowaniu" active?="{{selected == 'main-page'}}}}"><a is="pushstate-anchor" href="/main-page"></a></core-item>
</core>
</core-header-panel>
<div tool>
<content select=".title"></content>
<paper-icon-button id="morebutton"
icon="more-vert"></paper-icon-button>
</div>
<div class="content">
<content></content>
</div>
</core-scaffold>
</template>
</polymer-element>
Though you can do this using CSS pretty nicely here's a workaround that makes more semantic sense, adding a flex attribute to the <content> element or a <span> tag like I have dont below.
<polymer-element name="sidebar-layout" attributes="selected" noscript>
<template>
<link rel="stylesheet" href="/assets/css/sidebar-layout.css">
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Menu</core-toolbar>
<core menu theme="core-light-theme">
<core-item icon="info-outline" label="Notes" active?="{{selected == 'notes-page'}}"><a is="pushstate-anchor" href="/notes"></a></core-item>
<core-item icon="key" label="Logowanie" active?="{{selected == 'login-page'}}}}"><a is="pushstate-anchor" href="/login"></a></core-item>
<core-item icon="key" label="Pozalogowaniu" active?="{{selected == 'main-page'}}}}"><a is="pushstate-anchor" href="/main-page"></a></core-item>
</core>
</core-header-panel>
<div tool>
<content select=".title"></content>
<span flex></span>
<paper-icon-button id="morebutton"
icon="more-vert"></paper-icon-button>
</div>
<div class="content">
<content></content>
</div>
</core-scaffold>
</template>
</polymer-element>
This <span> tag with the flex attribute takes just the amount of space that it lets the icon fit in the far right.
More about the flex attribute at:
https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html
https://www.polymer-project.org/0.5/docs/elements/layout-elements.html
You should learn about layout attributes.
Specifically in this case the attribute justified does the job
<div horizontal layout justified tool>
<content select=".title"></content>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
</div>
Related
I have <iron-list> with grid mode encapsulated by <neon-animated-pages> and somehow neon-pages ruin its ability to adapt to screen size and rearrange items. I tried changing position of neon pages to relative and so on. Nothing helped. Thanks in advance.
Here is the code
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/games/:subject"
data="{{router}}"
tail="{{subroute}}">
</app-route>
<neon-animated-pages selected="0" id="pages">
<games-subjects-module item="{{item}}"></games-subjects-module>
<games-subject-module item="{{item}}"></games-subject-module>
</neon-animated-pages>
And here is <games-subjects-module> where i have my iron-list
<template>
<style is="custom-style">
paper-card{
width: 200px;
height: 300px;
margin: 20px;
--paper-card-header-image:{
height: 250px;
}
}
</style>
<iron-list id="list" items="{{subjects}}" as="subject" selection-enabled selected-item="{{item}}" grid>
<template>
<div>
<a href="/games/{{subject.val.name}}">
<paper-card elevation="1">
<div class="card-content">
{{subject.val.name}}
</div>
</paper-card>
</a>
</div>
</template>
</iron-list>
</template>
I would like the paper-ripple effect to fill<div class='title bottom'> also. Any ideas on how to make it do that?
<body unresolved>
<paper-header-panel shadow="true"
mode="waterfall-tall"
class="fit">
<paper-toolbar>
<paper-ripple fit></paper-ripple>
<div class='title'></div>
<paper-tabs noink="true" selected="0">
<!-- only HOME gets route. Others will but down below -->
<paper-tab class="route" onclick="page('/')">
HOME
</paper-tab>
<paper-tab onclick="page('/resume')">
RESUME
</paper-tab>
<paper-tab>
CONTACT
</paper-tab>
</paper-tabs>
<div class='title bottom'>
<h1 id="name-title">Foo<p> bar<p></h1>
</div>
</paper-toolbar>
UPDATE...plunker example condenses paper-header-panel in non waterfall mode:
<paper-header-panel
mode="waterfall-tall"
class="fit">
<div>
<paper-toolbar>
<paper-tabs>
<!-- only HOME gets route. Others will but down below -->
<paper-tab class="route" onclick="page('/')">
HOME
</paper-tab>
</paper-tabs>
</paper-toolbar>
<paper-ripple></paper-ripple>
</div>
</paper-header-panel>
paper-toolbar has three vertically stacked divs. So having a paper-ripple that takes the whole space is not an option here. What you can do is to wrap the paper-toolbar with a parent div and have the paper-ripple sit at the same level as the paper-toolbar.
Note that this parent div needs to have a paper-header class so that the paper-header-panel knows it's the header and will assign proper styling to it. Also, to constraint the paper-ripple, this parent div needs to be relative position.
The last change you need to make is to manually give the paper-toolbar a tall class since it's no longer the paper-header-panel's direct children.
<paper-header-panel mode="waterfall-tall" class="fit">
<div class="paper-header relative">
<paper-toolbar class="tall">
<div class="title"></div>
<paper-tabs noink selected="0">
<paper-tab class="route" onclick="page('/')">HOME</paper-tab>
<paper-tab onclick="page('/resume')">RESUME</paper-tab>
<paper-tab>CONTACT</paper-tab>
</paper-tabs>
<div class="title bottom">
<h1 id="name-title">Foo<p> bar<p></h1>
</div>
</paper-toolbar>
<paper-ripple></paper-ripple>
</div>
</paper-header-panel>
Check out this plunker.
We currently have an paper tab view with 3 tabs, each tab loads its own iron page. Inside the iron page we pull a list of elements using an API. The iron list successfully loads the api results but we can only view the first few elements.
The other elements are hidden as we are unable to scroll. How do we make the list scrollable? as the list view grows in size. The list is dynamically loaded when a particular tab is selected.
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="paper-font-title"><div class="logo"></div></span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="/" >
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="todays-sminq" href="/todays-sminq" on-click="onDataRouteClick">
<iron-icon icon="info"></iron-icon>
<span>Today's sminq</span>
</a>
<a data-route="upcoming-sminq" href="/upcoming-sminq" on-click="onDataRouteClick">
<iron-icon icon="mail"></iron-icon>
<span>Upcoming sminq</span>
</a>
<a on-click="logOut">
<iron-icon icon="user"></iron-icon>
<span>Log Out</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-header-panel main condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="small">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">Sminq</div>
</div>
<!-- Application sub title -->
<!--<div class="bottom bottom-container center horizontal layout">-->
<!--<div class="bottom-title paper-font-subhead">waiting is now fun</div>-->
<!--</div>-->
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home" >
<live-sminq ></live-sminq>
<!--paper-material elevation="1">
</paper-material>
<paper-material elevation="1">
</paper-material>
<paper-material elevation="1" class="paper-font-body2">
</paper-material-->
</section>
<section data-route="todays-sminq" id="sectiontodays" >
<todays-sminq></todays-sminq>
<!--paper-material elevation="1">
</paper-material-->
</section>
<section data-route="sminq-info">
<sminq-single
token_id ="{{params.id}}" token_number="{{params.no}}" user_name="{{params.name}}"
status_type="{{params.status}}"
user_mobile ="{{params.mobile}}"
queue_id ="{{params.queueId}}"
sminq_type="{{params.sminqType}}"
joinDate="{{params.date}}"
>
</sminq-single>
</section>
<section data-route="live-tokens"class="layout vertical fit">
<live-tokens
queue_id="{{params.id}}" user_name="{{params.name}}">
</live-tokens>
</section>
<section data-route="upcoming-sminq">
<upcoming-sminq>
</upcoming-sminq>
</section>
<section data-route="not-found">
<paper-material elevation="1">
<h2 class="page-title">Page Not Found</h2>
<p></p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-header-panel>
</paper-drawer-panel>
This is our main index.html we have created separate module which loads the tabs and the list view
The code for this module is attached below
<iron-ajax
id="list"
headers='{"Authorization": "xxxx","X-Vertical-Type": "xxx" }'
content-type="application/json"
url=""
handle-as="json"
method="GET"
on-error="handleErr"
debounce-duration="300"
last-response="{{ liveQueues }}"
on-response="ajaxResponse">
</iron-ajax>
<!--<template auto is="dom-if" if="{{loading}}"style="width:100%;">-->
<!--<paper-progress value="10" indeterminate="true" ></paper-progress>-->
<!--</template>-->
<div></div>
<span style="display:none;">[[selected]]</span>
<paper-spinner id="spinner" alt="Loading tokens numbers" ></paper-spinner>
<paper-tabs id="scrollableTabs" selected={{selected}} scrollable >
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-tab on-click="listLiveTokens" >[[queue.queueName]]</paper-tab>
</template>
</paper-tabs>
<iron-pages selected="{{selected}}">
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-material elevation="1">
<iron-list items="[[queueTokens]]" as="token">
<template>
<div>
<div class="item" tabindex="0">
<span class="avatar" >[[token.tokenNumber]]</span>
<a href$="{{_getDetailsLink(token.tokenId,token.tokenNumber,token.userName,token.statusType,token.userMobile,token.joinDate)}}">
<div class="pad">
<div class="primary">[[token.userName]]</div>
<div class="secondary">[[token.userMobile]]</div>
<div class="secondary dim">[[token.notes]]</div>
<div class="secondary dim">[[token.joinTime]]</div>
</div>
</a>
<iron-icon icon$="[[iconForItem(sminq)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-material>
</template>
</iron-pages>
<iron-ajax
id="tokens"
headers='{"Authorization": "xxx","X-Vertical-Type": "xxxx" }'
content-type="application/json"
url=""
handle-as="json"
method="GET"
on-error="tokenError"
debounce-duration="300"
last-response="{{ queueTokens }}"
on-response="tokenResponse">
</iron-ajax>
<template is="dom-if" if="{{isQueueId}}">
<sminq-add queue_id="{{queueId}}"></sminq-add>
</template>
You can implement IronResizableBehavior to resize your list when you switch tabs (note: it should work by default though):
iron-list lays out the items when it receives a notification via the resize event. This event is fired by any element that implements IronResizableBehavior.
By default, elements such as iron-pages, paper-tabs or paper-dialog will trigger this event automatically. If you hide the list manually (e.g. you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. e.g.
document.querySelector('iron-list').fire('resize');
I have followed the polymer demo to create a navigation drawer with a icon to open it on click. The demo only requires one click to open up the navigation drawer, but when I try it with my own code it required double clicks to open up. Any reason why? I have copied the code straight up from the demo. The function openDrawer() looks correct, but opening the drawers a double click. I don't know why it won't open on the first click.
<body fullbleed>
<template is="auto-binding" id="tmp">
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer id="drawer" mode="seamed">
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu selected="{{option}}" valueattr="data-category">
</core-menu>
</core-header-panel>
<core-header-panel main id="main" mode="seamed">
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu" onclick="openDrawer()"></paper-icon-button>
<span flex>Booklet</span>
</core-toolbar>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var pageStart = document.querySelector('#tmp');
pageStart.option = 'home';
});
function openDrawer() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
}
</script>
</body>
I see a few issues.
Because you have everything in an auto-binding template, you need to listen for template-bound instead of polymer-ready. Only when template-bound fires will your elements have been stamped to the DOM.
The other issue is that you're adding your click listener INSIDE your openDrawer method. You want to add the click listener in the template-bound handler.
Here's a jsbin example
<body fullbleed>
<template is="auto-binding" id="tmp">
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer id="drawer" mode="seamed">
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu selected="{{option}}" valueattr="data-category">
<core-item>Foo</core-item>
<core-item>Bar</core-item>
<core-item>Baz</core-item>
</core-menu>
</core-header-panel>
<core-header-panel main id="main" mode="seamed">
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<span flex>Booklet</span>
</core-toolbar>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
document.addEventListener('template-bound', function() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
});
</script>
</body>
I'm in the middle of a project building a website for a family takeaway, I've managed to get the core design right for what I want. I now have a problem displaying adsense within my website.
I receive a message in console
Uncaught Error: adsbygoogle.push(): All ins elements in the DOM with class=adsbygoogle already have ads in them.
please take a look at the website http://tastygrillbristol.uk
</style>
<core-drawer-panel transition id="core_drawer_panel" touch-action>
<section id="section" drawer>
<core-header-panel mode="standard" id="core_header_panel">
<core-toolbar id="core_toolbar">
<div id="div">Menu</div>
</core-toolbar>
<section id="section2">
<core-menu selected="0" id="core_menu">
<core-item id="core_item7" icon="home" label="Home" horizontal center layout></core-item>
<core-submenu id="core_submenu" icon="list" label="Online Menu">
<core-item id="core_item" label="Special Offers" horizontal center layout></core-item>
<core-item id="core_item" label="Everything" horizontal center layout></core-item>
<core-item id="core_item" label="Burgers" horizontal center layout></core-item>
<core-item id="core_item1" label="Kebabs" horizontal center layout></core-item>
<core-item id="core_item2" label="Doners" horizontal center layout></core-item>
<core-item id="core_item3" label="Pizzas" horizontal center layout></core-item>
</core-submenu>
<core-item id="core_item4" icon="shopping-cart" label="Deliver to you" horizontal center layout></core-item>
<core-item id="core_item5" icon="perm-phone-msg" label="Call us" horizontal center layout></core-item>
<core-item id="core_item6" icon="file-map" label="Find us" horizontal center layout></core-item>
<core-item id="core_item6" icon="favorite" label="Follow us" horizontal center layout ></core-item>
</core-menu>
</section>
</core-header-panel>
</section>
<section id="section1" main>
<core-scroll-header-panel condenses id="core_scroll_header_panel" headerHeight="256" condensedHeaderHeight="64">
<core-toolbar class="tall" id="core_toolbar1">
<paper-icon-button core-drawer-toggle id="navicon" icon="menu"></paper-icon-button>
<div flex></div>
<div horizontal center-justified layout class="bottom indent title" > <p><b><font color=#FF1744>Tasty Grill</font></b></p> </div>
</core-toolbar>
<div class="content" horizontal layout center>
<post-card1>
<div align="center"><h2 align="center">WELCOME TO OUR WEBSITE, BARE IN MIND WE'RE STILL UNDER CONSTRUCTION</h2><p align="center">Take a look at our online Menu by pressing the Burger <core-icon icon="menu"></core-icon> Button above, or if you know exactly what you want call us now on <p><b>(0117)9522233</b></p></p></div>
</post-card1></div>
<section class="section1" horizontal center-justified layout>
<h1>ADSENSE CODE GOES HERE</h1>
</core-header-panel>
</core-scroll-header-panel>
</section>
</core-drawer-panel>
</template>
Just tested today (2017-05-05) the Ads is working fine within element (Polymer 1), no warnings, following is the sample code:
<paper-card>
<div class="card-content">
<p>my content here</p>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AutoSize -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-000000000"
data-ad-slot="000000000"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</paper-card>