| OLD | NEW |
| (Empty) |
| 1 template DivisionSales(var divisions) { | |
| 2 css { | |
| 3 .division-item { | |
| 4 background-color: #bbb; | |
| 5 border-top: 2px solid white; | |
| 6 line-height: 20pt; | |
| 7 padding-left: 5px; | |
| 8 } | |
| 9 .product-item { | |
| 10 background-color: lightgray; | |
| 11 margin-left: 10px; | |
| 12 border-top: 2px solid white; | |
| 13 line-height: 20pt; | |
| 14 } | |
| 15 .product-title { | |
| 16 position: absolute; | |
| 17 left: 45px; | |
| 18 } | |
| 19 .product-name { | |
| 20 font-weight: bold; | |
| 21 position: absolute; | |
| 22 left: 100px; | |
| 23 } | |
| 24 .product-users { | |
| 25 position: absolute; | |
| 26 left: 150px; | |
| 27 font-style: italic; | |
| 28 color: gray; | |
| 29 width: 110px; | |
| 30 } | |
| 31 .expand-collapse { | |
| 32 margin-left: 5px; | |
| 33 margin-right: 5px; | |
| 34 vertical-align: top; | |
| 35 cursor: pointer; | |
| 36 } | |
| 37 .expand { | |
| 38 font-size: 9pt; | |
| 39 } | |
| 40 .collapse { | |
| 41 font-size: 8pt; | |
| 42 } | |
| 43 .show-sales { | |
| 44 display: inherit; | |
| 45 } | |
| 46 .hide-sales { | |
| 47 display: none; | |
| 48 } | |
| 49 .sales-item { | |
| 50 font-family: arial; | |
| 51 background-color: lightgray; | |
| 52 margin-left: 10px; | |
| 53 border-top: 1px solid white; | |
| 54 line-height: 18pt; | |
| 55 padding-left: 5px; | |
| 56 } | |
| 57 .ytd-sales { | |
| 58 position: absolute; | |
| 59 left: 100px; | |
| 60 } | |
| 61 } | |
| 62 <div> | |
| 63 ${#each divisions div} | |
| 64 <div class="division-item"> | |
| 65 <span>${div.name}</span> | |
| 66 <span>-</span> | |
| 67 <span>${div.id}</span> | |
| 68 </div> | |
| 69 <div> | |
| 70 ${#each div.products prod} | |
| 71 <div class="product-item"> | |
| 72 <span var=productZippy class="expand-collapse expand">▼</span> | |
| 73 <span class='product-title'>Product</span> | |
| 74 <span class="product-name">${prod.name}</span> | |
| 75 <span class="product-users" align=right>${prod.users} users</sp
an> | |
| 76 <div class="show-sales"> | |
| 77 ${#each prod.sales sale} | |
| 78 <div class="sales-item"> | |
| 79 <span>${sale.country}</span> | |
| 80 <span class="ytd-sales">\$${sale.yearly}</span> | |
| 81 </div> | |
| 82 ${/each} | |
| 83 </div> | |
| 84 </div> | |
| 85 ${/each} | |
| 86 </div> | |
| 87 ${/each} | |
| 88 </div> | |
| 89 } | |
| 90 | |
| 91 template Header(String company, Date date) { | |
| 92 css { | |
| 93 .header { | |
| 94 background-color: slateGray; | |
| 95 font-family: arial; | |
| 96 color: lightgray; | |
| 97 font-weight: bold; | |
| 98 padding-top: 20px; | |
| 99 } | |
| 100 } | |
| 101 <div class='header' align=center> | |
| 102 <h2>${company}</h2> | |
| 103 <div align=right>${date}</div> | |
| 104 </div> | |
| 105 } | |
| 106 | |
| OLD | NEW |