diff options
| -rw-r--r-- | src/content/dependencies/generateArtistGroupContributionsInfo.js | 73 | ||||
| -rw-r--r-- | src/static/css/features.css | 19 |
2 files changed, 41 insertions, 51 deletions
diff --git a/src/content/dependencies/generateArtistGroupContributionsInfo.js b/src/content/dependencies/generateArtistGroupContributionsInfo.js index 6940053f..96011c3e 100644 --- a/src/content/dependencies/generateArtistGroupContributionsInfo.js +++ b/src/content/dependencies/generateArtistGroupContributionsInfo.js @@ -195,50 +195,35 @@ export default { : slots.title))), html.tag('dd', {class: topLevelClasses}, - html.tag('ul', {class: 'group-contributions-table'}, - {role: 'list'}, - - (slots.sort === 'count' - ? stitchArrays({ - group: relations.groupLinksSortedByCount, - count: getCounts(data.groupCountsSortedByCount), - duration: - getDurations( - data.groupDurationsSortedByCount, - data.groupDurationsApproximateSortedByCount), - }).map(({group, count, duration}) => - language.encapsulate(capsule, 'item', capsule => - html.tag('li', - html.tag('div', {class: 'group-contributions-row'}, [ - group, - html.tag('span', {class: 'group-contributions-metrics'}, - // When sorting by count, duration details aren't necessarily - // available for all items. - (slots.showBothColumns && duration - ? language.$(capsule, 'countDurationAccent', {count, duration}) - : language.$(capsule, 'countAccent', {count}))), - ])))) - - : stitchArrays({ - group: relations.groupLinksSortedByDuration, - count: getCounts(data.groupCountsSortedByDuration), - duration: - getDurations( - data.groupDurationsSortedByDuration, - data.groupDurationsApproximateSortedByDuration), - }).map(({group, count, duration}) => - language.encapsulate(capsule, 'item', capsule => - html.tag('li', - html.tag('div', {class: 'group-contributions-row'}, [ - group, - html.tag('span', {class: 'group-contributions-metrics'}, - // Count details are always available, since they're just the - // number of contributions directly. And duration details are - // guaranteed for every item when sorting by duration. - (slots.showBothColumns - ? language.$(capsule, 'durationCountAccent', {duration, count}) - : language.$(capsule, 'durationAccent', {duration}))), - ]))))))), + html.tag('table', {class: 'group-contributions-table'}, + stitchArrays({ + group: relations.groupLinksSortedByCount, + count: getCounts(data.groupCountsSortedByCount), + duration: + getDurations( + data.groupDurationsSortedByCount, + data.groupDurationsApproximateSortedByCount), + }).map(({group, count, duration}) => + language.encapsulate(capsule, 'item', capsule => + html.tag('tr', [ + html.tag('td', {class: 'group-contributions-link-cell'}, + html.tag('span', group)), + + html.tag('td', {class: 'group-contributions-metrics-cell'}, + (slots.sort === 'count' + // When sorting by count, duration details aren't necessarily + // available for all items. + ? (slots.showBothColumns && duration + ? language.$(capsule, 'countDurationAccent', {count, duration}) + : language.$(capsule, 'countAccent', {count})) + + // Count details are always available, since they're just the + // number of contributions directly. And duration details are + // guaranteed for every item when sorting by duration. + : (slots.showBothColumns + ? language.$(capsule, 'durationCountAccent', {duration, count}) + : language.$(capsule, 'durationAccent', {duration})))), + ]))))), ]); }), }; diff --git a/src/static/css/features.css b/src/static/css/features.css index b0cb575d..410bf5b9 100644 --- a/src/static/css/features.css +++ b/src/static/css/features.css @@ -1219,21 +1219,26 @@ } } -/* Group-contributions tables */ +/* Group contributions tables */ @layer layout { .group-contributions-table { - display: inline-block; + margin-left: 40px; + border-collapse: collapse; } - .group-contributions-table .group-contributions-row { - display: flex; - justify-content: space-between; + .group-contributions-table td { + padding: 0 0 4px 0; + } + + .group-contributions-table .group-contributions-link-cell { + display: list-item; } - .group-contributions-table .group-contributions-metrics { - margin-left: 1.5ch; + .group-contributions-table .group-contributions-metrics-cell { + padding-left: 1.5ch; white-space: nowrap; + text-align: right; } } |