content, css: group contributions table 2

3 files changed, 15 insertions, 56 deletions

diff --git a/src/static/css/features.css b/src/static/css/features.css
index de615de2..2d54fe7a 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -1243,32 +1243,26 @@
   .group-contributions-table {
     margin-left: 40px;
     border-collapse: collapse;
-  }
 
-  .group-contributions-table td {
-    padding: 0 0 4px 0;
-  }
+    margin-bottom: 1em;
 
-  .group-contributions-table .group-contributions-link-cell {
-    display: list-item;
-  }
+    tr.split td { border-top: 2px solid #fff2; }
 
-  .group-contributions-table .group-contributions-metrics-cell {
-    padding-left: 1.5ch;
-    white-space: nowrap;
-    text-align: right;
-  }
-}
+    tr:has(+ .split) td { padding-bottom: 4px; }
+    tr.split td         { padding-top: 4px; }
 
-@layer interaction {
-  .group-contributions-sorted-by-count:not(.visible),
-  .group-contributions-sorted-by-duration:not(.visible) {
-    display: none;
-  }
+    td {
+      padding: 0 0 4px 0;
+    }
 
-  .group-contributions-sort-button {
-    text-decoration: underline;
-    text-decoration-style: dotted;
+    td:not(:last-child),
+    th:not(:last-child) {
+      padding-right: 1.5ch;
+    }
+
+    td.group { padding-left: 3ch; }
+    td.count { text-align: center; }
+    td.duration { text-align: right; }
   }
 }
 
diff --git a/src/static/js/client/index.js b/src/static/js/client/index.js
index 65254b10..a17f7dab 100644
--- a/src/static/js/client/index.js
+++ b/src/static/js/client/index.js
@@ -1,5 +1,3 @@
-import '../group-contributions-table.js';
-
 import * as additionalNamesBoxModule from './additional-names-box.js';
 import * as albumCommentarySidebarModule from './album-commentary-sidebar.js';
 import * as artTagGalleryFilterModule from './art-tag-gallery-filter.js';
diff --git a/src/static/js/group-contributions-table.js b/src/static/js/group-contributions-table.js
deleted file mode 100644
index bef85fad..00000000
--- a/src/static/js/group-contributions-table.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// TODO: Update to clientSteps style.
-
-const groupContributionsTableInfo =
-  Array.from(document.querySelectorAll('#content dl'))
-    .filter(dl => dl.querySelector('a.group-contributions-sort-button'))
-    .map(dl => ({
-      sortingByCountLink: dl.querySelector('dt.group-contributions-sorted-by-count a.group-contributions-sort-button'),
-      sortingByDurationLink: dl.querySelector('dt.group-contributions-sorted-by-duration a.group-contributions-sort-button'),
-      sortingByCountElements: dl.querySelectorAll('.group-contributions-sorted-by-count'),
-      sortingByDurationElements: dl.querySelectorAll('.group-contributions-sorted-by-duration'),
-    }));
-
-function sortGroupContributionsTableBy(info, sort) {
-  const [showThese, hideThese] =
-    (sort === 'count'
-      ? [info.sortingByCountElements, info.sortingByDurationElements]
-      : [info.sortingByDurationElements, info.sortingByCountElements]);
-
-  for (const element of showThese) element.classList.add('visible');
-  for (const element of hideThese) element.classList.remove('visible');
-}
-
-for (const info of groupContributionsTableInfo) {
-  info.sortingByCountLink.addEventListener('click', evt => {
-    evt.preventDefault();
-    sortGroupContributionsTableBy(info, 'duration');
-  });
-
-  info.sortingByDurationLink.addEventListener('click', evt => {
-    evt.preventDefault();
-    sortGroupContributionsTableBy(info, 'count');
-  });
-}