From aea944a73215470e7c5a7913b8ba2279abe68923 Mon Sep 17 00:00:00 2001
From: Santiago Lamora <santiago@ribaguifi.com>
Date: Tue, 30 Jan 2024 12:51:28 +0100
Subject: [PATCH] Cosmetics: make SaaS list more compact

---
 .../templates/musician/saas_list.html         | 88 +++++++++----------
 1 file changed, 43 insertions(+), 45 deletions(-)

diff --git a/orchestra/contrib/musician/templates/musician/saas_list.html b/orchestra/contrib/musician/templates/musician/saas_list.html
index 4da034f8..d38b49bd 100644
--- a/orchestra/contrib/musician/templates/musician/saas_list.html
+++ b/orchestra/contrib/musician/templates/musician/saas_list.html
@@ -6,51 +6,49 @@
 <h1 class="service-name">{{ service.verbose_name }}</h1>
 <p class="service-description">{{ service.description }}</p>
 
-{% for saas in object_list %}
-  <div class="card service-card">
-    <div class="card-header">
-      <div class="row">
-        <div class="col-md-8">
-          <strong>{{ saas.name }}</strong>
-        </div>
-        {% comment "Hidden until API provides this information" %}
-        <div class="col-md text-right">
-            {% trans "Installed on" %}: <strong>{{ saas.domain|default:"-" }}</strong>
-        </div>
-        {% endcomment %}
-      </div>
-    </div><!-- /card-header-->
-    <div class="card-body row">
-        <div class="col-md-4">
-          <h4>{{ saas.service|capfirst }}</h4>
-          <p class="text-center service-brand"><i class="fab fa-{{ saas.service }} fa-10x"></i></p>
-        </div>
-        <div class="col-md-3 border-left border-right">
-            <h4 class="mb-3">{% trans "Service info" %}</h4>
-            <label class="w-25">{% trans "active" %}:</label> <strong>{{ saas.is_active|yesno }}</strong><br/>
-            {% for key, value in saas.data.items %}
-            <label class="w-25">{{ key }}:</label> <strong>{{ value }}</strong><br/>
-            {% endfor %}
-        </div>
-        <div class="col-md-5 text-right">
-          <div class="service-manager-link">
-            <a class="btn btn-primary" href="{{ saas.manager_url }}" target="_blank" rel="noopener noreferrer">{% trans "Open service admin panel" %} <i class="fas fa-external-link-alt"></i></a>
-          </div>
-        </div>
-      </div>
-    </div>
+<table class="table service-list">
+  <thead class="thead-dark">
+    <tr>
+      <th scope="col">{% trans "Name" %}</th>
+      <th scope="col">{% trans "Is active?" %}</th>
+      <th scope="col">{% trans "Service" %}</th>
+      <th scope="col">{% trans "Service info" %}</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for saas in object_list %}
+    <tr>
+      <td>
+        <strong>{{ saas.name }}</strong><br>
+        <span class="text-secondary">{% trans "Installed on" %}: <strong>{{ saas.get_site_domain|default:"-" }}</strong></span>
+      </td>
+      <td class="text-{{saas.is_active|yesno:'success,danger'}}">
+        <i class="fa fa-{{ saas.is_active|yesno:'check,times' }}"></i>
+        <span class="sr-only">{{ saas.is_active|yesno }}</span>
+      </td>
+      <td>
+        <a class="btn btn-sm btn-link" href="{{ saas.manager_url }}" target="_blank" rel="noopener noreferrer" title="{% trans 'Open service admin panel' %}">
+          <i class="fab fa-{{ saas.service }}"></i> {{ saas.service|capfirst }}
+          <span class="sr-only">{% trans "Open service admin panel" %}</span> <i class="fas fa-external-link-alt"></i></a>
+      </td>
+      <td>
+        {% for key, value in saas.data.items %}
+          <label>{{ key }}:</label> <strong>{{ value }}</strong><br/>
+        {% endfor %}
+      </td>
+    </tr>
     {% 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-fire fa-5x"></i></p>
-            {# Translators: saas page when there isn't any saas. #}
-            <h5 class="card-title text-dark">{% trans "Ooops! Looks like there is nothing here!" %}</h5>
-          </div>
-        </div>
-      </div>
-    </div>
-{% endfor %}
+    <tr>
+      <td colspan="4">
+        <h5 class="text-dark">
+          <i class="fas fa-fire fa-2x mr-2"></i>
+          {# Translators: saas page when there isn't any saas. #}
+          {% trans "Ooops! Looks like there is nothing here!" %}
+        </h5>
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
 
 {% endblock %}