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;
|
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 {
|
||||||
|
|
|
||||||
|
|
@ -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%);
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
</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>
|
<hr>
|
||||||
|
<div class="{{@key}}-list">
|
||||||
|
<div>Item</div>
|
||||||
|
<div>Item</div>
|
||||||
|
<div>Item</div>
|
||||||
|
<div>Item</div>
|
||||||
|
<div>Item</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
{{/each}}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -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}}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue