From 7ea06bd63550319cdc6dea19b51fd98bbf0f5ac9 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Sat, 21 Dec 2024 13:07:50 -0800
Subject: [PATCH] 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>
---
 plinth/modules/backups/static/backups.css     |  4 +
 .../backups/templates/backups_repository.html | 99 ++++++++++---------
 2 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/plinth/modules/backups/static/backups.css b/plinth/modules/backups/static/backups.css
index 448fa8ab6..7f19b0ef9 100644
--- a/plinth/modules/backups/static/backups.css
+++ b/plinth/modules/backups/static/backups.css
@@ -23,3 +23,7 @@
 .inline-block {
     display: inline-block;
 }
+
+.archive-operations {
+    width: 12.5rem;
+}
diff --git a/plinth/modules/backups/templates/backups_repository.html b/plinth/modules/backups/templates/backups_repository.html
index 03d31eb61..b9df64ce9 100644
--- a/plinth/modules/backups/templates/backups_repository.html
+++ b/plinth/modules/backups/templates/backups_repository.html
@@ -6,67 +6,72 @@
 
 <div class="table-responsive">
   <table class="table" id="archives-list">
-    <thead class="collapsible-button" data-bs-toggle="collapse" data-bs-target="#{{ uuid }}">
+    <thead>
       <tr>
         <th colspan="2">
-          <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
-          {% if repository.error %}
-            <span class="fa fa-exclamation-triangle mount-error"
-                  aria-hidden="true" title="{{ repository.error }}">
-            </span>
-          {% elif repository.is_encrypted %}
-            <span class="fa fa-lock encrypted"
-                  aria-hidden="true" title="{% trans "This repository is encrypted" %}">
-            </span>
-          {% endif %}
+          <div  class="d-sm-flex flex-sm-row">
+            <div class="flex-sm-grow-1 lh-lg collapsible-button"
+                 data-bs-toggle="collapse" data-bs-target="#{{ uuid }}">
+              <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
+              {% if repository.error %}
+                <span class="fa fa-exclamation-triangle mount-error"
+                      aria-hidden="true" title="{{ repository.error }}">
+                </span>
+              {% elif repository.is_encrypted %}
+                <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">
-            <a class="repository-schedule btn btn-sm btn-primary"
-               href="{% url 'backups:schedule' uuid %}">
-              <span class="fa fa-clock-o" aria-hidden="true"></span>
-              {% trans "Schedule" %}
-            </a>
+            <div class="text-end">
+              <a class="repository-schedule btn btn-sm btn-primary"
+                 href="{% url 'backups:schedule' uuid %}">
+                <span class="fa fa-clock-o" aria-hidden="true"></span>
+                {% trans "Schedule" %}
+              </a>
 
-            {% if repository.flags.mountable %}
+              {% if repository.flags.mountable %}
 
-              {% if repository.mounted %}
+                {% if repository.mounted %}
 
-                <form action="{% url 'backups:repository-umount' uuid %}" method="POST"
-                      class="inline-block" >
-                  {% csrf_token %}
-                  <button type="submit" class="btn btn-sm btn-default"
-                         title="{% trans 'Unmount Location' %}">
-                    <span class="fa fa-eject" aria-hidden="true"></span>
-                  </button>
-                </form>
+                  <form action="{% url 'backups:repository-umount' uuid %}" method="POST"
+                        class="inline-block" >
+                    {% csrf_token %}
+                    <button type="submit" class="btn btn-sm btn-default"
+                           title="{% trans 'Unmount Location' %}">
+                      <span class="fa fa-eject" aria-hidden="true"></span>
+                    </button>
+                  </form>
 
-              {% else %}
+                {% else %}
 
-                <form action="{% url 'backups:repository-mount' uuid %}" method="POST"
-                      class="inline-block" >
-                  {% csrf_token %}
-                  <button type="submit" class="btn btn-sm btn-default"
-                          title="{% trans 'Mount Location' %}">
-                    <span class="fa fa-eye" aria-hidden="true"></span>
-                  </button>
-                </form>
+                  <form action="{% url 'backups:repository-mount' uuid %}" method="POST"
+                        class="inline-block" >
+                    {% csrf_token %}
+                    <button type="submit" class="btn btn-sm btn-default"
+                            title="{% trans 'Mount Location' %}">
+                      <span class="fa fa-eye" aria-hidden="true"></span>
+                    </button>
+                  </form>
+
+                {% 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.' %}"
-                 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>
-
-            {% endif %}
-          </span>
+              {% endif %}
+            </div>
+          </div>
         </th>
       </tr>
     </thead>