https://gdg-test-ch.firebaseapp.com/
There are three cards in a row but there is some empty space in the right. in Mobile view the space become larger. Also the toolbar or nav bar is it fitting to the browser.
How can i make it responsive?
Card-view.html (card element)
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" />
<dom-module id="card-view">
<template>
<style include="iron-flex iron-flex-layout">
/* local styles go here */
:host {
display: block;
max-width: 1450px;
}
.card {
width: 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
</style>
<!-- local DOM goes here -->
<div class="container flex layout horizontal wrap">
<template is="dom-repeat" items="{{list}}">
<div class="card">
<paper-card heading="{{item.first}}" image="../image/{{item.last}}.jpg">
<div class="card-actions">
<paper-button>Explore!</paper-button>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat"></paper-icon-button>
</div>
</paper-card>
</div>
</template>
</div>
</template>
<script>
Polymer({
is: 'card-view',
ready: function() {
this.list = [
{first: 'Bob', last: 'i'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'},
{first: 'Sally', last: 'j'}
];
}
});
</script>
</dom-module>
Index.html (main page)
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/card-view.html" />
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html" />
</head>
<body>
<style>
a,.anchor-like,
.markdown-html a{
color: var(--default-primary-color);
text-decoration:none;
}
body {
background-color: #FF5722;
}
</style>
<paper-toolbar>
<span class="title">Title</span>
</paper-toolbar>
<card-view></card-view>
</body>
</html>
OK, so you want to make the cards sit in the middle and for the row length to get smaller before cards go off the the screen.
You want media queries and some maths :-)
Each card has a width of 300px + a 5px margin (on each side), meaning each one takes up 310px of space on the screen.
Lets say we never want to display more than 4 cards in a row that means we never want 'card-view' the have a greater with of 4x310px (1240px)
when we have less than 1240px of space we want to change to 3x310px so on and so forth.
card-view {
display: block;
margin: 0 auto;
}
#media screen and (min-width: 1240px) {
card-view {
width: 1240px;
}
}
#media screen and (min-width: 930px) and (max-width: 1239px) {
card-view {
width: 930px;
}
}
#media screen and (min-width: 620px) and (max-width: 929px) {
card-view {
width: 620px;
}
}
#media screen and (min-width: 310px) and (max-width: 619px) {
card-view {
width: 310px;
}
}
Here is a link to the concept https://jsfiddle.net/link2twenty/bzr9wt00/
Related
I have created a component with 2 paper-icon-buttons. This also include iron-icons. However when I click though ripple is seen. The icon image itself is missing.
Here is the code
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<dom-module id="lightbox-app">
<template>
<style >
:host {
display: block;
position: fixed;
background: rgba(247, 245, 245, 0.8);
width: 100%;
height: 100%;
}
</style>
<paper-icon-button icon="favorite"style="color: red;" title="heart"></paper-icon-button>
<paper-icon-button icon="arrow-back" style="color: rgb(10, 10, 10);"></paper-icon-button>
<iron-image sizing = "cover" style = "width:calc(100% - 4px); height:180px; background-color: lightgray;"
preload fade src="https://firebasestorage.googleapis.com/v0/b/wishpix-5fff8.appspot.com/o/gn-01.jpg?alt=media&token=dd1a1f47-a2f8-464a-bb3c-0581ea7613d0"></iron-image>
</template>
<script>
/**
* #customElement
* #polymer
*/
class LightboxApp extends Polymer.Element {
static get is() { return 'lightbox-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'lightbox-app'
}
};
}
ready ()
{
super.ready();
}
}
window.customElements.define(LightboxApp.is, LightboxApp);
</script>
</dom-module>
As mentioned above while the ripple is seen on click, image is not seen
Here is my layout. Without iron-list it works, but with it it gives me the error
Uncaught TypeError: this.$.selector.clearSelection is not a function
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../common-settings-service/common-settings-service.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html"/>
<link rel="import" href="../bower_components/paper-material/paper-material.html"/>
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="common-settings">
<style>
:host {
display: block;
}
paper-material {
background: #FFFFFF;
}
.container {
#apply(--layout-horizontal);
}
.windowItem {
#apply(--layout-horizontal);
}
.list {
#apply(--layout-flex);
#apply(--layout-vertical);
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
</style>
<template>
<common-settings-service
id="commonSettings"
url="/board_service/common_settings/"
settings="{{settings}}"/>
<paper-material elevation="1">
<div class="container">
<h3> Настройки обработки</h3>
<h4>Окна</h4>
<div class="list">
<iron-list items="[[settings.timeWindows]]" as="item">
<template>
<div class="item">
Name: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
While I don't know how to show you live demo I've been able to debug a little iron-list code. The problem is with the last line.
clearSelection: function() {
function unselect(item) {
var model = this._getModelFromItem(item);
if (model) {
model[this.selectedAs] = false;
}
}
if (Array.isArray(this.selectedItems)) {
this.selectedItems.forEach(unselect, this);
} else if (this.selectedItem) {
unselect.call(this, this.selectedItem);
}
this.$.selector.clearSelection();
},
Debugging shows that there is really no such function in selector. And this selector is actually array-selector element from polymer library. And it have such function in the source code.
Ok, so I've found the reason for this. They've changed API beetween 1.0.9 and 1.1.1. My polymer was version 1.0.9 and that's why it haven't worked.
I've updated all polymer elements to the latest version and now it works.
My index.html is like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Keyboard</title>
<!-- 1. Load webcomponent support before any code that touches the DOM -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/each-key.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style>
#keyboard-layout {
#apply(--layout-horizontal);
}
</style>
</head>
<body>
<div id="keyboard-layout">
<each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
<each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
<each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
</div>
</body>
</html>
I'm expecting each-key will be arranged side by side (like float:left); however it is not (and each-key still behaves like display:block). I've my each-key.html as
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-ripple/paper-ripple.html">
<dom-module id="each-key">
<style>
.key{
min-height: 50px;
max-height: 80px;
border: 1px solid rgba(0,0,0,.6);
position: relative;
}
paper-ripple {
color: #4285f4;
}
.key>div { position: absolute; }
.top-left { left: 4px; top: 4px; }
.top-right { right: 4px; top: 0; }
.bottom-left { left: 4px; bottom: 4px; }
.bottom-right { right: 4px; bottom: 0; }
</style>
<template>
<div class="key" >
<div class="top-left"></div>
<div class="top-right">{{shiftdown}}</div>
<div class="bottom-left">{{english}}</div>
<div class="bottom-right">{{shiftup}}</div>
<paper-ripple fit></paper-ripple>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'each-key',
properties: {
'english' : String,
'shiftup': String,
'shiftdown': String
}
});
</script>
Is there something I'm missing here?
In the documentation, https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes, in the <style> section, what what does it mean by /*layout properties for the host element */ (what is a host element?) and /* layout properties for a local DOM element */ (what is a local DOM in this context? local DOM === shadow DOM?) ?
The CSS mixins only work inside dom-module's, the classes work outside as well - I don't know why, I had to try it out as well...
This would work:
<body class="layout horizontal">
But the more polymeric way would probably be to wrap the complete thing inside a dom-module:
<dom-module id="all-keys">
<style>
#keyboard-layout {
#apply(--layout);
#apply(--layout-horizontal);
}
</style>
<template>
<div id="keyboard-layout" >
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
</div>
</template>
<script>
Polymer({is: 'all-keys'});
</script>
</dom-module>
If you also add a min-width to your each-key then this works ok:
<dom-module id="each-key">
<style>
:host {
min-width: 50px;
}
or alternatively:
<dom-module id="each-key">
<style>
:host {
#apply(--layout-flex);
}
This also answers your question two: :host is to determine the attributes of the dom-module instance.
In other words, you can leave the <div id="keyboard-layout" > away:
<dom-module id="all-keys">
<style>
:host {
#apply(--layout);
#apply(--layout-horizontal);
}
</style>
<template>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
</template>
<script>
Polymer({is: 'all-keys'});
</script>
</dom-module>
The complete working source is on: http://jsbin.com/qanesapupo/1/edit?html,output
So I have a polymer element, which uses a nested template with repeat attribute. But it doesnt seem to recognize the JSON object being passed in.
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">
<polymer-element name="to-do">
<template>
<style>
:host {
display: block;
background: white;
height:400px;
width: 300px;
padding: 20px;
}
paper-input {
width: 70%;
margin: 10px;
display: inline-block;
}
core-icon {
margin: 55px 10px 10px 10px;
display: inline-block;
}
paper-checkbox {
display: block;
width: 100%;
}
</style>
<paper-input floatingLabel label="Enter a Task"></paper-input> <core-icon icon="add-circle"></core-icon>
<div class="tasks">
<template repeat="{{item in tasklist}}">
<paper-checkbox label="{{item.itemName}}"></paper-checkbox>
</template>
</div>
<core-localstorage name="tasks" value="{{tasklist}}"></core-localstorage>
</template>
<script>
Polymer('to-do', {
tasklist: [
{
itemName : "Study",
isDone : true
},
{
itemName : "Cook Dinner",
isDone : false
}
],
ready: function() {
console.log(this.tasklist);
},
addObject: function() {
}
});
</script>
</polymer-element>
It doesnt seem to get tasklist from the script block in the nested template block, but prints it out in the ready block.
You Can see a running demo of the above code here
https://to-do-prateekjadhwani.c9.io/demo.html
Thanks
*****EDIT****
Since, it was using localstorage, it was using data in tasklist from LocalStorage rather than updating itself with the code iteration.
So, I believe that this issue is resolved. But feel free to add comment(s) if you think that my reasoning isn't correct.
Thanks in advance.
Since, it was using localstorage, it was using data in tasklist from LocalStorage rather than updating itself with the code iteration. So, I believe that this issue is resolved.
I'm wanting to use core-scroll-header-panel with core-list so that as I scroll the list the header condenses and disappears. Particularly for mobile that will maximise the space for the list. I took the demo and tried to adapt it for a core-list but failed to get it to scroll the header off the page. My attempts are at http://jsbin.com/sivuvu
Any help appreciated.
Here's one possible solution:
<!doctype html>
<html>
<head>
<script src="https://www.polymer-project.org/0.5/webcomponents.min.js"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-list/core-list.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-header-panel/core-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icon-button/core-icon-button.html">
<style shim-shadowdom>
body {
font-family: sans-serif;
color: #333;
}
/* background for toolbar when it is at its full size */
core-scroll-header-panel::shadow #headerBg {
background-image: url(https://www.polymer-project.org/0.5/components/core-scroll-header-panel/demos/images/bg9.jpg);
}
/* background for toolbar when it is condensed */
core-scroll-header-panel::shadow #condensedHeaderBg {
background-color: #f4b400;
}
core-toolbar {
color: #f1f1f1;
fill: #f1f1f1;
background-color: transparent;
}
.title {
-webkit-transform-origin: 0;
transform-origin: 0;
font-size: 40px;
}
.content {
padding: 8px;
background-color: #eee;
}
core-list {
border: solid 1px red;
margin: 10px;
overflow: hidden;
}
div.foo, core-list {
border: solid 1px blue;
margin: 10px;
}
div.row {
height: 80px;
border: solid 1px green;
margin: 3px;
text-align: center;
}
</style>
</head>
<body unresolved fullbleed>
<template is="auto-binding" id="page-template">
<core-scroll-header-panel condenses fit>
<core-toolbar class="tall">
<core-icon-button icon="arrow-back"></core-icon-button>
<div flex></div>
<core-icon-button icon="search"></core-icon-button>
<core-icon-button icon="more-vert"></core-icon-button>
<div class="bottom indent title">Title</div>
</core-toolbar>
<div class="content" flex>
<core-list data="{{data}}" flex>
<template>
<div class="row">
List row: {{index}}, User data from model: {{model.name}}
</div>
</template>
</core-list>
</div>
</core-scroll-header-panel>
</template>
<script>
var t = document.querySelector('#page-template');
t.data = [];
for (i = 0; i < 30; i++) {
t.data.push({name: 'Bob'});
}
t.addEventListener('template-bound', function() {
// custom transformation: scale header's title
var titleStyle = document.querySelector('.title').style;
addEventListener('core-header-transform', function(e) {
var d = e.detail;
var m = d.height - d.condensedHeight;
var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
titleStyle.transform = titleStyle.webkitTransform =
'scale(' + scale + ') translateZ(0)';
});
});
</script>
</body>
</html>
A few changes that I made to your code: instead of wrapping the <core-list> in a custom Polymer element definition, I just include it as part of the main page, but the page itself is wrapped in <template is="auto-binding">, giving you access to all the same template syntactic sugar you'd get from a custom element. The main other thing was to set overflow: hidden on the <core-list>, and rely on the scrollbar from the <core-scroll-header-panel> to scroll the list's content.