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} |
| 64 <div class="division-item"> |
| 65 <span>${name}</span> |
| 66 <span>-</span> |
| 67 <span>${id}</span> |
| 68 </div> |
| 69 <div> |
| 70 ${#each divisions.products} |
| 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">${name}</span> |
| 75 <span class="product-users" align=right>${users} users</span> |
| 76 <div class="show-sales"> |
| 77 ${#each products.sales} |
| 78 <div class="sales-item"> |
| 79 <span>${country}</span> |
| 80 <span class="ytd-sales">\$${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 |