Finish getting the item filters toggling and scrolling the single panel

This commit is contained in:
Oliver-Akins 2024-03-17 17:03:01 -06:00
parent 5fe854a0f3
commit 3c412dde32
4 changed files with 40 additions and 45 deletions

View file

@ -18,7 +18,13 @@
grid-column: 2; grid-column: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 16px;
&__group {
@include material.elevate(1);
padding: 8px;
border-radius: 4px;
}
} }
.panel { .panel {

View file

@ -19,6 +19,11 @@
.e-16dp { @include material.elevate(16); } .e-16dp { @include material.elevate(16); }
.e-24dp { @include material.elevate(24); } .e-24dp { @include material.elevate(24); }
.scrollable {
container-type: size;
overflow: auto;
}
.nav-bar { .nav-bar {
@include material.elevate(8); @include material.elevate(8);
background: color-mix(in lab, var(--nav-bg), white 5%); background: color-mix(in lab, var(--nav-bg), white 5%);

View file

@ -1,42 +1,22 @@
<div class="e-1dp panel item-list"> <div class="e-1dp scrollable panel item-list">
{{!-- {{#if computed.noItemTypesVisible}}
Materials <p>
Foils Enable a filter to show items of that type!
--}} </p>
<div class="materials"> {{/if}}
<h2>Materials</h2> {{#each computed.itemFilters as | filter |}}
<hr> {{#if filter.active}}
</div> <section class="item-list__group">
<div class="foils"> <h2>{{filter.label}}</h2>
<h2>Foils</h2> <hr>
<hr> <div class="{{@key}}-list">
</div> <div>Item</div>
<div class="custom"> <div>Item</div>
<h2>Custom</h2> <div>Item</div>
<hr> <div>Item</div>
</div> <div>Item</div>
<div class="aspects"> </div>
<h2>Aspects</h2> </section>
<hr> {{/if}}
</div> {{/each}}
<div class="equipment">
<h2>Equipment</h2>
<hr>
</div>
<div class="weapons">
<h2>Weapons</h2>
<hr>
</div>
<div class="armour">
<h2>Armour</h2>
<hr>
</div>
<div class="structures">
<h2>Structures</h2>
<hr>
</div>
<div class="transportation">
<h2>Transportation</h2>
<hr>
</div>
</div> </div>

View file

@ -44,12 +44,16 @@
<div class="e-1dp panel filter-panel"> <div class="e-1dp panel filter-panel">
<h2>Show</h2> <h2>Show</h2>
<label> <label>
<input type="checkbox" name=""> <input type="checkbox">
All All
</label> </label>
{{#each computed.itemFilters as | filter |}} {{#each computed.itemFilters as | filter |}}
<label class="{{filter.key}}-filter"> <label class="{{@key}}-filter">
<input type="checkbox" {{checked filter.active}}> <input
type="checkbox"
data-filter-toggle="{{@key}}"
{{checked filter.active}}
>
{{filter.label}} {{filter.label}}
</label> </label>
{{/each}} {{/each}}