backups: Fix issue clicking on schedule buttons with Bootstrap 5

Closes: #2476.

- The collapse click logic is triggered when clicking on the schedule button (or
the other buttons). In case of other buttons they do activate eventually but
the schedule button does not activate.

- Solve this properly by making sure that collapse logic is not triggered when
the buttons are clicked.

Tests:

- On stable and testing containers, ensure that collapse works. Collapse/expand
icon works. The three buttons work. And mobile view looks good.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Sunil Mohan Adapa 2024-12-21 13:07:50 -08:00 committed by James Valleroy
parent c2007d0f6d
commit 7ea06bd635
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
2 changed files with 56 additions and 47 deletions

View File

@ -23,3 +23,7 @@
.inline-block { .inline-block {
display: inline-block; display: inline-block;
} }
.archive-operations {
width: 12.5rem;
}

View File

@ -6,67 +6,72 @@
<div class="table-responsive"> <div class="table-responsive">
<table class="table" id="archives-list"> <table class="table" id="archives-list">
<thead class="collapsible-button" data-bs-toggle="collapse" data-bs-target="#{{ uuid }}"> <thead>
<tr> <tr>
<th colspan="2"> <th colspan="2">
<span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span> <div class="d-sm-flex flex-sm-row">
{% if repository.error %} <div class="flex-sm-grow-1 lh-lg collapsible-button"
<span class="fa fa-exclamation-triangle mount-error" data-bs-toggle="collapse" data-bs-target="#{{ uuid }}">
aria-hidden="true" title="{{ repository.error }}"> <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
</span> {% if repository.error %}
{% elif repository.is_encrypted %} <span class="fa fa-exclamation-triangle mount-error"
<span class="fa fa-lock encrypted" aria-hidden="true" title="{{ repository.error }}">
aria-hidden="true" title="{% trans "This repository is encrypted" %}"> </span>
</span> {% elif repository.is_encrypted %}
{% endif %} <span class="fa fa-lock encrypted"
aria-hidden="true" title="{% trans "This repository is encrypted" %}">
</span>
{% endif %}
{{ repository.name }} {{ repository.name }}
</div>
<span class="pull-right"> <div class="text-end">
<a class="repository-schedule btn btn-sm btn-primary" <a class="repository-schedule btn btn-sm btn-primary"
href="{% url 'backups:schedule' uuid %}"> href="{% url 'backups:schedule' uuid %}">
<span class="fa fa-clock-o" aria-hidden="true"></span> <span class="fa fa-clock-o" aria-hidden="true"></span>
{% trans "Schedule" %} {% trans "Schedule" %}
</a> </a>
{% if repository.flags.mountable %} {% if repository.flags.mountable %}
{% if repository.mounted %} {% if repository.mounted %}
<form action="{% url 'backups:repository-umount' uuid %}" method="POST" <form action="{% url 'backups:repository-umount' uuid %}" method="POST"
class="inline-block" > class="inline-block" >
{% csrf_token %} {% csrf_token %}
<button type="submit" class="btn btn-sm btn-default" <button type="submit" class="btn btn-sm btn-default"
title="{% trans 'Unmount Location' %}"> title="{% trans 'Unmount Location' %}">
<span class="fa fa-eject" aria-hidden="true"></span> <span class="fa fa-eject" aria-hidden="true"></span>
</button> </button>
</form> </form>
{% else %} {% else %}
<form action="{% url 'backups:repository-mount' uuid %}" method="POST" <form action="{% url 'backups:repository-mount' uuid %}" method="POST"
class="inline-block" > class="inline-block" >
{% csrf_token %} {% csrf_token %}
<button type="submit" class="btn btn-sm btn-default" <button type="submit" class="btn btn-sm btn-default"
title="{% trans 'Mount Location' %}"> title="{% trans 'Mount Location' %}">
<span class="fa fa-eye" aria-hidden="true"></span> <span class="fa fa-eye" aria-hidden="true"></span>
</button> </button>
</form> </form>
{% endif %}
{% endif %} {% endif %}
{% endif %} {% if repository.flags.removable %}
{% if repository.flags.removable %} <a title="{% trans 'Remove Backup Location. This will not delete the remote backup.' %}"
role="button" class="repository-remove btn btn-sm btn-default"
href="{% url 'backups:repository-remove' uuid %}">
<span class="fa fa-trash-o" aria-hidden="true"></span>
</a>
<a title="{% trans 'Remove Backup Location. This will not delete the remote backup.' %}" {% endif %}
role="button" class="repository-remove btn btn-sm btn-default" </div>
href="{% url 'backups:repository-remove' uuid %}"> </div>
<span class="fa fa-trash-o" aria-hidden="true"></span>
</a>
{% endif %}
</span>
</th> </th>
</tr> </tr>
</thead> </thead>