From da5ba89f4171c395f5e7fa2c764272e7d2de93f3 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Fri, 30 Jun 2023 20:45:00 -0300 Subject: content: generateArtistGroupContributionsInfo: table layout 👻 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/static/client.js | 34 ++++++++++++++++++++++++++++++++++ src/static/site4.css | 19 +++++++++++++++++++ 2 files changed, 53 insertions(+) (limited to 'src/static') diff --git a/src/static/client.js b/src/static/client.js index e75fbd99..2f0b6aee 100644 --- a/src/static/client.js +++ b/src/static/client.js @@ -870,3 +870,37 @@ function loadImage(imageUrl, onprogress) { xhr.send(); }); } + +// Group contributions table ------------------------------ + +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'); + }); +} diff --git a/src/static/site4.css b/src/static/site4.css index d7801f20..c7ecc393 100644 --- a/src/static/site4.css +++ b/src/static/site4.css @@ -722,6 +722,25 @@ li > ul { margin-top: 5px; } +.group-contributions-table { + display: inline-block; +} + +.group-contributions-table .group-contributions-row { + display: flex; + justify-content: space-between; +} + +.group-contributions-table .group-contributions-metrics { + margin-left: 1.5ch; + white-space: nowrap; +} + +.group-contributions-sorted-by-count:not(.visible), +.group-contributions-sorted-by-duration:not(.visible) { + display: none; +} + /* Images */ .image-container { -- cgit 1.3.0-6-gf8a5