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

View File

@ -284,7 +284,7 @@ html {
padding: 0.5rem; padding: 0.5rem;
border-radius: 5px 5px 0px 0px; 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 { & .list-item {
@ -337,15 +337,20 @@ html {
&[data-tab="tab1"] { &[data-tab="tab1"] {
& .Eigenschaften { & .Eigenschaften {
display: grid; 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; 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 { & .Basiswerte {
display: grid; display: grid;
grid-template-columns: minmax(0, max-content) repeat(5, minmax(0, 1fr)); grid-template-columns: minmax(0, max-content) repeat(5, minmax(0, 1fr));
align-items: center; align-items: center;
column-gap: 0.5rem;
& .list-header :not(:nth-child(1)), .list-item :not(:nth-child(1)) { & .list-header :not(:nth-child(1)), .list-item :not(:nth-child(1)) {
text-align: center; text-align: center;