OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2014 The Chromium Authors. All rights reserved. | 2 // Copyright 2014 The Chromium Authors. All rights reserved. |
3 // Use of this source code is governed by a BSD-style license that can be | 3 // Use of this source code is governed by a BSD-style license that can be |
4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
5 --> | 5 --> |
6 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" /> | 6 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" /> |
7 <import src="city-data-service.sky" as="CityDataService" /> | 7 <import src="city-data-service.sky" as="CityDataService" /> |
8 <import src="city-sequence.sky" as="CitySequence" /> | 8 <import src="city-sequence.sky" as="CitySequence" /> |
9 | 9 |
10 <template> | 10 <template> |
11 <style> | 11 <style> |
12 div { | 12 div { |
13 font-size: 16px; | 13 font-size: 16px; |
14 color: #FFF; | 14 color: #FFF; |
15 background-color: #333; | 15 background-color: #333; |
16 padding: 4px 4px 4px 12px; | 16 padding: 4px 4px 4px 12px; |
| 17 display: paragraph; |
17 } | 18 } |
18 </style> | 19 </style> |
19 <div>{{ state }}</div> | 20 <div>{{ state }}</div> |
20 </template> | 21 </template> |
21 <script> | 22 <script> |
22 SkyElement({ | 23 SkyElement({ |
23 name: 'state-header', | 24 name: 'state-header', |
24 | 25 |
25 set datum(datum) { | 26 set datum(datum) { |
26 this.state = datum.state; | 27 this.state = datum.state; |
27 } | 28 } |
28 }); | 29 }); |
29 </script> | 30 </script> |
30 | 31 |
31 <template> | 32 <template> |
32 <style> | 33 <style> |
33 div { | 34 div { |
34 font-size: 12px; | 35 font-size: 12px; |
35 font-weight: bold; | 36 font-weight: bold; |
36 padding: 2px 4px 4px 12px; | 37 padding: 2px 4px 4px 12px; |
37 background-color: #DDD; | 38 background-color: #DDD; |
| 39 display: paragraph; |
38 } | 40 } |
39 </style> | 41 </style> |
40 <div>{{ letter }}</div> | 42 <div>{{ letter }}</div> |
41 </template> | 43 </template> |
42 <script> | 44 <script> |
43 SkyElement({ | 45 SkyElement({ |
44 name: 'letter-header', | 46 name: 'letter-header', |
45 | 47 |
46 set datum(datum) { | 48 set datum(datum) { |
47 this.letter = datum.letter; | 49 this.letter = datum.letter; |
48 } | 50 } |
49 }); | 51 }); |
50 </script> | 52 </script> |
51 | 53 |
52 <template> | 54 <template> |
53 <style> | 55 <style> |
54 :host { | 56 :host { |
55 display: flex; | 57 display: flex; |
56 font-size: 13px; | 58 font-size: 13px; |
57 padding: 8px 4px 4px 12px; | 59 padding: 8px 4px 4px 12px; |
58 border-bottom: 1px solid #EEE; | 60 border-bottom: 1px solid #EEE; |
59 line-height: 15px; | 61 line-height: 15px; |
60 overflow: hidden; | 62 overflow: hidden; |
61 } | 63 } |
62 | 64 |
| 65 div { |
| 66 display: paragraph; |
| 67 } |
| 68 |
63 span { | 69 span { |
64 display: inline; | 70 display: inline; |
65 } | 71 } |
66 | 72 |
67 #name { | 73 #name { |
68 font-weight: bold | 74 font-weight: bold |
69 } | 75 } |
70 | 76 |
71 #population { | 77 #population { |
72 color: #AAA; | 78 color: #AAA; |
(...skipping 520 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
593 return; | 599 return; |
594 | 600 |
595 this.updateView(this.loader.getItems(), true); | 601 this.updateView(this.loader.getItems(), true); |
596 } | 602 } |
597 }); | 603 }); |
598 | 604 |
599 })(this); | 605 })(this); |
600 | 606 |
601 </script> | 607 </script> |
602 | 608 |
OLD | NEW |