Lay out database component.

musician/templates/musician/databases.html

@@ -5,30 +5,48 @@
 
 <h1>{{ service.verbose_name }}</h1>
 <p>{{ service.description }}</p>
-<table class="table table-hover">
-  <thead class="thead-dark">
 
-    <tr>
-      {% for field_name in service.fields %}
-      <th scope="col">{{ field_name }}</th>
-      {% endfor %}
-    </tr>
-  </thead>
-  <tbody>
-    {% for resource in object_list %}
-    <tr>
-      <td>{{ resource.name }}</td>
-      <td>{{ resource.type }}</td>
-      <td>
+{% for database in object_list %}
+  <div class="card">
+    <div class="card-header row">
+      <div class="col-md-8">
+        <strong>{{ database.name }}</strong>
+      </div>
+      <div class="col-md">
+        Type: <strong>{{ database.type }}</strong>
+      </div>
+      <div class="col-md text-right">
+          associated to: <strong>{{ database.domain|default:"-" }}</strong>
+        <div class="card-collapse-button d-inline-block nav-item dropdown">
+          <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
+          </button>
+        </div>
+      </div>
+    </div><!-- /card-header-->
+    <div class="card-body row">
+      <div class="col-md-4">
+        <h4>Database users</h4>
+        <ul>
         {% for user in resource.users %}
-          {{ user.username }}
+          <li>{{ user.username }}</li>
         {% empty %}
-          No users for this database.
+          <li>No users for this database.</li>
         {% endfor %}
-      </td>
-    </tr>
+        </ul>
+      </div>
+      <div class="col-md-2 border-left border-right">
+          <h4>Database usage</h4>
+          <div class="progress">
+              <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
+          </div>
+      </div>
+      <div class="col-md-6 text-right">
+        <a class="btn btn-secondary" href="#open-phpmyadmin">Open database manager</a>
+      </div>
+    </div>
+  </div>
+
   {% endfor %}
-  </tbody>
+
   {% include "musician/components/table_paginator.html" %}
-</table>
 {% endblock %}