inventory is now contained in its own scrollView.

pull/64/head
macniel 2025-11-03 18:14:53 +01:00
parent 34c95891e6
commit 5104f43e2f
2 changed files with 30 additions and 16 deletions

View File

@ -6,13 +6,19 @@
& > div { & > div {
display: grid; display: grid;
grid-template-columns: 1fr 320px; grid-template-columns: 1fr 320px;
grid-template-rows: 74px 1fr; grid-template-rows: 32px 32px 32px 1fr;
gap: 10px; gap: 10px;
height: 100%; height: 100%;
grid-template-areas: grid-template-areas:
"capacity capacity" "capacity capacity"
"coinage coinage"
"inventory-header equipment-header"
"inventory equipment"; "inventory equipment";
.coinage {
grid-area: coinage;
}
.capacity { .capacity {
grid-area: capacity; grid-area: capacity;
@ -35,24 +41,30 @@
} }
} }
h3.inventory-header {
line-height: 32px;
grid-area: inventory-header;
margin: 0;
padding: 0;
}
.inventory { .inventory {
grid-area: inventory; grid-area: inventory;
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
border: 1px inset #ccc;
background-color: rgba(0, 0, 0, 0.2);
h3 {
flex: 0; .equipment {
@include equipment.equipment
} }
.inventory-table {
flex: 1;
display: flex;
flex-direction: column;
.equipment {
@include equipment.equipment
}
}
} }
} }
} }

View File

@ -9,12 +9,14 @@
</div> </div>
</div> </div>
<div class="coinage">
<div class="inventory">
<h3>Inventar </h3>
<label>Geldmittel: {{currency this.wealth}}</label> <label>Geldmittel: {{currency this.wealth}}</label>
{{> "systems/DSA_4-1/templates/ui/partial-equipment-button.hbs" equipments}} </div>
<h3 class="inventory-header">Inventar </h3>
<div class="inventory">
{{> "systems/DSA_4-1/templates/ui/partial-equipment-button.hbs" equipments}}
</div> </div>
<!-- TODO: fix paperdoll <!-- TODO: fix paperdoll
<div class="paperdoll"> <div class="paperdoll">