initial style in compedium browser

This commit is contained in:
moliloo 2025-08-05 01:20:41 -03:00
parent 845d72e20c
commit 1eae802c46
6 changed files with 244 additions and 110 deletions

View file

@ -1,22 +1,29 @@
<div>
<div class="compedium-results">
{{#if menu.data }}
<div class="menu-path">
{{#each menu.path}}
{{#unless (eq this "folders")}}
<span>{{this}}</span>
<span class="item-path">{{this}}</span>
{{#unless @last}}
<span class="path-link"> > </span>
<span class="path-link">
/
</span>
{{/unless}}
{{/unless}}
{{/each}}
</div>
<fieldset class="item-filter glassy">
<div class="item-filter">
<div class="filter-header">
<input type="search" name="search" class="search-browser" placeholder="Search...">
<div class="search-bar">
<div class="icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<input type="search" name="search" class="search-input" placeholder="Search...">
</div>
{{#if fieldFilter}}
<button type="button" data-action="expandContent">Filters</button>
<a data-tooltip="Filters" data-action="expandContent"><i class="fa-solid fa-filter"></i></a>
{{/if}}
<button type="button" data-action="resetFilters">Reset</button>
<a data-tooltip="Erase" data-action="resetFilters"><i class="fa-solid fa-eraser"></i></a>
</div>
<div class="filter-content extensible">
<div class="wrapper">
@ -44,7 +51,7 @@
{{/each}}
</div>
</div>
</fieldset>
</div>
{{!-- <div class="item-list-container"> --}}
{{#if menu.data.columns.length}}
<div class="item-list-header">
@ -75,6 +82,9 @@
</div>
{{!-- </div> --}}
{{else}}
<h2 class="welcome-message">Welcome to DAGGERHEART Items Browser</h2>
<div class="welcome-message">
<h2 class="title">Daggerheart Compedium Browser</h2>
<span class="hint"><i>Select a Folder in sidebar to start browsing trought the compedium</i></span>
</div>
{{/if}}
</div>

View file

@ -1,18 +1,28 @@
<div>
<div class="compedium-sidebar">
{{#each compendiums}}
<details class="compendium-container" data-compendium-id="{{id}}" open>
<summary>{{label}}</summary>
<summary>
{{label}}
<line-div></line-div>
</summary>
<div class="folder-list">
{{#each folders}}
<div class="{{#if selected}} is-selected{{/if}}" data-action="selectFolder" data-folder-id="{{id}}">{{label}}</div>
{{!-- <div data-action="selectFolder" data-folder-id="{{id}}">{{label}}</div> --}}
<div class="folder-list subfolder-list">
<div class="subfolder-list">
{{#each folders}}
<div class="{{#if selected}} is-selected{{/if}}" data-action="selectFolder" data-folder-id="{{../id}}.folders.{{id}}">- {{label}}</div>
<div
class="subfolder-item {{#if selected}} is-selected{{/if}}"
data-action="selectFolder"
data-folder-id="{{../id}}.folders.{{id}}"
>
{{label}}
</div>
{{/each}}
</div>
{{/each}}
</div>
<line-div></line-div>
</details>
{{/each}}
</div>