Implement the general layout for inventory (closes #94)

This commit is contained in:
Oliver-Akins 2024-03-04 19:41:59 -07:00
parent cd6554289b
commit daaa459012
3 changed files with 33 additions and 5 deletions

View file

@ -1,9 +1,20 @@
.dotdungeon .actor--pc-v2 .active .inventory-page {
margin-bottom: 100px;
.dotdungeon .actor--pc-v2 .active.inventory-page {
padding-bottom: 50px;
height: 100%;
}
.dotdungeon .actor--pc-v2 .active .inventory-page .tab[data-tab="player"] {
.dotdungeon .actor--pc-v2 .active.inventory-page .tab[data-tab="player"] {
display: grid;
gap: 16px;
grid-template-columns: 1fr 4fr;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr repeat(3, min-content);
height: 100%;
color: white;
.item-list {
grid-row: 1 / -1;
grid-column: 2;
display: flex;
flex-direction: column;
}
}

View file

@ -3,6 +3,7 @@
@use "../../../mixins/partials" as partials;
@use "./pages/stats.scss";
@use "./pages/inventory.scss";
.dotdungeon .actor--pc-v2 {
background-color: var(--sheet-bg);
@ -57,5 +58,7 @@
.page-content {
padding: 16px;
padding-bottom: 69px;
height: 100%;
}
}

View file

@ -1,3 +1,17 @@
<div class="tab" data-group="inventory" data-tab="player">
<div class="e-1dp">
<h2>Containers</h2>
</div>
<div class="e-1dp item-list">
<h2>Item list</h2>
</div>
<div class="e-1dp">
<h2>Capacity</h2>
</div>
<div class="e-1dp">
<h2>Bytes</h2>
</div>
<div class="e-1dp">
<h2>Show</h2>
</div>
</div>