musician responsive tables to mobile

orchestra/contrib/musician/static/musician/css/default.css

@@ -157,7 +157,7 @@ h1.service-name {
 
 .table.service-list {
     margin-top: 2rem;
-    table-layout: fixed;
+    /* table-layout: fixed; */
 }
 
 /** TODO update theme instead of overriding **/

orchestra/contrib/musician/templates/musician/address_list.html

@@ -12,13 +12,14 @@
 
 
 <div class="tab-pane fade show active" id="addresses" role="tabpanel" aria-labelledby="addresses-tab">
+  <div class="table-responsive">
   <table class="table service-list">
-    <colgroup>
+    <!-- <colgroup>
       <col span="1" style="width: 25%;">
       <col span="1" style="width: 25%;">
       <col span="1" style="width: 25%;">
       <col span="1" style="width: 25%;">
-    </colgroup>
+    </colgroup> -->
     <thead class="thead-dark">
       <tr>
         <th scope="col">{% trans "Email" %}</th>
@@ -44,6 +45,7 @@
     </tbody>
     {% include "musician/components/table_paginator.html" %}
   </table>
+  </div>
   <a class="btn btn-primary mt-4 mb-4" href="{% url 'musician:address-create' %}">{% trans "New mail address" %}</a>
 
 </div>

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

@@ -8,13 +8,14 @@
 
 {% if object_list %}
 
+<div class="table-responsive">
 <table class="table service-list">
-  <colgroup>
+  <!-- <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>
+  </colgroup> -->
   <thead class="thead-dark">
     <tr>
       <th scope="col">{% trans "Name" %}</th>
@@ -45,6 +46,7 @@
   </tbody>
   {% include "musician/components/table_paginator.html" %}
 </table>
+</div>
 
 {% else  %}
 <div class="row">

orchestra/contrib/musician/templates/musician/mailbox_list.html

@@ -18,13 +18,13 @@
     </form>
   </div>
 
-
+<div class="table-responsive">
   <table class="table service-list">
-    <colgroup>
+    <!-- <colgroup>
       <col span="1" style="width: 25%;">
       <col span="1" style="width: 10%;">
       <col span="1" style="width: 65%;">
-    </colgroup>
+    </colgroup> -->
     <thead class="thead-dark">
       <tr>
         <th scope="col">{% trans "Name" %}</th>
@@ -56,6 +56,7 @@
     </tbody>
     {% include "musician/components/table_paginator.html" %}
   </table>
+</div>
   <a class="btn btn-primary mt-4 mb-4" href="{% url 'musician:mailbox-create' %}">{% trans "New mailbox" %}</a>
 
 </div>

orchestra/contrib/musician/templates/musician/mailinglist_list.html

@@ -9,15 +9,16 @@
 <h1 class="service-name">{{ service.verbose_name }}{% if active_domain %} <span class="font-weight-light">{% trans "for" %} {{ active_domain.name }}</span>{% endif %}</h1>
 <p class="service-description">{{ service.description }}</p>
 
+<div class="table-responsive">
 <table class="table service-list">
-    <colgroup>
+    <!-- <colgroup>
       <col span="1" style="width: 13%;">
       <col span="1" style="width: 12%;">
       <col span="1" style="width: 40%;">
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 10%;">
       <col span="1" style="width: 10%;">
-  </colgroup>
+  </colgroup> -->
   <thead class="thead-dark">
     <tr>
       <th scope="col">Name</th>
@@ -47,15 +48,16 @@
       <td>{{ resource.admin_email }}</td>
       <td><a href="{{ resource.get_absolute_url }}" target="_blank" rel="noopener noreferrer">Mailman <i class="fas fa-external-link-alt"></i></a></td>
       <td class="text-right">
-        <a class="btn btn-outline-warning" href="{% url 'musician:mailing-update' resource.id %}">
+        <a class="btn btn-outline-warning" role="button" href="{% url 'musician:mailing-update' resource.id %}">
           <i class="fas fa-tools"></i></a>
-        <a href="{% url 'musician:mailing-delete' resource.id %}">
+        <a class="btn btn-outline-danger" role="button" href="{% url 'musician:mailing-delete' resource.id %}">
-          <i class="ml-3 text-danger fas fa-trash"></i></a>
+          <i class="text-danger fas fa-trash"></i></a>
       </td>
     </tr>
     {% endfor %}
   </tbody>
 </table>
+</div>
 <a class="btn btn-primary mt-4 mb-4" href="{% url 'musician:mailing-create' %}">{% trans "New list" %}</a>
 
 {% endblock %}

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

@@ -6,13 +6,14 @@
 <h1 class="service-name">{{ service.verbose_name }}</h1>
 <p class="service-description">{{ service.description }}</p>
 
+<div class="table-responsive">
 <table class="table service-list">
-  <colgroup>
+  <!-- <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>
+  </colgroup> -->
   <thead class="thead-dark">
     <tr>
       <th scope="col">{% trans "Name" %}</th>
@@ -57,5 +58,5 @@
   </tbody>
   {% include "musician/components/table_paginator.html" %}
 </table>
-
+</div>
 {% endblock %}

orchestra/contrib/musician/templates/musician/systemuser_list.html

@@ -8,11 +8,11 @@
 
 
 <table class="table service-list">
-  <colgroup>
+  <!-- <colgroup>
     <col span="1" style="width: 15%;">
     <col span="1" style="width: 25%;">
     <col span="1" style="width: 60%;">
-  </colgroup>
+  </colgroup> -->
   <thead class="thead-dark">
     <tr>
       <th scope="col">{% trans "Username" %}</th>

orchestra/contrib/musician/templates/musician/webapps/webapp_list.html

@@ -10,6 +10,7 @@
   {{ description2 }}
 </p>
 
+<div class="table-responsive">
 <table class="table service-list">
   <colgroup>
     <col span="1" style="width: 19%;">
@@ -51,5 +52,5 @@
     {% endfor %}
   </tbody>
 </table>
-
+</div>
 {% endblock %}

orchestra/contrib/musician/templates/musician/webapps/webappuser_list.html

@@ -2,14 +2,14 @@
 {% load bootstrap4 i18n %}
 
 {% block tabcontent %}
-
+<div class="table-responsive">
 <table class="table service-list">
-  <colgroup>
+  <!-- <colgroup>
     <col span="1" style="width: 15%;">
     <col span="1" style="width: 25%;">
     <col span="1" style="width: 40%;">
     <col span="1" style="width: 20%;">
-  </colgroup>
+  </colgroup> -->
   <thead class="thead-dark">
     <tr>
       <th scope="col">{% trans "Username" %}</th>
@@ -25,12 +25,14 @@
       <td>/home/{{ webappuser.account }}/webapps/{{ webappuser.home }}</td>
       <td>{{ webappuser.target_server }}</td>
       <td>
+        <div class="d-flex justify-content-end">
           <a class="btn btn-outline-warning" href="{% url 'musician:webappuser-password' webappuser.id %}">
             <i class="fas fa-key"></i> {% trans "Update password" %}</a>
+        </div>
       </td>
     </tr>
     {% endfor %}
   </tbody>
 </table>
-
+</div>
 {% endblock %}

orchestra/contrib/musician/templates/musician/websites/website_list.html

@@ -6,6 +6,7 @@
   {{ description }}
 </p>
 
+<div class="table-responsive">
 <table class="table service-list table-hover">
   <colgroup>
     <col span="1" style="width: 15%;">
@@ -101,7 +102,7 @@
     {% endfor %}
   </tbody>
 </table>
-
+</div>
 
 
 {% endblock %}