diff --git a/src/app/resources/assets/chorus.js b/src/app/resources/assets/chorus.js index c81cac0..fe219d3 100644 --- a/src/app/resources/assets/chorus.js +++ b/src/app/resources/assets/chorus.js @@ -109,13 +109,23 @@ Chorus.render404 = async function(el, baseUrl) { Chorus.renderComment = function(commentsDiv, comment) { const commentDiv = document.createElement('div') commentDiv.classList.add('chorus-comment') + commentDiv.style.setProperty('--chorus-author-color', comment.user.color) commentsDiv.appendChild(commentDiv) + const bylineEl = document.createElement('div') + bylineEl.classList.add('chorus-byline') + commentDiv.appendChild(bylineEl) + + const chipEl = document.createElement('div') + chipEl.classList.add('chorus-author-chip') + chipEl.title = 'User ID: ' + comment.user.mailId + '\nDomain ID: ' + comment.user.domainId + bylineEl.appendChild(chipEl) + const authorEl = document.createElement('h2') - authorEl.classList.add('chorus-byline') + authorEl.classList.add('chorus-author') authorEl.innerText = comment.user.name authorEl.title = 'User ID: ' + comment.user.mailId + '\nDomain ID: ' + comment.user.domainId - commentDiv.appendChild(authorEl) + bylineEl.appendChild(authorEl) const statusEl = document.createElement('p') statusEl.classList.add('chorus-status') diff --git a/src/app/resources/assets/main-70s.css b/src/app/resources/assets/main-70s.css index b4ca621..703dab6 100644 --- a/src/app/resources/assets/main-70s.css +++ b/src/app/resources/assets/main-70s.css @@ -925,6 +925,21 @@ section#auth h3 { } .comments .chorus-comment .chorus-byline { + display: flex; + flex-direction: row; + align-items: end; +} + +.comments .chorus-comment .chorus-author-chip { + width: 25px; + height: 25px; + border-radius: 7px; + margin-bottom: 10px; + margin-right: 10px; + background: var(--chorus-author-color, #999); +} + +.comments .chorus-comment .chorus-author { font-size: 1.5em; padding-top: 10px; }