| template DivisionSales(var divisions) { |
| css { |
| .division-item { |
| background-color: #bbb; |
| border-top: 2px solid white; |
| line-height: 20pt; |
| padding-left: 5px; |
| } |
| .product-item { |
| background-color: lightgray; |
| margin-left: 10px; |
| border-top: 2px solid white; |
| line-height: 20pt; |
| } |
| .product-title { |
| position: absolute; |
| left: 45px; |
| } |
| .product-name { |
| font-weight: bold; |
| position: absolute; |
| left: 100px; |
| } |
| .product-users { |
| position: absolute; |
| left: 150px; |
| font-style: italic; |
| color: gray; |
| width: 110px; |
| } |
| .expand-collapse { |
| margin-left: 5px; |
| margin-right: 5px; |
| vertical-align: top; |
| cursor: pointer; |
| } |
| .expand { |
| font-size: 9pt; |
| } |
| .collapse { |
| font-size: 8pt; |
| } |
| .show-sales { |
| display: inherit; |
| } |
| .hide-sales { |
| display: none; |
| } |
| .sales-item { |
| font-family: arial; |
| background-color: lightgray; |
| margin-left: 10px; |
| border-top: 1px solid white; |
| line-height: 18pt; |
| padding-left: 5px; |
| } |
| .ytd-sales { |
| position: absolute; |
| left: 100px; |
| } |
| } |
| <div> |
| ${#each divisions div} |
| <div class="division-item"> |
| <span>${div.name}</span> |
| <span>-</span> |
| <span>${div.id}</span> |
| </div> |
| <div> |
| ${#each div.products prod} |
| <div class="product-item"> |
| <span var=productZippy class="expand-collapse expand">▼</span> |
| <span class='product-title'>Product</span> |
| <span class="product-name">${prod.name}</span> |
| <span class="product-users" align=right>${prod.users} users</span> |
| <div class="show-sales"> |
| ${#each prod.sales sale} |
| <div class="sales-item"> |
| <span>${sale.country}</span> |
| <span class="ytd-sales">\$${sale.yearly}</span> |
| </div> |
| ${/each} |
| </div> |
| </div> |
| ${/each} |
| </div> |
| ${/each} |
| </div> |
| } |
| |
| template Header(String company, Date date) { |
| css { |
| .header { |
| background-color: slateGray; |
| font-family: arial; |
| color: lightgray; |
| font-weight: bold; |
| padding-top: 20px; |
| } |
| } |
| <div class='header' align=center> |
| <h2>${company}</h2> |
| <div align=right>${date}</div> |
| </div> |
| } |
| |