| OLD | NEW |
| 1 template TopSearches(var persons) { | 1 template TopSearches(var persons) { |
| 2 css { | 2 css { |
| 3 .all-list { | 3 .all-list { |
| 4 font-family: arial; | 4 font-family: arial; |
| 5 } | 5 } |
| 6 .person-item { | 6 .person-item { |
| 7 padding: 4px 0px 4px 5px; | 7 padding: 4px 0px 4px 5px; |
| 8 background-color: slateGray; | 8 background-color: slateGray; |
| 9 color: white; | 9 color: white; |
| 10 font-weight: bold; | 10 font-weight: bold; |
| 11 } | 11 } |
| 12 .search-item { | 12 .search-item { |
| 13 font-size: 11pt; | 13 font-size: 11pt; |
| 14 padding: 3px 0px 3px 15px; | 14 padding: 3px 0px 3px 15px; |
| 15 background-color: #aaa; | 15 background-color: #aaa; |
| 16 font-weight: bold; | 16 font-weight: bold; |
| 17 } | 17 } |
| 18 .metrics-item { | 18 .metrics-item { |
| 19 font-size: 10pt; | 19 font-size: 10pt; |
| 20 padding: 2px 0px 2px 25px; | 20 padding: 2px 0px 2px 25px; |
| 21 background-color: lightgray; | 21 background-color: lightgray; |
| 22 border-bottom: 1px solid white; | 22 border-bottom: 1px solid white; |
| 23 } | 23 } |
| 24 .total-hits { | 24 .total-hits { |
| 25 position: absolute; | 25 position: absolute; |
| 26 left: 100px; | 26 left: 100px; |
| 27 } | 27 } |
| 28 } | 28 } |
| 29 <div class="all-list"> | 29 <div class="all-list"> |
| 30 ${#each persons} | 30 ${#each persons person} |
| 31 <div class="person-item"> | 31 <div class="person-item"> |
| 32 <span>${name}, </span> | 32 <span>${person.name}, </span> |
| 33 <span>age = </span> | 33 <span>age = </span> |
| 34 <span>${age}</span> | 34 <span>${person.age}</span> |
| 35 </div> | 35 </div> |
| 36 <div> | 36 <div> |
| 37 ${#each persons.searches} | 37 ${#each person.searches search} |
| 38 <div class="search-item">query=${query}, rank=${rank}, total
=${total}</div> | 38 <div class="search-item">query=${search.query}, rank=${search.ran
k}, total=${search.total}</div> |
| 39 ${#each searches.metrics} | 39 ${#each search.metrics metric} |
| 40 <div class="metrics-item"> | 40 <div class="metrics-item"> |
| 41 <span>${country}</span> | 41 <span>${metric.country}</span> |
| 42 <span class="total-hits">${quantity}</span> | 42 <span class="total-hits">${metric.quantity}</span> |
| 43 </div> | 43 </div> |
| 44 ${/each} | 44 ${/each} |
| 45 ${/each} | 45 ${/each} |
| 46 </div> | 46 </div> |
| 47 ${/each} | 47 ${/each} |
| 48 </div> | 48 </div> |
| 49 } | 49 } |
| 50 | 50 |
| 51 template NameEntry(String name, int age) { | 51 template NameEntry(String name, int age) { |
| 52 css { | 52 css { |
| 53 .name-item { | 53 .name-item { |
| 54 font-size: 18pt; | 54 font-size: 18pt; |
| 55 font-weight: bold; | 55 font-weight: bold; |
| 56 } | 56 } |
| 57 } | 57 } |
| 58 <div var=topDiv class="name-item" attr="test" attr1=test1 attr2='test2' attr3=
test3> | 58 <div var=topDiv class="name-item" attr="test" attr1=test1 attr2='test2' attr3=
test3> |
| 59 <span var=spanElem>${name}</span> | 59 <span var=spanElem>${name}</span> |
| 60 <span> - </span> | 60 <span> - </span> |
| 61 <span>${age}</span> | 61 <span>${age}</span> |
| 62 </div> | 62 </div> |
| 63 } | 63 } |
| 64 | 64 |
| OLD | NEW |