Finish getting the item filters toggling and scrolling the single panel
This commit is contained in:
parent
5fe854a0f3
commit
3c412dde32
4 changed files with 40 additions and 45 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
|
|
@ -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}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue