Display username

This commit is contained in:
Max L. 2023-11-23 20:44:43 +01:00
parent df73c736dd
commit 9cab9e8b1c
No known key found for this signature in database
GPG key ID: 2F963B95632B8467
2 changed files with 7 additions and 2 deletions

View file

@ -113,7 +113,7 @@ const displayPost = function(post) {
<div class="card m-2 p-2"> <div class="card m-2 p-2">
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2">
<img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2"> <img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
<p class="m-0">${DOMPurify.sanitize(post.account.display_name)}</p> <p class="m-0">${DOMPurify.sanitize(post.account.display_name)} <span class="user-name">@${DOMPurify.sanitize(post.account.username)}</span></p>
</div> </div>
${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''} ${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''}
<p class="card-text">${DOMPurify.sanitize(post.content)}</p> <p class="card-text">${DOMPurify.sanitize(post.content)}</p>
@ -175,7 +175,7 @@ const updateCarousel = function(slides, posts) {
<div class="card-big"> <div class="card-big">
<div class="d-flex align-items-center mb-4"> <div class="d-flex align-items-center mb-4">
<img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4"> <img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4">
<p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)}</p> <p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)} <span class="user-name">@${DOMPurify.sanitize(post.account.username)}</span></p>
</div> </div>
<hr> <hr>
<div class="row align-items-center vertical-align-center"> <div class="row align-items-center vertical-align-center">

View file

@ -139,6 +139,11 @@ body {
padding-top:0.3em padding-top:0.3em
} }
.user-name {
font-weight: normal;
opacity: 0.7;
}
.container { .container {
max-width: 2000px !important; max-width: 2000px !important;
} }