Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Demo of core-list grid with padding #80

Open
davidcv5 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Demo of core-list grid with padding #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"web-component-tester": "Polymer/web-component-tester#master",
"core-ajax": "Polymer/core-ajax#master",
"core-animated-pages": "Polymer/core-animated-pages#master",
"core-header-panel": "Polymer/core-header-panel",
"core-icon": "Polymer/core-icon#master",
"core-icon-button": "Polymer/core-icon-button#master",
"core-icons": "Polymer/core-icons#master",
Expand Down
1 change: 1 addition & 0 deletions demos/bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#master",
"core-ajax": "Polymer/core-ajax",
"core-header-panel": "Polymer/core-header-panel",
"core-icon": "Polymer/core-icon",
"core-icon-button": "Polymer/core-icon-button",
"core-icons": "Polymer/core-icons",
Expand Down
105 changes: 105 additions & 0 deletions demos/demo-grid-padding.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>core-list</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-list.html">
<link rel="import" href="../../core-ajax/core-ajax.html">
<link rel="import" href="../../core-header-panel/core-header-panel.html">
<link rel="import" href="../../core-image/core-image.html">
<link rel="import" href="../../core-toolbar/core-toolbar.html">
<style>
html, body {
margin: 0;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}

list-test {
display: block;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body fit>

<list-test></list-test>

<polymer-element name="list-test" layout vertical>
<template>
<style>
.item {
box-sizing: border-box;
padding: 10px;
overflow: hidden;
color: black;
}
.item > core-image {
height: 150px;
width: 150px;
background-color: lightgray;
}
.item.selected {
background:yellow;
}
.divider {
padding-top: 40px;
font-size: 4em;
}
core-header-panel::shadow #mainContainer {
padding-left: 100px;
padding-right: 100px;
}
</style>
<core-header-panel id="hPanel" flex>
<core-toolbar>Grid With Padding</core-toolbar>
<core-list id="list" data="{{data}}" grid width="172" scrollTarget="{{$.hPanel.scroller}}" flex>
<template>
<div class="item {{selected ? 'selected' : ''}}">
<core-image id="image" src="{{model.image}}" preload></core-image>
<div>{{model.caption}}</div>
</div>
</template>
</core-list>
</core-header-panel>
</template>
<script>
(function() {

Polymer('list-test', {
ready: function() {
window.list = this.$.list;
var data = [];
var groups = [];
var gidx = 0;
var gitem = 0;
var gmax = 3;
for (var i=0; i<1000; i++) {
var color = Math.floor(Math.random()*0xFFFFFF).toString(16);
data.push({
image: 'http://placehold.it/150x150/' + color + '/ffffff&text=Index%20' + i,
caption: 'Caption ' + i,
color: color
});
}
this.data = data;
}
});
})();
</script>
</polymer-element>

</body>
</html>