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;
display: flex;
flex-direction: column;
gap: 12px;
gap: 16px;
&__group {
@include material.elevate(1);
padding: 8px;
border-radius: 4px;
}
}
.panel {

View file

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

View file

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

View file

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