ui: Adopt a consistent and new table style

Rows in bootstrap 4 tables are taller by default. This is better suited for mobile layouts and look prettier on desktops too. Adopting this approach instead of condensed tables eliminates the need for striping, bordering and narrower tables. Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org> Reviewed-by: Veiko Aasa <veiko17@disroot.org>
2026-01-28 08:03:36 +00:00 · 2020-12-05 11:50:58 -08:00 · 2020-12-05 11:50:58 -08:00 · fef8da230f
commit fef8da230f
parent 00bc55f762
26 changed files with 60 additions and 72 deletions
--- a/plinth/modules/backups/templates/backups_delete.html
+++ b/plinth/modules/backups/templates/backups_delete.html
@ -11,22 +11,18 @@

  <p>{% trans "Delete this archive permanently?" %}</p>

-  <div class="row">
-    <div class="col-xl-12">
-      <table class="table table-bordered table-sm table-striped">
-        <thead>
-          <th>{% trans "Name" %}</th>
-          <th>{% trans "Time" %}</th>
-        </thead>
-        <tbody>
-          <tr>
-            <td>{{ archive.name }}</td>
-            <td>{{ archive.time }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <table class="table">
+    <thead>
+      <th>{% trans "Name" %}</th>
+      <th>{% trans "Time" %}</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{ archive.name }}</td>
+        <td>{{ archive.time }}</td>
+      </tr>
+    </tbody>
+  </table>

  <p>
    <form class="form" method="post">
--- a/plinth/modules/backups/templates/backups_repository.html
+++ b/plinth/modules/backups/templates/backups_repository.html
@ -4,8 +4,7 @@

 {% load i18n %}

-<table class="table table-bordered table-condensed table-striped"
-       id="archives-list">
+<table class="table" id="archives-list">
  <thead class="collapsible-button" data-toggle="collapse" data-target="#{{ uuid }}">
    <tr>
      <th colspan="2">
--- a/plinth/modules/bepasty/templates/bepasty.html
+++ b/plinth/modules/bepasty/templates/bepasty.html
@ -22,8 +22,7 @@
  {% if not passwords %}
    <p>{% trans 'No passwords currently configured.' %}</p>
  {% else %}
-    <table class="table table-bordered table-condensed table-striped"
-           id="passwords-list">
+    <table class="table" id="passwords-list">
      <thead>
        <tr>
          <th>{% trans "Password" %}</th>
--- a/plinth/modules/bind/templates/bind.html
+++ b/plinth/modules/bind/templates/bind.html
@ -10,7 +10,7 @@

  <h3>{% trans "Serving Domains" %}</h3>

-  <table class="table table-bordered table-condensed table-striped">
+  <table class="table">
    <thead>
      <tr>
        <th>{% trans "Type" %}</th>
--- a/plinth/modules/diagnostics/templates/diagnostics_results.html
+++ b/plinth/modules/diagnostics/templates/diagnostics_results.html
@ -4,7 +4,7 @@

 {% load i18n %}

-<table class="table table-bordered table-striped diagnostics-results">
+<table class="table diagnostics-results">
  <thead>
    <tr>
      <th class="diagnostic-test">{% trans "Test" %}</th>
--- a/plinth/modules/letsencrypt/templates/letsencrypt.html
+++ b/plinth/modules/letsencrypt/templates/letsencrypt.html
@ -23,7 +23,7 @@
  <h3>{% trans "Status" %}</h3>

  {% if status.domains %}
-    <table class="table table-bordered table-sm table-striped">
+    <table class="table">
      <thead>
        <tr>
          <th>{% trans "Domain" %}</th>
--- a/plinth/modules/minetest/templates/minetest.html
+++ b/plinth/modules/minetest/templates/minetest.html
@ -10,27 +10,23 @@
  {{ block.super }}

  {% if domains %}
-    <div class="row">
-      <div class="col-md-6">
-        <table class="table table-bordered table-sm table-striped">
-          <thead>
-            <tr>
-              <th>{% trans "Address" %}</th>
-              <th>{% trans "Port" %}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for domain in domains %}
-              <tr>
-                <td>
-                  {{ domain }}
-                </td>
-                <td>{{ 30000 }}</td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <table class="table">
+      <thead>
+        <tr>
+          <th>{% trans "Address" %}</th>
+          <th>{% trans "Port" %}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for domain in domains %}
+          <tr>
+            <td>
+              {{ domain }}
+            </td>
+            <td>{{ 30000 }}</td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
  {% endif %}
 {% endblock %}
--- a/plinth/modules/monkeysphere/templates/monkeysphere.html
+++ b/plinth/modules/monkeysphere/templates/monkeysphere.html
@ -48,7 +48,7 @@
    </p>
  {% endif %}

