Toggle Detail-view of file and hide rest if a new one is opened

OneGov · Sep 10, 2024 · b0faa71 · b0faa71
1 parent dc97c20
commit b0faa71
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/src/onegov/town6/app.py b/src/onegov/town6/app.py
@@ -236,6 +236,7 @@ def get_common_asset() -> 'Iterator[str]':
     yield 'common.js'
     yield '_blank.js'
     yield 'homepage_video_or_slider.js'
+    yield 'file-table-row-toggler.js'
     yield 'animate.js'
     yield 'forms.js'
     yield 'internal_link_check.js'

diff --git a/src/onegov/town6/assets/js/file-table-row-toggler.js b/src/onegov/town6/assets/js/file-table-row-toggler.js
@@ -0,0 +1,24 @@
+$(document).ready(function () {
+    // Handle click on the button to toggle the detail row
+    $('a[id^="button-"]').on('click', function (e) {
+        e.preventDefault();
+
+        // Get the corresponding file number and detail row
+        var fileNumber = $(this).attr('id').split('-')[1];
+        var detailRow = $('#details-' + fileNumber);
+
+        // Close all other detail rows
+        $('tr[id^="details-"]').not(detailRow).addClass('hidden');
+
+        // Remove "down" class from all other chevron icons in the .files table
+        $('.files i.fa-chevron-down').removeClass('down');
+
+        // Toggle the visibility of the clicked detail row
+        detailRow.toggleClass('hidden');
+
+        // Add "down" class to the clicked chevron icon only if the row is now visible
+        if (!detailRow.hasClass('hidden')) {
+            $(this).find('i.fa-chevron-down').addClass('down');
+        }
+    });
+});
diff --git a/src/onegov/town6/templates/macros.pt b/src/onegov/town6/templates/macros.pt
@@ -2476,8 +2476,8 @@
                 ${file.name}
             </td>
             <td>
-                <a id="button-${file_number}">
-                    <i class="fa fa-chevron-down" aria-hidden="true"></i>
+                <a id="button-${file_number}" data-toggle="details-${file_number}">
+                    <i class="fa fa-chevron-down rotate" aria-hidden="true"></i>
                 </a>
             </td>
             <td>
@@ -2490,8 +2490,9 @@
                 ${format_date(file_publish_end)}
             </td>
         </tr>
-        <tr id="details-${file_number}">
-            <td colspan="4">
+        <!-- Hidden Detail-Row -->
+        <tr id="details-${file_number}" class="hidden">
+            <td colspan="5">
                 <div ic-trigger-from="#button-${file_number}"
                      ic-trigger-on="click once"
                      ic-get-from="${actions_url(file.id)}"
@@ -2500,7 +2501,6 @@
                 </div>
             </td>
         </tr>
-
     </tal:b>
 </metal:file_info>
 

diff --git a/src/onegov/town6/theme/styles/files.scss b/src/onegov/town6/theme/styles/files.scss
@@ -81,6 +81,8 @@ section#content .files {
     }
 
     tr.file-info {
+        border-bottom: .5rem solid $white;
+
         td:nth-child(1) {
             overflow: hidden;
             text-overflow: ellipsis;