Twitter Bootstrap

To keep our website looking professional, we needed to change the list of lights in a given house to look more modern. We were sure that we wanted to use Twitter Bootstrap for this, but we weren't sure the best component to use. I perused the documentation for a while, and attempted to use stacked nav tabs to accomplish the effect. Alas, my attempt was in vain. The day seemed bleak and the sky dark. I handed in my resignation and Zach decided to take up the cause. It wasn't long before Zach found the "list-group" and "list-group-item" class. This seemed to work perfectly for our project, and made our website look much more professional. Here is the example of what our light view looks like now and the code that produced it.

{% if house_list %}

  <form action="{% url 'management:submitChange' %}" method="post" >

  {% csrf_token %}

  {% for house in house_list %}

    <!-- <h3> {{ house.description }} </h3> -->

    <ul class ="list-group">

    {% for room in house.get_rooms %}

          <li class="list-group-item"><h3 style="margin-top: 0px">{{ room.description }}:

                    {{ room.getNumberOfLights }} lights</h3></li>

      <ul class="list-group">

            {% for light in room.get_lights %}

          <li class="list-group-item">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" 

name="light" value="{{light.id}}"

                        {% if light.is_on %} checked {% endif %}>

                        {{ light.description }}</li>

        {% endfor %}

      </ul>

    {% endfor %}

    </ul>

  {% endfor %}

  <div class="form-actions">

    <button type="submit" class="btn btn-primary"> Save</button>

    <button class="btn" type="button" value="Cancel">Cancel</a>

    <!-- <input type="submit" value="Save"/><input type="button" value="Cancel"/> -->

  </div>

    </form> 

{% else %}

  <p>No lights are installed.</p>

{% endif %}

In the future, we hope to get rid of the check boxes in favor of buttons, which will require altering the method currently in place for communicating changes to the database.