-  <table class="table table-striped">
+  <table class="table">
    <thead>
      <tr>
        <th>{% trans "Service" %}</th>
--- a/plinth/modules/monkeysphere/templates/monkeysphere_details.html
+++ b/plinth/modules/monkeysphere/templates/monkeysphere_details.html
@ -10,7 +10,7 @@

  <h2>{% trans "Monkeysphere" %}</h2>

-  <table class="table table-bordered table-sm table-striped">
+  <table class="table">
    <tbody>
      <tr>
        <td>{% trans "OpenPGP Fingerprint" %}</td>
--- a/plinth/modules/names/templates/names.html
+++ b/plinth/modules/names/templates/names.html
@ -8,7 +8,7 @@

 {% block configuration %}

-  <table class="table table-bordered table-sm table-striped names-table">
+  <table class="table names-table">
    <thead>
      <tr>
        <th>{% trans "Type" %}</th>
--- a/plinth/modules/samba/templates/samba.html
+++ b/plinth/modules/samba/templates/samba.html
@ -69,7 +69,7 @@
          {% csrf_token %}
          <input type="hidden" name="filesystem_type"
                 value="{{ disk.filesystem_type }}">
-          <table class="table table-condensed"
+          <table class="table"
                 aria-describedby="{{ disk.name }}">
            <thead>
              <tr>
@ -143,7 +143,7 @@
          is plugged back in, sharing will be automatically enabled.
        {% endblocktrans %}
      </p>
-      <table class="table table-bordered table-condensed table-striped">
+      <table class="table">
        <thead>
          <tr>
            <th>{% trans "Share name" %}</th>
--- a/plinth/modules/security/templates/security_report.html
+++ b/plinth/modules/security/templates/security_report.html
@ -34,7 +34,7 @@
      running.
    {% endblocktrans %}
  </p>
-  <table class="table table-bordered table-condensed table-striped">
+  <table class="table">
    <thead>
      <tr>
        <th>{% trans "App Name" %}</th>
--- a/plinth/modules/sharing/templates/sharing.html
+++ b/plinth/modules/sharing/templates/sharing.html
@ -31,7 +31,7 @@
  {% if not shares %}
    <p>{% trans 'No shares currently configured.' %}</p>
  {% else %}
-    <table class="table table-bordered table-sm table-striped" id="shares-list">
+    <table class="table" id="shares-list">
      <thead>
        <tr>
          <th>{% trans "Name" %}</th>
--- a/plinth/modules/snapshot/templates/snapshot_delete_selected.html
+++ b/plinth/modules/snapshot/templates/snapshot_delete_selected.html
@ -11,7 +11,7 @@

  <p>{% trans "Delete the following snapshots permanently?" %}</p>

-  <table class="table table-bordered table-sm table-striped">
+  <table class="table">
    <thead>
      <th>{% trans "Number" %}</th>
      <th>{% trans "Date" %}</th>
--- a/plinth/modules/snapshot/templates/snapshot_manage.html
+++ b/plinth/modules/snapshot/templates/snapshot_manage.html
@ -21,7 +21,7 @@
               {{ has_deletable_snapshots|yesno:',disabled="disabled"' }}/>
      </div>

-      <table class="table table-bordered table-sm table-striped">
+      <table class="table">
        <thead>
          <th>{% trans "Number" %}</th>
          <th>{% trans "Date" %}</th>
--- a/plinth/modules/snapshot/templates/snapshot_rollback.html
+++ b/plinth/modules/snapshot/templates/snapshot_rollback.html
@ -19,7 +19,7 @@
    {% endblocktrans %}
  </p>

-  <table class="table table-bordered table-sm table-striped">
+  <table class="table">
    <thead>
      <th>{% trans "Number" %}</th>
      <th>{% trans "Date" %}</th>
--- a/plinth/modules/ssh/templates/ssh.html
+++ b/plinth/modules/ssh/templates/ssh.html
@ -17,7 +17,7 @@
    {% endblocktrans %}
  </p>

-  <table class="table table-bordered table-condensed table-striped">
+  <table class="table">
    <thead>
      <tr>
        <th>{% trans "Algorithm" %}</th>
--- a/plinth/modules/storage/templates/storage.html
+++ b/plinth/modules/storage/templates/storage.html
@ -19,7 +19,7 @@

  <p>{% trans "The following storage devices are in use:" %}</p>

-  <table class="table table-bordered table-sm table-striped">
+  <table class="table">
    <thead>
      <tr>
        <th>{% trans "Device" %}</th>
--- a/plinth/modules/tahoe/templates/tahoe-post-setup.html
+++ b/plinth/modules/tahoe/templates/tahoe-post-setup.html
@ -27,7 +27,7 @@
  {{ block.super }}

  <h4>{% trans "Local introducer" %}</h4>
