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

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

@ -7,12 +7,12 @@
.chat-log .chat-message {
background-image: url('../assets/parchments/dh-parchment-light.png');
.message-header .message-header-metadata .message-metadata,
.message-header .message-header-main .message-sub-header-container {
.message-header .message-header-main .message-metadata,
.message-header .message-header-main .name {
color: @dark;
}
.message-header .message-header-main .message-sub-header-container h4 {
.message-header .message-header-main h4 {
color: @dark-blue;
}
@ -42,27 +42,12 @@
.message-header {
display: flex;
gap: 4px;
padding: 8px;
.message-header-metadata {
flex: none;
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;
padding: 8px;
align-items: center;
.portrait {
flex: 0 0 auto;
.actor-img {
border-radius: 50%;
width: 40px;
@ -70,13 +55,20 @@
object-fit: cover;
object-position: top center;
}
}
.message-sub-header-container {
flex: 1;
.message-header-main {
display: flex;
flex-direction: column;
justify-content: space-between;
color: @beige;
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);
@ -84,6 +76,39 @@
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;
display: flex;
justify-content: space-between;
color: @beige;
gap: 4px;
align-items: baseline;
line-height: 1;
.name {
flex: 1;
}
.whisper-to {
color: @color-text-subtle;
flex: 0;
white-space: nowrap;
}
}
}

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

@ -1,23 +1,18 @@
<li class="chat-message message flexcol {{cssClass}}" data-message-id="{{message._id}}"
{{#if borderColor}}style="border-color:{{borderColor}}"{{/if}}>
<header class="message-header flexrow">
<div class="message-header-main">
<div class="portrait">
<img class="actor-img" src="{{actor.img}}" />
<div class="message-sub-header-container">
</div>
<div class="message-header-main">
{{#if message.title}}
<h4>{{message.title}}</h4>
<div>{{alias}} {{#if author.isGM}}(GM){{/if}}</div>
{{else}}
{{#unless actor.name}}
{{else if (not actor.name)}}
<h4>{{author.name}}</h4>
{{else}}
<h4>{{alias}}</h4>
<div>{{author.name}}</div>
{{/unless}}
{{/if}}
</div>
</div>
<div class="message-header-metadata">
<span class="message-metadata">
<time class="message-timestamp">{{timeSince message.timestamp}}</time>
{{#if canDelete}}
@ -32,10 +27,20 @@
{{/if}}
</span>
<div class="subtitle">
<div class="name">
{{#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>
</header>
<div class="message-content">
{{{message.content}}}