networks: Use table for styling network connection list

- Split CSS into a separate file.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/modules/networks/static/networks.css

@@ -0,0 +1,65 @@
+/*
+# SPDX-License-Identifier: AGPL-3.0-or-later
+*/
+
+.connection-status-cell {
+    width: 4.125rem;
+}
+
+.connection-status-label {
+    width: 4.125rem;
+    padding: 0.3125rem 0;
+    text-align: center;
+    margin-right: 0.625rem;
+}
+
+.connection-actions {
+    width: 10rem;
+}
+
+.form-action {
+    display: inline;
+}
+
+.form-action button {
+    min-width: 6.25rem;
+}
+
+
+/* Connection diagram */
+.connection-diagram {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+}
+
+.col-image {
+    display: block;
+    width: 100%;
+}
+
+.network-entity {
+    max-width: 8rem;
+}
+
+.network-type-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.network-connection {
+    height: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.network-connection-vertical {
+    width: 0.5rem;
+    margin-left: 3.75rem;
+}
+
+.connection-list {
+    margin-left: 1.5rem;
+}
+
+.connection-list-heading {
+    font-weight: bold;
+}

plinth/modules/networks/templates/connections_diagram.html

@@ -5,45 +5,6 @@
 {% load static %}
 {% load i18n %}
 
-<style type="text/css">
-  .connection-diagram {
-      margin-top: 2rem;
-      margin-bottom: 2rem;
-  }
-
-  .col-image {
-      display: block;
-      width: 100%;
-  }
-
-  .network-entity {
-      max-width: 8rem;
-  }
-
-  .network-type-icon {
-      width: 1.5rem;
-      height: 1.5rem;
-  }
-
-  .network-connection {
-      height: 0.5rem;
-      margin-bottom: 0.75rem;
-  }
-
-  .network-connection-vertical {
-      width: 0.5rem;
-      margin-left: 3.75rem;
-  }
-
-  .connection-list {
-      margin-left: 1.5rem;
-  }
-
-  .connection-list-heading {
-      font-weight: bold;
-  }
-</style>
-
 <div class="row connection-diagram">
   <div class="col-md-2">
     <img src="{% static 'theme/img/network-internet.svg' %}"

plinth/modules/networks/templates/connections_list.html

@@ -20,51 +20,65 @@
     </a>
   </div>
 
-  <div class="list-group">
+  <div class="table-responsive">
-    {% for connection in connections %}
+    <table class="table">
-      <div class="list-group-item clearfix">
+      <tbody>
-        <a href="{% url 'networks:delete' connection.uuid %}"
+        {% for connection in connections %}
-           class="btn btn-default btn-sm pull-right"
+          <tr>
-           role="button"
+            <td class="connection-status-cell">
-           title="{% blocktrans with name=connection.name %}Delete connection {{ name }}{% endblocktrans %}">
+              {% if connection.is_active %}
-          <span class="fa fa-trash-o"
+                <span class="badge badge-success connection-status-label">
-                aria-hidden="true"></span>
+                  {% trans "Active" %}
-        </a>
+                </span>
+              {% else %}
+                <span class="badge badge-warning connection-status-label">
+                  {% trans "Inactive" %}
+                </span>
+              {% endif %}
+            </td>
 
-        {% if connection.is_active %}
+            <td>
-          <form class="form form-action pull-right" method="post"
+              <a class="connection-show-label"
-                action="{% url 'networks:deactivate' connection.uuid %}">
+                 href="{% url 'networks:show' connection.uuid %}"
-            {% csrf_token %}
+                 title="{% blocktrans with name=connection.name %}Show connection {{ name }}{% endblocktrans %}">
+                {{ connection.name }}
+              </a>
+            </td>
 
-            <button type="submit" class="btn btn-default btn-sm">
+            <td>
-              {% trans "Deactivate" %}</button>
+              <span class="connection-type-label">
-          </form>
+                {{ connection.type_name }}
-        {% else %}
+              </span>
-          <form class="form form-action pull-right" method="post"
+            </td>
-                action="{% url 'networks:activate' connection.uuid %}">
-            {% csrf_token %}
 
-            <button type="submit" class="btn btn-default btn-sm">
+            <td class="connection-actions">
-              {% trans "Activate" %}</button>
+              {% if connection.is_active %}
-          </form>
+                <form class="form form-action" method="post"
-        {% endif %}
+                      action="{% url 'networks:deactivate' connection.uuid %}">
+                  {% csrf_token %}
+                  <button type="submit" class="btn btn-default btn-sm">
+                    {% trans "Deactivate" %}</button>
+                </form>
+              {% else %}
+                <form class="form form-action" method="post"
+                      action="{% url 'networks:activate' connection.uuid %}">
+                  {% csrf_token %}
+                  <button type="submit" class="btn btn-default btn-sm">
+                    {% trans "Activate" %}</button>
+                </form>
+              {% endif %}
 
-        {% if connection.is_active %}
+              <a href="{% url 'networks:delete' connection.uuid %}"
-          <span class="badge badge-success connection-status-label">
+                 class="btn btn-default btn-sm"
-            {% trans "Active" %}</span>
+                 role="button"
-        {% else %}
+                 title="{% blocktrans with name=connection.name %}Delete connection {{ name }}{% endblocktrans %}">
-          <span class="badge badge-warning connection-status-label">
+                <span class="fa fa-trash-o"
-            {% trans "Inactive" %}</span>
+                      aria-hidden="true"></span>
-        {% endif %}
+              </a>
-
+            </td>
-        <a class="connection-show-label"
+          </tr>
-           href="{% url 'networks:show' connection.uuid %}"
+        {% endfor %}
-           title="{% blocktrans with name=connection.name %}Show connection {{ name }}{% endblocktrans %}">
+      </tbody>
-          {{ connection.name }}
+    </table>
-        </a>
-
-        <span class="connection-type-label">{{ connection.type_name }}</span>
-      </div>
-    {% endfor %}
   </div>
   {% include "connections_diagram.html" %}

plinth/modules/networks/templates/networks_configuration.html

@@ -3,40 +3,13 @@
 # SPDX-License-Identifier: AGPL-3.0-or-later
 {% endcomment %}
 
+{% load static %}
 {% load bootstrap %}
 {% load i18n %}
 
 {% block page_head %}
-  <style type="text/css">
+  <link type="text/css" rel="stylesheet"
-    .connection-status-label {
+        href="{% static 'networks/networks.css' %}"/>
-        display: inline-block;
-        width: 4.125rem;
-        padding: 0.3125rem 0;
-        text-align: center;
-        margin-right: 0.625rem;
-    }
-
-    .connection-show-label {
-        display: inline-block;
-        width: 40%;
-    }
-
-    .connection-type-label {
-        display: inline-block;
-    }
-
-    .list-group-item .btn {
-        margin: -0.125rem 0;
-    }
-
-    .form-action.pull-right {
-        margin-right: 1.25rem;
-    }
-
-    .form-action button {
-        min-width: 6.125rem;
-    }
-  </style>
 {% endblock %}
 
 {% block configuration %}