Get the general layout of the untyped item details ready

This commit is contained in:
Oliver-Akins 2024-03-20 23:42:47 -06:00
parent df38113533
commit 3b4e2405c1
2 changed files with 56 additions and 2 deletions

View file

@ -184,6 +184,46 @@
} }
&__content { &__content {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) min-content;
grid-template-rows: repeat(3, min-content) auto;
gap: 8px;
padding: 4px;
}
&__usage, &__tier {
@include material.elevate(1);
padding: 8px;
display: flex;
align-items: center
}
button {
@include material.elevate(2);
&:hover {
@include material.elevate(4);
}
}
&__quantity--edit {
@include material.elevate(1);
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
max-width: 100%;
align-items: center;
padding: 8px;
> :first-child {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
&__description {
@include material.elevate(1);
margin: 0;
grid-row: span 3;
grid-column: span 3;
} }
} }
} }

View file

@ -20,14 +20,28 @@
<h3 class="untyped__name"> <h3 class="untyped__name">
{{item.name}} {{item.name}}
</h3> </h3>
<div class="untyped__quantity"> <div class="untyped__quantity--display">
(x {{item.system.quantity}}) (x {{item.system.quantity}})
</div> </div>
</div> </div>
{{#if (dd-set-has meta.expanded item.uuid)}} {{#if (dd-set-has meta.expanded item.uuid)}}
<hr> <hr>
<div class="untyped__content"> <div class="untyped__content">
Some Description <div class="untyped__quantity--edit">
<label for="">
Quantity
</label>
<input
type="number"
value="{{item.system.quantity}}"
>
</div>
<div class="untyped__usage">Usage Cost</div>
<div class="untyped__tier">Tier</div>
<button type="button">C</button>
<p class="untyped__description">Description</p>
<button type="button">E</button>
<button type="button">D</button>
</div> </div>
{{/if}} {{/if}}
</section> </section>