cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-07-21 18:09:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix chat being jumpy as timestamps get longer (#2095)
Some checks are pending
Project CI / build (24.x) (push) Waiting to run
Details

Browse source
This commit is contained in:
Carlos Fernandez 2026-07-18 05:42:50 -04:00 • committed by GitHub
parent 79d6522614
commit d76b4bb707
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 79 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

87
styles/less/global/chat.less
View file

@ -7,12 +7,12 @@
.chat-log .chat-message { .chat-log .chat-message {
background-image: url('../assets/parchments/dh-parchment-light.png'); background-image: url('../assets/parchments/dh-parchment-light.png');
.message-header .message-header-metadata .message-metadata, .message-header .message-header-main .message-metadata,
.message-header .message-header-main .message-sub-header-container { .message-header .message-header-main .name {
color: @dark; color: @dark;
} }
.message-header .message-header-main .message-sub-header-container h4 { .message-header .message-header-main h4 {
color: @dark-blue; color: @dark-blue;
} }
@ -42,27 +42,12 @@
.message-header { .message-header {
display: flex; display: flex;
gap: 4px; gap: 8px;
padding: 8px; padding: 8px;
align-items: center;
.message-header-metadata { .portrait {
flex: none; flex: 0 0 auto;
display: flex;
flex-direction: column;
.message-metadata {
font-family: @font-body;
color: @beige;
}
}
.message-header-main {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
overflow: hidden;
.actor-img { .actor-img {
border-radius: 50%; border-radius: 50%;
width: 40px; width: 40px;
@ -70,20 +55,60 @@
object-fit: cover; object-fit: cover;
object-position: top center; object-position: top center;
} }
}
.message-sub-header-container { .message-header-main {
display: flex;
align-items: center;
column-gap: 4px;
row-gap: 2px;
flex: 1;
overflow: hidden;
display: grid;
grid-template:
"title metadata"
"subtitle subtitle";
h4 {
font-size: var(--font-size-16);
font-weight: bold;
margin-bottom: 0;
font-family: @font-subtitle;
color: @golden;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
overflow: hidden;
align-self: flex-end;
}
.message-metadata {
font-family: @font-body;
color: @beige;
white-space: nowrap;
align-items: baseline;
.message-timestamp {
font-size: var(--font-size-11);
}
}
.subtitle {
grid-area: subtitle;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
color: @beige; color: @beige;
gap: 4px;
h4 { align-items: baseline;
font-size: var(--font-size-16); line-height: 1;
font-weight: bold; .name {
margin-bottom: 0; flex: 1;
font-family: @font-subtitle; }
color: @golden; .whisper-to {
color: @color-text-subtle;
flex: 0;
white-space: nowrap;
} }
} }
} }

41
templates/ui/chat/chat-message.hbs
View file

@ -1,23 +1,18 @@
<li class="chat-message message flexcol {{cssClass}}" data-message-id="{{message._id}}" <li class="chat-message message flexcol {{cssClass}}" data-message-id="{{message._id}}"
{{#if borderColor}}style="border-color:{{borderColor}}"{{/if}}> {{#if borderColor}}style="border-color:{{borderColor}}"{{/if}}>
<header class="message-header flexrow"> <header class="message-header flexrow">
<div class="message-header-main"> <div class="portrait">
<img class="actor-img" src="{{actor.img}}" /> <img class="actor-img" src="{{actor.img}}" />
<div class="message-sub-header-container">
{{#if message.title}}
<h4>{{message.title}}</h4>
<div>{{alias}} {{#if author.isGM}}(GM){{/if}}</div>
{{else}}
{{#unless actor.name}}
<h4>{{author.name}}</h4>
{{else}}
<h4>{{alias}}</h4>
<div>{{author.name}}</div>
{{/unless}}
{{/if}}
</div>
</div> </div>
<div class="message-header-metadata"> <div class="message-header-main">
{{#if message.title}}
<h4>{{message.title}}</h4>
{{else if (not actor.name)}}
<h4>{{author.name}}</h4>
{{else}}
<h4>{{alias}}</h4>
{{/if}}
<span class="message-metadata"> <span class="message-metadata">
<time class="message-timestamp">{{timeSince message.timestamp}}</time> <time class="message-timestamp">{{timeSince message.timestamp}}</time>
{{#if canDelete}} {{#if canDelete}}
@ -32,9 +27,19 @@
{{/if}} {{/if}}
</span> </span>
{{#if isWhisper}} <div class="subtitle">
<span class="whisper-to">{{localize 'CHAT.To'}}: {{whisperTo}}</span> <div class="name">
{{/if}} {{#if message.title}}
{{alias}} {{#if author.isGM}}(GM){{/if}}
{{else if (not actor.name)}}
{{author.name}}
{{/if}}
</div>
{{#if isWhisper}}
<span class="whisper-to">{{localize 'CHAT.To'}}: {{whisperTo}}</span>
{{/if}}
</div>
</div> </div>
</header> </header>
<div class="message-content"> <div class="message-content">