-  <table class="table table-bordered local-introducers">
+  <table class="table local-introducers">
    <thead>
      <tr>
        <th>{% trans "Pet Name" %}</th>
@ -60,7 +60,7 @@
  <br/>

  <h4>{% trans "Connected introducers" %}</h4>
-  <table class="table table-bordered connected-introducers">
+  <table class="table connected-introducers">
    <thead>
      <tr>
        <th>{% trans "Pet Name" %}</th>
--- a/plinth/modules/tor/templates/tor.html
+++ b/plinth/modules/tor/templates/tor.html
@ -19,7 +19,7 @@
    {{ block.super }}

    {% if status.hs_enabled %}
-      <table class="table table-bordered table-sm table-striped tor-hs">
+      <table class="table tor-hs">
        <thead>
          <tr>
            <th>{% trans "Onion Service" %}</th>
@ -64,7 +64,7 @@
      </p>
      <div class="row">
        <div class="col-md-6">
-          <table class="table table-bordered table-sm table-striped tor-relay-ports">
+          <table class="table tor-relay-ports">
            <thead>
              <tr>
                <th>{% trans "Service" %}</th>
--- a/plinth/modules/wireguard/templates/wireguard.html
+++ b/plinth/modules/wireguard/templates/wireguard.html
@ -11,8 +11,7 @@

  <p>{% trans "Peers allowed to connect to this server:" %}</p>

-  <table class="table table-bordered table-condensed table-striped"
-         id="server-peers-list">
+  <table class="table" id="server-peers-list">
    <tr>
      <th>{% trans "Public Key" %}</th>
      <th>{% trans "Allowed IPs" %}</th>
@ -67,8 +66,7 @@
    Servers that {{ box_name }} will connect to:
    {% endblocktrans %}
  </p>
-  <table class="table table-bordered table-condensed table-striped"
-         id="client-peers-list">
+  <table class="table" id="client-peers-list">
    <tr>
      <th>{% trans "Endpoint" %}</th>
      <th>{% trans "Public Key" %}</th>
--- a/plinth/modules/wireguard/templates/wireguard_delete_server.html
+++ b/plinth/modules/wireguard/templates/wireguard_delete_server.html
@ -13,7 +13,7 @@
  <p>
    {% trans "Are you sure that you want to delete this server?" %}
  </p>
-  <table class="table table-bordered table-condensed table striped">
+  <table class="table">
    <tbody>
      <tr>
        <th>{% trans "Endpoint" %}</th>
--- a/plinth/modules/wireguard/templates/wireguard_show_client.html
+++ b/plinth/modules/wireguard/templates/wireguard_show_client.html
@ -14,7 +14,7 @@
      client is configured with the following information.
    {% endblocktrans %}
  </p>
-  <table class="table table-bordered table-condensed table-striped">
+  <table class="table">
    <tbody>
      <tr>
        <th>{% trans "Client public key:" %}</th>
@ -44,7 +44,7 @@
  </table>

  <h3>{% trans "Status" %}</h3>
-  <table class="table table-bordered table-condensed table-striped">
+  <table class="table">
    <tbody>
      <tr>
        <th>{% trans "Data transmitted:" %}</th>
--- a/plinth/modules/wireguard/templates/wireguard_show_server.html
+++ b/plinth/modules/wireguard/templates/wireguard_show_server.html
@ -17,7 +17,7 @@
          {{ box_name }}'s public key and IP address.
        {% endblocktrans %}
      </p>
-      <table class="table table-bordered table-condensed table-striped">
+      <table class="table">
        <tbody>
          <tr>
            <th>{% trans "Server endpoint:" %}</th>
@ -43,7 +43,7 @@
      </table>

      <h3>{% trans "Status" %}</h3>
-      <table class="table table-bordered table-condensed table-striped">
+      <table class="table">
        <tbody>
          <tr>
            <th>{% trans "Data transmitted:" %}</th>
--- a/plinth/templates/clients.html
+++ b/plinth/templates/clients.html
@ -8,7 +8,7 @@

 {% if clients  %}
  <div id="clients" class="collapse">
-    <table class="table table-striped">
+    <table class="table">

      {% with clients|clients_of_type:'web' as web_clients %}
        {% for client in web_clients %}
--- a/plinth/templates/port-forwarding-info.html
+++ b/plinth/templates/port-forwarding-info.html
@ -30,7 +30,7 @@
        {{ service_name }}:
      {% endblocktrans %}

-      <table class="table table-condensed">
+      <table class="table">
        <thead>
          <tr>
            <th>{% trans "Protocol" %}</th>