| 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 |