diff options
| -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> |