Add some better styling for the spell blocks

This commit is contained in:
Oliver-Akins 2024-01-08 22:55:52 -07:00
parent 4f2d40da7d
commit 413ed7c3d3
2 changed files with 32 additions and 5 deletions

View file

@ -194,6 +194,19 @@
} }
&--spells { &--spells {
grid-area: spells; grid-area: spells;
.spell {
display: flex;
flex-direction: column;
gap: 4px;
&__actions {
display: flex;
flex-direction: row;
justify-content: end;
gap: 4px;
}
}
} }
&--mounts { &--mounts {
grid-area: mounts; grid-area: mounts;

View file

@ -4,9 +4,7 @@
<summary data-collapse-id="{{spell.uuid}}"> <summary data-collapse-id="{{spell.uuid}}">
<span class="flex-grow" style="flex-grow: 1"> <span class="flex-grow" style="flex-grow: 1">
{{spell.name}} {{spell.name}}
{{#if spell.system.cost }}
(Cost: {{spell.system.cost}}) (Cost: {{spell.system.cost}})
{{/if}}
</span> </span>
</summary> </summary>
@ -33,13 +31,29 @@
> >
</div> </div>
<div class="spell__description"> <div class="spell__description">
<label for="{{spell.uuid}}-description"></label> <label for="{{spell.uuid}}-description">Description</label>
<textarea <textarea
id="{{spell.uuid}}-description" id="{{spell.uuid}}-description"
data-embedded-update="system.description" data-embedded-update="system.description"
data-embedded-id="{{spell.uuid}}" data-embedded-id="{{spell.uuid}}"
>{{spell.system.description}}</textarea> >{{spell.system.description}}</textarea>
</div> </div>
<div class="spell__actions">
<button
class="neutral reduced-padding equal-padding"
>
<div class="icon icon--20">
{{{ ../icons.chat-bubble }}}
</div>
</button>
<button
class="danger reduced-padding equal-padding"
>
<div class="icon icon--20">
{{{ ../icons.garbage-bin }}}
</div>
</button>
</div>
</div> </div>
</details> </details>
{{else}} {{else}}
@ -51,7 +65,7 @@
<div class="flex-row"> <div class="flex-row">
<button <button
class="primary add-spell" class="confirm add-spell"
> >
Add New Spell Add New Spell
</button> </button>