feat: multiple layouts

This commit is contained in:
2025-11-15 13:25:00 +01:00
parent 0a986f4293
commit 3f0fbed557
3 changed files with 321 additions and 1 deletions

View File

@@ -29,6 +29,36 @@
<line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
</button>
<div class="layout-toggle-wrapper">
<button id="layoutToggle" class="layout-toggle-btn" title="Change layout">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
</button>
<div class="layout-dropdown" id="layoutDropdown">
<button class="layout-option" data-layout="masonry">
<span>Masonry</span>
<svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</button>
<button class="layout-option" data-layout="detail">
<span>Detail</span>
<svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</button>
<button class="layout-option" data-layout="list">
<span>List</span>
<svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</button>
</div>
</div>
<button id="searchToggle" class="search-toggle-btn" title="Toggle search">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>