change Eigenschaften to be in a list instead of a fieldset

This commit is contained in:
Sven Balzer 2024-12-20 17:44:33 +01:00
parent fea5de6596
commit ef4539ee39
2 changed files with 20 additions and 22 deletions

View File

@ -63,30 +63,23 @@
</nav>
<div class="tab {{#if (eq tabGroups.primary 'tab1')}}active{{/if}}" data-group="primary" data-tab="tab1">
<fieldset>
<legend>{{localize "DSA41.attributes.label"}}</legend>
<div class="Eigenschaften">
<div class="list Eigenschaften">
<div class="list-header">
<span></span>
{{#each actor.system.attributes}}
<span class="center">{{localize (concat "DSA41.attributes.short." @key)}}</span>
{{/each}}
<span>{{localize "DSA41.attributes.initial"}}</span>
{{#each actor.system.attributes}}
{{>editable-input type="number" name=(concat "system.attributes." @key ".initial") value=(lookup this "initial")}}
{{/each}}
<span>{{localize "DSA41.attributes.advancement"}}</span>
{{#each actor.system.attributes}}
{{>editable-input type="number" name=(concat "system.attributes." @key ".advancement") value=(lookup this "advancement")}}
{{/each}}
<span>{{localize "DSA41.attributes.modifier"}}</span>
{{#each actor.system.attributes}}
<span>{{>editable-input type="number" name=(concat "system.attributes." @key ".modifier") value=(lookup this "modifier")}}</span>
{{/each}}
</div>
</fieldset>
{{#each actor.system.attributes}}
<div class="list-item">
<span>{{localize (concat "DSA41.attributes.long." @key)}}</span>
{{>editable-input type="number" name=(concat "system.attributes." @key ".initial") value=(lookup this "initial")}}
{{>editable-input type="number" name=(concat "system.attributes." @key ".advancement") value=(lookup this "advancement")}}
{{>editable-input type="number" name=(concat "system.attributes." @key ".modifier") value=(lookup this "modifier")}}
</div>
{{/each}}
</div>
<div class="list Basiswerte">
<div class="list-header">

View File

@ -284,7 +284,7 @@ html {
padding: 0.5rem;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(90deg, rgb(36, 133, 44) 0%, rgb(0, 79, 7) 40%, rgb(0, 51, 5) 100%);
background: linear-gradient(90deg, rgb(25, 92, 30) 0%, rgb(0, 79, 7) 40%, rgb(0, 51, 5) 100%);
}
& .list-item {
@ -337,15 +337,20 @@ html {
&[data-tab="tab1"] {
& .Eigenschaften {
display: grid;
grid-template-columns: minmax(0, max-content) repeat(8, minmax(0, 1fr));
grid-template-columns: minmax(0, max-content) repeat(3, minmax(0, 1fr));
align-items: center;
gap: 0.5rem;
column-gap: 0.5rem;
& .list-header :not(:nth-child(1)), .list-item :not(:nth-child(1)) {
text-align: center;
}
}
& .Basiswerte {
display: grid;
grid-template-columns: minmax(0, max-content) repeat(5, minmax(0, 1fr));
align-items: center;
column-gap: 0.5rem;
& .list-header :not(:nth-child(1)), .list-item :not(:nth-child(1)) {
text-align: center;