garrettmills/www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Chorus - show chip to left of author name with an author-specific color

Browse Source
This commit is contained in:
Garrett Mills 2025-01-05 20:37:06 -05:00
parent 3ae6b90ba9
commit 56dc7412a3
2 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/resources/assets/chorus.js
View File

@ -109,13 +109,23 @@ Chorus.render404 = async function(el, baseUrl) {
Chorus.renderComment = function(commentsDiv, comment) { Chorus.renderComment = function(commentsDiv, comment) {
const commentDiv = document.createElement('div') const commentDiv = document.createElement('div')
commentDiv.classList.add('chorus-comment') commentDiv.classList.add('chorus-comment')
commentDiv.style.setProperty('--chorus-author-color', comment.user.color)
commentsDiv.appendChild(commentDiv) 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') const authorEl = document.createElement('h2')
authorEl.classList.add('chorus-byline') authorEl.classList.add('chorus-author')
authorEl.innerText = comment.user.name authorEl.innerText = comment.user.name
authorEl.title = 'User ID: ' + comment.user.mailId + '\nDomain ID: ' + comment.user.domainId authorEl.title = 'User ID: ' + comment.user.mailId + '\nDomain ID: ' + comment.user.domainId
commentDiv.appendChild(authorEl) bylineEl.appendChild(authorEl)
const statusEl = document.createElement('p') const statusEl = document.createElement('p')
statusEl.classList.add('chorus-status') statusEl.classList.add('chorus-status')

15
src/app/resources/assets/main-70s.css
View File

@ -925,6 +925,21 @@ section#auth h3 {
} }
.comments .chorus-comment .chorus-byline { .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; font-size: 1.5em;
padding-top: 10px; padding-top: 10px;
} }