refactor: got round edges on the thead

-> hacky method but works
tabarra · Oct 20, 2024 · d882d73 · d882d73
1 parent 8cbc767
commit d882d73
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/web/main/resources.ejs b/web/main/resources.ejs
@@ -12,6 +12,25 @@
     .fix-pill-form {
         min-width: 65px;
     }
+    .table {
+        border-spacing: 0;
+        border-collapse: separate;
+        border-radius: 10px;
+        /* border: 1px solid black; */
+    }
+    thead.expanded {
+        border-radius: 0;
+        border-spacing: 1;
+        border-collapse: collapse;
+        /* border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0; */
+    }
+    body.theme--dark .table .thead-light th {
+        border-spacing: 0;
+        border-collapse: separate;
+        border-radius: 10px;
+        overflow: hidden;
+    }
 </style>
 
 <div class="row justify-content-center">
@@ -67,10 +86,10 @@
 <div class="row justify-content-center">
     <div class="col-sm-12 col-lg-8 mw-col8">
         <% for (const resGroup of resGroups) { %>
-            <div class="card table-responsive-sm" style="margin: 1em 0; border-radius: 0;" id="resList-card-<%= resGroup.divName %>">
+            <div class="card table-responsive-sm" style="margin: 1em 0;" id="resList-card-<%= resGroup.divName %>">
                 <!-- Table class is responsible for the sharper edges -->
                 <table class="table table-hover table-outline mb-0">
-                    <thead class="thead-light head-hover">
+                    <thead class="thead-light head-hover" style="border-radius: 0;">
                         <tr>
                             <th class="text-break text-center" colspan="2">
                                 <%= resGroup.subPath %>
@@ -380,13 +399,15 @@
 
 
     function toggleResGroup(groupCardElement, single, show) {
+        const thead = groupCardElement.querySelector('thead');
         const tbody = groupCardElement.querySelector("tbody");
         const icon = groupCardElement.querySelector('.toggle-icon i');
         if (show === undefined) {
             show = tbody.classList.contains('collapse');
         }
         const groupDivName = groupCardElement.id.split('-').pop();
         if (show) {
+            thead.classList.add('expanded');
             tbody.classList.remove('collapse');
             icon.classList.remove('icon-arrow-down');
             icon.classList.add('icon-arrow-up');
@@ -395,6 +416,7 @@
             }
             collapsedGroups.delete(groupDivName);
         } else {
+            thead.classList.remove('expanded');
             tbody.classList.add('collapse');
             icon.classList.add('icon-arrow-down');
             icon.classList.remove('icon-arrow-up');