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

Commit de5cf14

Browse files
author
Steve Orvell
committed
layerize list pages; alter css so list sizing is correct when inside a flex box.
1 parent bc0e0df commit de5cf14

File tree

2 files changed

+168
-3
lines changed

2 files changed

+168
-3
lines changed

‎examples/more/flex.html

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!doctype html>
2+
<!--
3+
Copyright 2013 The Polymer Authors. All rights reserved.
4+
Use of this source code is governed by a BSD-style
5+
license that can be found in the LICENSE file.
6+
-->
7+
<html>
8+
<head>
9+
<title>list: flex</title>
10+
<meta name="viewport" content="width=device-width">
11+
<script src="../../../platform/platform.js"></script>
12+
<link rel="import" href="../../polymer-list.html">
13+
<style>
14+
html, body {
15+
height: 100%;
16+
margin: 0;
17+
}
18+
19+
list-test {
20+
display: flex;
21+
height: 100%;
22+
margin: 0 auto;
23+
}
24+
25+
.stuff {
26+
min-height: 60px;
27+
background: red !important;
28+
border-bottom: 1px solid black;
29+
}
30+
</style>
31+
</head>
32+
<body>
33+
<list-test></list-test>
34+
35+
<polymer-element name="list-test">
36+
<template>
37+
<style>
38+
polymer-list {
39+
/*height: 100%;*/
40+
flex: 1;
41+
}
42+
43+
.message {
44+
box-sizing: border-box;
45+
height: 80px;
46+
padding: 4px;
47+
padding-left: 77px;
48+
line-height: 167%;
49+
cursor: default;
50+
background-color: white;
51+
position: relative;
52+
color: black;
53+
background-repeat: no-repeat;
54+
background-position: 10px 10px;
55+
background-size: 60px;
56+
border-bottom: 1px solid #ddd;
57+
}
58+
59+
.from {
60+
display: inline;
61+
font-weight: bold;
62+
}
63+
64+
.timestamp {
65+
margin-left: 10px;
66+
font-size: 12px;
67+
opacity: 0.8;
68+
}
69+
70+
.body {
71+
font-size: 12px;
72+
opacity: 0.8;
73+
/*white-space: nowrap;
74+
overflow: hidden;
75+
text-overflow: ellipsis;*/
76+
}
77+
78+
.subject {
79+
}
80+
81+
.divider {
82+
background: grey;
83+
color: white;
84+
height: 30px;
85+
line-height: 30px;
86+
padding: 0 10px;
87+
text-transform: uppercase;
88+
}
89+
</style>
90+
<polymer-list id="list" data="{{data}}" fixedHeight>
91+
<template>
92+
<div class="message" style="background-image: url(../images/{{index % 4}}.png);">
93+
<span class="from">{{item.name}}</span>
94+
<span class="timestamp">{{item.time}}</span>
95+
<div class="subject">Infinite List. {{index}}</div>
96+
<div class="body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
97+
</div>
98+
</template>
99+
</polymer-list>
100+
101+
</template>
102+
<script>
103+
(function() {
104+
var strings = [
105+
"PARKOUR!",
106+
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
107+
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
108+
];
109+
110+
var namegen = {
111+
generateString: function(inLength) {
112+
var s = '';
113+
for (var i=0; i<inLength; i++) {
114+
s += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
115+
}
116+
return s;
117+
},
118+
generateName: function(inMin, inMax) {
119+
return this.generateString(Math.floor(Math.random() * (inMax - inMin + 1) + inMin));
120+
}
121+
};
122+
123+
Polymer('list-test', {
124+
count: 17,
125+
ready: function() {
126+
this.data = this.generateData();
127+
},
128+
generateData: function() {
129+
var names = [], data = [];
130+
for (var i=0; i<this.count; i++) {
131+
names.push(namegen.generateName(4, 8));
132+
}
133+
names.sort();
134+
for (var i=0; i<this.count; i++) {
135+
var name = names[i];
136+
var divider = name.charAt(0);
137+
if (divider === (names[i-1] || '').charAt(0)) {
138+
divider = null;
139+
}
140+
data.push({
141+
index: i,
142+
name: name,
143+
divider: divider,
144+
details: strings[i % 3],
145+
time: '8:29pm'
146+
});
147+
}
148+
return data;
149+
},
150+
tapAction: function(e) {
151+
console.log('tap', e);
152+
}
153+
});
154+
})();
155+
</script>
156+
</polymer-element>
157+
</body>
158+
</html>

‎polymer-virtual-list.css

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
:host {
22
display: block;
33
overflow: hidden;
4+
position: relative;
45
}
56

67
.polymer-list-list {
7-
height: 100%;
8+
position: absolute;
9+
top: 0;
10+
right: 0;
11+
bottom: 0;
12+
left: 0;
813
overflow: auto;
914
-webkit-overflow-scrolling: touch;
15+
-webkit-transform: translateZ(0);
16+
transform: translateZ(0);
1017
}
1118

1219
.polymer-list-viewport {
@@ -21,8 +28,8 @@
2128
.polymer-list-viewport > * {
2229
position: absolute;
2330
overflow: hidden;
24-
/*-webkit-transform: translateZ(0);
25-
transform: translateZ(0);*/
31+
-webkit-transform: translateZ(0);
32+
transform: translateZ(0);
2633
}
2734

2835
.polymer-list-viewport:not(.horizontal) > * {

0 commit comments

Comments
 (0)