Cosmetics: make database list more compact

orchestra/contrib/musician/templates/musician/database_list.html

@@ -6,49 +6,47 @@
 <h1 class="service-name">{{ service.verbose_name }}</h1>
 <p class="service-description">{{ service.description }}</p>
 
-{% for database in object_list %}
+{% if object_list %}
-  <div class="card service-card">
-    <div class="card-header">
-      <div class="row">
-        <div class="col-md-8">
-          <strong>{{ database.name }}</strong>
-        </div>
-        <div class="col-md">
-          {% trans "Type" %}: <strong>{{ database.type }}</strong>
-        </div>
-        <div class="col-md text-right">
-          {% comment "@slamora: orchestra doesn't provide this information [won't fix] See issue #3" %}
-            {% trans "associated to" %}: <strong>{{ database.domain|default:"-" }}</strong>
-          {% endcomment %}
-        </div>
-      </div>
-    </div><!-- /card-header-->
-    <div class="card-body row">
-      <div class="col-md-4">
-        <h4>Database users</h4>
-        <ul class="list-unstyled pl-2">
-        {% for user in database.users.all %}
-          {# TODO(@slamora) render in two columns #}
-          <li><span class="d-inline-block w-25">{{ user.username }}</span> <i class="fas fa-user-edit"></i></li>
-        {% empty %}
-          <li>{% trans "No users for this database." %}</li>
-        {% endfor %}
-        </ul>
-      </div>
-      <div class="col-md-3 border-left border-right">
-          <h4>Database usage</h4>
-          <p class="text-center"><i class="fas fa-database fa-3x"></i></p>
-          {% include "musician/components/usage_progress_bar.html" with detail=database.usage %}
-      </div>
-      <div class="col-md-5 text-right">
-        <div class="service-manager-link">
-          <a class="btn btn-primary" href="{{ database.manager_url }}" target="_blank" rel="noopener noreferrer">{% trans "Open database manager" %} <i class="fas fa-external-link-alt"></i></a>
-        </div>
-      </div>
-    </div>
-  </div>
 
-{% empty %}
+<table class="table service-list">
+  <colgroup>
+    <col span="1" style="width: 25%;">
+    <col span="1" style="width: 10%;">
+    <col span="1" style="width: 35%;">
+    <col span="1" style="width: 30%;">
+  </colgroup>
+  <thead class="thead-dark">
+    <tr>
+      <th scope="col">{% trans "Name" %}</th>
+      <th scope="col">{% trans "Type" %}</th>
+      <th scope="col">{% trans "Database users" %} <i class="fas fa-user-edit"></i></th>
+      <th scope="col">{% trans "Disk usage" %}</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for database in object_list %}
+    <tr>
+      <td><strong>{{ database.name }}</strong></td>
+      <td>
+        <span class="text-secondary">{{ database.type }}</span>
+        <a class="btn btn-sm btn-link" href="{{ database.manager_url }}" target="_blank" rel="noopener noreferrer" title="{% trans 'Open database manager' %}">
+          <i class="fas fa-external-link-alt"></i>
+          <span class="sr-only">{% trans "Open database manager" %}</span>
+        </a>
+      </td>
+      <td>{{ database.users.all|join:", " }}</td>
+      <td>
+        {% with detail=database.usage %}
+        {{ detail.used|floatformat }} {{ detail.unit }}
+        {% endwith %}
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
+  {% include "musician/components/table_paginator.html" %}
+</table>
+
+{% else  %}
 <div class="row">
   <div class="col-md-4">
     <div class="card service-card shadow p-3 mb-5 bg-white rounded">
@@ -60,9 +58,6 @@
     </div>
   </div>
 </div>
-{% endfor %}
+{% endif %}
 
-  {% if object_list|length > 0 %}
-  {% include "musician/components/paginator.html" %}
-  {% endif %}
 {% endblock %}