diff options
| author | Yuval Adam <yuv.adm@gmail.com> | 2014-05-28 13:18:45 +0300 |
|---|---|---|
| committer | Yuval Adam <yuv.adm@gmail.com> | 2014-05-28 13:18:45 +0300 |
| commit | 5c27b257eea9a9c8f5a70f5ffc9c2a290626f001 (patch) | |
| tree | 527dadb402f1de1121c129d28d95541bfe3a5378 | |
| parent | 4bcc90496f7400fbd409f93c632c374800ef8ae0 (diff) | |
Proper channels and subchannels
| -rw-r--r-- | static/css/main.css | 3 | ||||
| -rw-r--r-- | templates/home.html | 17 |
2 files changed, 15 insertions, 5 deletions
diff --git a/static/css/main.css b/static/css/main.css index 62dea16..6ec56a8 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,3 +1,6 @@ +.light-channel:nth-child(2n) { + background-color: #ccc; +} .light-cell-btn { margin: 2px; } diff --git a/templates/home.html b/templates/home.html index 0140224..b8f8e18 100644 --- a/templates/home.html +++ b/templates/home.html @@ -11,10 +11,11 @@ <script> $(document).ready(function() { var CHANNELS = 8; - var LIGHTS = 8; + var SUB_CHANNELS = 8; + var LOOP_LENGTH = 24; _.each(_.range(CHANNELS), function(i) { - var row = $(_.template($('#light-row-template').text(), {i: i, lights: LIGHTS})); + var row = $(_.template($('#light-row-template').text(), {i: i, subchannels: SUB_CHANNELS, cells: LOOP_LENGTH})); $('#light-container').append(row); }); }); @@ -26,9 +27,15 @@ <div id="light-container"></div> </div> <script type="text/template" class="template" id="light-row-template"> - <div class="light-row" data-light-row="<%= i %>"> - <% _.each(_.range(lights), function(j) { %> - <button type="button" class="btn btn-success light-cell-btn" data-toggle="button" data-light-cell="<%= j %>"> </button> + <div class="light-channel" data-light-channel="<%= i %>"> + <h3>Channel <%= i %></h3> + <% _.each(_.range(subchannels), function(j) { %> + <div class="light-row" data-light-row="<%= j %>"> + <span>Subchan <%= j %></span> + <% _.each(_.range(cells), function(k) { %> + <button type="button" class="btn btn-success light-cell-btn" data-toggle="button" data-light-cell="<%= k %>"> </button> + <% }); %> + </div> <% }); %> </div> </script> |