lars/ETPlot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add toggle for grid, list and compact list views

Browse Source
This commit is contained in:
Kylian Schmidt
2025-07-22 13:19:53 +02:00
parent dced82a56f
commit 3e2aaa4be8
8 changed files with 648 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/gallery.html
+47 -9
View File
@@ -34,17 +34,51 @@
<!-- Folder Tree -->
<div class="folder-tree" id="folderTree"></div>
<!-- Plot Grid -->
<div class="grid">
<!-- View Toggle Controls - Only show if there are plot items -->
{% if items %}
<div class="view-controls">
<button class="view-btn active" data-view="grid" title="Grid View">
<svg width="16" height="16" viewBox="0 0 16 16">
<rect x="1" y="1" width="6" height="6" fill="currentColor"/>
<rect x="9" y="1" width="6" height="6" fill="currentColor"/>
<rect x="1" y="9" width="6" height="6" fill="currentColor"/>
<rect x="9" y="9" width="6" height="6" fill="currentColor"/>
</svg>
</button>
<button class="view-btn" data-view="list-large" title="Large List View">
<svg width="16" height="16" viewBox="0 0 16 16">
<rect x="1" y="2" width="4" height="3" fill="currentColor"/>
<rect x="7" y="2" width="8" height="1" fill="currentColor"/>
<rect x="7" y="4" width="6" height="1" fill="currentColor"/>
<rect x="1" y="7" width="4" height="3" fill="currentColor"/>
<rect x="7" y="7" width="8" height="1" fill="currentColor"/>
<rect x="7" y="9" width="6" height="1" fill="currentColor"/>
<rect x="1" y="12" width="4" height="3" fill="currentColor"/>
<rect x="7" y="12" width="8" height="1" fill="currentColor"/>
<rect x="7" y="14" width="6" height="1" fill="currentColor"/>
</svg>
</button>
<button class="view-btn" data-view="list-compact" title="Compact List View">
<svg width="16" height="16" viewBox="0 0 16 16">
<rect x="1" y="3" width="14" height="1" fill="currentColor"/>
<rect x="1" y="6" width="14" height="1" fill="currentColor"/>
<rect x="1" y="9" width="14" height="1" fill="currentColor"/>
<rect x="1" y="12" width="14" height="1" fill="currentColor"/>
</svg>
</button>
</div>
{% endif %}
<!-- Plot Container -->
<div class="plot-container grid-view" id="plotContainer">
{% for item in items %}
<div class="grid-item">
<a href="{{ item.pdf_href }}">
<img src="{{ item.png_href }}" alt="{{ item.name }}">
<div class="plot-item grid-item">
<a href="{{ item.pdf_href }}" class="plot-link">
<img src="{{ item.png_href }}" alt="{{ item.name }}" class="plot-thumbnail">
</a>
<button class="metadata-btn" onclick="event.stopPropagation(); showMetadataPopup(this, '{{ item.name|e }}', {{ (item.metadata or {})|tojson }})" title="View metadata">
⋯
</button>
<div class="plot-name" title="{{ item.name }}">{{ item.name }}</div>
<div class="plot-info">
<div class="plot-name" title="{{ item.name }}">{{ item.name }}</div>
</div>
</div>
{% endfor %}
</div>
@@ -120,6 +154,10 @@
<span>Toggle theme</span>
<span class="shortcut-key">Ctrl+T</span>
</div>
<div class="shortcut-item">
<span>Toggle view</span>
<span class="shortcut-key">Ctrl+V</span>
</div>
<div class="shortcut-item">
<span>Help</span>
<span class="shortcut-key">?</span>