orchestra/contrib/musician/locale/ca/LC_MESSAGES/django.po

@@ -216,7 +216,7 @@ msgstr "Número"
 msgid "Bill date"
 msgstr "Data de la factura"
 
-#: templates/musician/billing.html:21 templates/musician/database_list.html:17
+#: templates/musician/billing.html:21 templates/musician/databases.html:17
 #: templates/musician/domain_detail.html:17
 msgid "Type"
 msgstr "Tipus"
@@ -336,21 +336,21 @@ msgstr "Tipus:"
 msgid "View DNS records"
 msgstr "Veure registres DNS"
 
-#: templates/musician/database_list.html:21
+#: templates/musician/databases.html:21
 msgid "associated to"
 msgstr "associada a"
 
-#: templates/musician/database_list.html:34
+#: templates/musician/databases.html:34
 msgid "No users for this database."
 msgstr "No hi ha persones usuàries d’aquesta base de dades."
 
-#: templates/musician/database_list.html:45
+#: templates/musician/databases.html:45
 msgid "Open database manager"
 msgstr "Obre el gestor de bases de dades"
 
 #. Translators: database page when there isn't any database.
 #. Translators: saas page when there isn't any saas.
-#: templates/musician/database_list.html:58 templates/musician/saas_list.html:49
+#: templates/musician/databases.html:58 templates/musician/saas_list.html:49
 msgid "Ooops! Looks like there is nothing here!"
 msgstr "Mmmh, sembla que aquí no hi ha res!"
 

orchestra/contrib/musician/locale/es/LC_MESSAGES/django.po

@@ -218,7 +218,7 @@ msgstr "Número"
 msgid "Bill date"
 msgstr "Fecha de la factura"
 
-#: templates/musician/billing.html:21 templates/musician/database_list.html:17
+#: templates/musician/billing.html:21 templates/musician/databases.html:17
 #: templates/musician/domain_detail.html:17
 msgid "Type"
 msgstr "Tipo"
@@ -338,21 +338,21 @@ msgstr "Tipo:"
 msgid "View DNS records"
 msgstr "Ver registros DNS"
 
-#: templates/musician/database_list.html:21
+#: templates/musician/databases.html:21
 msgid "associated to"
 msgstr "asociada a"
 
-#: templates/musician/database_list.html:34
+#: templates/musician/databases.html:34
 msgid "No users for this database."
 msgstr "No hay usuarias/os de esta base de datos."
 
-#: templates/musician/database_list.html:45
+#: templates/musician/databases.html:45
 msgid "Open database manager"
 msgstr "Abre el gestor de bases de datos"
 
 #. Translators: database page when there isn't any database.
 #. Translators: saas page when there isn't any saas.
-#: templates/musician/database_list.html:58 templates/musician/saas_list.html:49
+#: templates/musician/databases.html:58 templates/musician/saas_list.html:49
 msgid "Ooops! Looks like there is nothing here!"
 msgstr "Mmmh… ¡parece que aquí no hay nada!"
 

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

@@ -1,63 +0,0 @@
-{% extends "musician/base.html" %}
-{% load i18n %}
-
-{% block content %}
-
-<h1 class="service-name">{{ service.verbose_name }}</h1>
-<p class="service-description">{{ service.description }}</p>
-
-{% if object_list %}
-
-<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">
-      <div class="card-body text-center">
-        <p class="mb-4"><i class="fas fa-database fa-5x"></i></p>
-        {# Translators: database page when there isn't any database. #}
-        <h5 class="card-title text-dark">{% trans "Ooops! Looks like there is nothing here!" %}</h5>
-      </div>
-    </div>
-  </div>
-</div>
-{% endif %}
-
-{% endblock %}

orchestra/contrib/musician/templates/musician/databases.html

@@ -0,0 +1,68 @@
+{% extends "musician/base.html" %}
+{% load i18n %}
+
+{% block content %}
+
+<h1 class="service-name">{{ service.verbose_name }}</h1>
+<p class="service-description">{{ service.description }}</p>
+
+{% for database in 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 %}
+<div class="row">
+  <div class="col-md-4">
+    <div class="card service-card shadow p-3 mb-5 bg-white rounded">
+      <div class="card-body text-center">
+        <p class="mb-4"><i class="fas fa-database fa-5x"></i></p>
+        {# Translators: database page when there isn't any database. #}
+        <h5 class="card-title text-dark">{% trans "Ooops! Looks like there is nothing here!" %}</h5>
+      </div>
+    </div>
+  </div>
+</div>
+{% endfor %}
+
+  {% if object_list|length > 0 %}
+  {% include "musician/components/paginator.html" %}
+  {% endif %}
+{% endblock %}

orchestra/contrib/musician/templates/musician/saas_list.html

@@ -7,12 +7,6 @@
 <p class="service-description">{{ service.description }}</p>
 
 <table class="table service-list">
-  <colgroup>
-    <col span="1" style="width: 35%;">
-    <col span="1" style="width: 10%;">
-    <col span="1" style="width: 25%;">
-    <col span="1" style="width: 30%;">
-  </colgroup>
   <thead class="thead-dark">
     <tr>
       <th scope="col">{% trans "Name" %}</th>
@@ -55,7 +49,6 @@
     </tr>
     {% endfor %}
   </tbody>
-  {% include "musician/components/table_paginator.html" %}
 </table>
 
 {% endblock %}

orchestra/contrib/musician/views.py

@@ -454,7 +454,7 @@ class MailboxChangePasswordView(CustomContextMixin, UserTokenRequiredMixin, Upda
 
 
 class DatabasesView(ServiceListView):
-    template_name = "musician/database_list.html"
+    template_name = "musician/databases.html"
     model = Database
     service_class = DatabaseService
     extra_context = {