musician responsive tables to mobile

This commit is contained in:
Jorge Pastor 2024-06-05 20:00:53 +02:00
parent 8cd3605d48
commit abbe58bc96
10 changed files with 38 additions and 26 deletions

View File

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

View File

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

View File

@ -8,13 +8,14 @@
{% if object_list %} {% if object_list %}
<div class="table-responsive">
<table class="table service-list"> <table class="table service-list">
<colgroup> <!-- <colgroup>
<col span="1" style="width: 25%;"> <col span="1" style="width: 25%;">
<col span="1" style="width: 10%;"> <col span="1" style="width: 10%;">
<col span="1" style="width: 35%;"> <col span="1" style="width: 35%;">
<col span="1" style="width: 30%;"> <col span="1" style="width: 30%;">
</colgroup> </colgroup> -->
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th scope="col">{% trans "Name" %}</th> <th scope="col">{% trans "Name" %}</th>
@ -45,6 +46,7 @@
</tbody> </tbody>
{% include "musician/components/table_paginator.html" %} {% include "musician/components/table_paginator.html" %}
</table> </table>
</div>
{% else %} {% else %}
<div class="row"> <div class="row">

View File

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

View File

@ -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> <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> <p class="service-description">{{ service.description }}</p>
<div class="table-responsive">
<table class="table service-list"> <table class="table service-list">
<colgroup> <!-- <colgroup>
<col span="1" style="width: 13%;"> <col span="1" style="width: 13%;">
<col span="1" style="width: 12%;"> <col span="1" style="width: 12%;">
<col span="1" style="width: 40%;"> <col span="1" style="width: 40%;">
<col span="1" style="width: 15%;"> <col span="1" style="width: 15%;">
<col span="1" style="width: 10%;"> <col span="1" style="width: 10%;">
<col span="1" style="width: 10%;"> <col span="1" style="width: 10%;">
</colgroup> </colgroup> -->
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th scope="col">Name</th> <th scope="col">Name</th>
@ -47,15 +48,16 @@
<td>{{ resource.admin_email }}</td> <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><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"> <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> <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> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
<a class="btn btn-primary mt-4 mb-4" href="{% url 'musician:mailing-create' %}">{% trans "New list" %}</a> <a class="btn btn-primary mt-4 mb-4" href="{% url 'musician:mailing-create' %}">{% trans "New list" %}</a>
{% endblock %} {% endblock %}

View File

@ -6,13 +6,14 @@
<h1 class="service-name">{{ service.verbose_name }}</h1> <h1 class="service-name">{{ service.verbose_name }}</h1>
<p class="service-description">{{ service.description }}</p> <p class="service-description">{{ service.description }}</p>
<div class="table-responsive">
<table class="table service-list"> <table class="table service-list">
<colgroup> <!-- <colgroup>
<col span="1" style="width: 35%;"> <col span="1" style="width: 35%;">
<col span="1" style="width: 10%;"> <col span="1" style="width: 10%;">
<col span="1" style="width: 25%;"> <col span="1" style="width: 25%;">
<col span="1" style="width: 30%;"> <col span="1" style="width: 30%;">
</colgroup> </colgroup> -->
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th scope="col">{% trans "Name" %}</th> <th scope="col">{% trans "Name" %}</th>
@ -57,5 +58,5 @@
</tbody> </tbody>
{% include "musician/components/table_paginator.html" %} {% include "musician/components/table_paginator.html" %}
</table> </table>
</div>
{% endblock %} {% endblock %}

View File

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

View File

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

View File

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

View File

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