add colapsable descriptions in chat messages

This commit is contained in:
moliloo 2025-07-29 00:56:42 -03:00
parent 74ccd79390
commit 74f7f1f158
8 changed files with 163 additions and 83 deletions

View file

@ -1,14 +1,19 @@
<div class="daggerheart chat domain-card">
<img class="card-img" src="{{item.img}}" />
<div class="domain-card-header">
<h2 class="title">{{item.name}}</h2>
<ul class="tags">
{{#each item.tags as |tag|}}
<li class="tag">{{tag}}</li>
{{/each}}
</ul>
</div>
<div class="description">{{{description}}}</div>
<details class="domain-card-move">
<summary class="domain-card-header">
<div class="domain-label">
<h2 class="title">{{item.name}}</h2>
<ul class="tags">
{{#each item.tags as |tag|}}
<li class="tag">{{tag}}</li>
{{/each}}
</ul>
</div>
<i class="fa-solid fa-chevron-down"></i>
</summary>
<div class="description">{{{description}}}</div>
</details>
<footer class="ability-card-footer">
{{#each actions as |action index|}}
<button class="ability-use-button" data-index="{{index}}">

View file

@ -1,12 +1,13 @@
<div class="daggerheart chat action">
<div class="action-section">
<img class="action-img" src="{{action.img}}" />
<div class="action-header">
<h2 class="title">{{action.name}}</h2>
<span class="label">{{itemOrigin.name}}</span>
</div>
</div>
{{#if description}}
<details class="action-move">
<summary class="action-section">
<img class="action-img" src="{{action.img}}" />
<div class="action-header">
<h2 class="title">{{action.name}}</h2>
<span class="label">{{itemOrigin.name}}</span>
</div>
<i class="fa-solid fa-chevron-down"></i>
</summary>
<div class="description">{{{description}}}</div>
{{/if}}
</details>
</div>

View file

@ -1,16 +1,17 @@
<div class="daggerheart chat downtime">
<ul class="downtime-moves-list">
<li class="downtime-move">
<div class="downtime-label">
<details class="downtime-move">
<summary class="downtime-label">
<img class="downtime-image" src="{{this.img}}" />
<div class="header-label">
<h2 class="title">{{this.title}}</h2>
<span class="label">{{localize 'DAGGERHEART.UI.Chat.deathMove.title'}}</span>
</div>
</div>
<i class="fa-solid fa-chevron-down"></i>
</summary>
<div class="description">
{{{this.description}}}
</div>
</li>
</details>
</ul>
</div>

View file

@ -1,21 +1,22 @@
<div class="daggerheart chat downtime">
<ul class="downtime-moves-list">
{{#each moves as | move index |}}
<li class="downtime-move">
<div class="downtime-label">
<details class="downtime-move">
<summary class="downtime-label">
<img class="downtime-image" src="{{move.img}}" />
<div class="header-label">
<h2 class="title">{{move.name}}</h2>
<span class="label">{{localize 'DAGGERHEART.GENERAL.Bonuses.rest.downtimeAction'}}</span>
</div>
</div>
<i class="fa-solid fa-chevron-down"></i>
</summary>
<div class="description">
{{{move.description}}}
</div>
{{#each move.actions as | action index |}}
<button class="action-use-button" data-move-index="{{@../key}}" data-action-index="{{index}}">{{localize action.name}}</button>
{{/each}}
</li>
</details>
{{#each move.actions as | action index |}}
<button class="action-use-button" data-move-index="{{@../key}}" data-action-index="{{index}}">{{localize action.name}}</button>
{{/each}}
{{/each}}
</ul>
</div>