networks: Ability to enable/disable without JS

- Avoid using a drop down menu.

- Separate out the status indicator and activate/deactivate button.

- Closes #173.

plinth/modules/networks/templates/connections_list.html

@@ -22,6 +22,14 @@
 
 {% block page_head %}
   <style type="text/css">
+    .connection-status-label {
+        display: inline-block;
+        width: 5.5em;
+        padding: 5px 0px;
+        text-align: center;
+        margin-right: 10px;
+    }
+
     .connection-show-label {
         display: inline-block;
         width: 40%;
@@ -29,17 +37,18 @@
 
     .connection-type-label {
         display: inline-block;
-        width: 20%;
     }
 
     .list-group-item .btn {
-        margin: -5px 0;
+        margin: -2px 0;
     }
 
-    .dropdown-menu .btn {
+    .form.pull-right {
-        background: none;
+        margin-right: 20px;
-        width: 100%;
+    }
-        text-align: left;
+
+    .form button {
+        width: 7em;
     }
   </style>
 {% endblock %}
@@ -58,6 +67,32 @@
                     aria-hidden="true"></span>
             </a>
 
+            {% if connection.is_active %}
+              <form class="form pull-right" method="post"
+                    action="{% url 'networks:deactivate' connection.uuid %}">
+                {% csrf_token %}
+
+                <button type="submit" class="btn btn-default btn-sm">
+                  Deactivate</button>
+              </form>
+            {% else %}
+              <form class="form pull-right" method="post"
+                    action="{% url 'networks:activate' connection.uuid %}">
+                {% csrf_token %}
+
+                <button type="submit" class="btn btn-default btn-sm">
+                    Activate</button>
+              </form>
+            {% endif %}
+
+            {% if connection.is_active %}
+              <span class="label label-success connection-status-label">
+                Active</span>
+            {% else %}
+              <span class="label label-warning connection-status-label">
+                Inactive</span>
+            {% endif %}
+
             <a class="connection-show-label"
                href="{% url 'networks:show' connection.uuid %}"
                title="Show connection {{ connection.name }}">
@@ -65,45 +100,6 @@
             </a>
 
             <span class="connection-type-label">{{ connection.type }}</span>
-
-            {% if connection.is_active %}
-              <div class="btn-group">
-                <button type="button"
-                        class="btn btn-success btn-xs dropdown-toggle"
-                        data-toggle="dropdown" aria-expanded="false">
-                  Active <span class="caret"></span>
-                </button>
-                <ul class="dropdown-menu" role="menu">
-                  <li>
-                    <form name="toggle_form" id="toggle_form" class="form" method="post"
-                          action="{% url 'networks:deactivate' connection.uuid %}">
-                      {% csrf_token %}
-
-                      <button type="submit" class="btn">Deactivate</button>
-                    </form>
-                  </li>
-                </ul>
-              </div>
-            {% else %}
-              <div class="btn-group">
-                <button type="button"
-                        class="btn btn-warning btn-xs dropdown-toggle"
-                        data-toggle="dropdown" aria-expanded="false">
-                  Not Active <span class="caret"></span>
-                </button>
-                <ul class="dropdown-menu" role="menu">
-                  <li>
-                    <form name="toggle_form" id="toggle_form" class="form" method="post"
-                          action="{% url 'networks:activate' connection.uuid %}">
-                      {% csrf_token %}
-
-                      <button type="submit" class="btn">Activate</button>
-                    </form>
-                  </li>
-                </ul>
-              </div>
-            {% endif %}
-
           </div>
         {% endfor %}
       </div>