Add an expandable metadata grid

This commit is contained in:
Kylian Schmidt
2025-07-29 10:31:35 +02:00
parent f3adbe49fa
commit bcb083bbb9
10 changed files with 430 additions and 269 deletions
+22 -18
View File
@@ -34,36 +34,37 @@
<!-- Folder Tree -->
<div class="folder-tree" id="folderTree"></div>
<!-- Folder Metadata Dropdown -->
<!-- Folder Metadata Section -->
{% if folder_metadata %}
<div class="folder-metadata-container">
<button class="folder-metadata-toggle" onclick="toggleFolderMetadata()">
<span class="folder-metadata-icon">📋</span>
<span class="folder-metadata-label">Folder Information</span>
<span class="folder-metadata-arrow"></span>
<div class="metadata-section">
<button class="metadata-toggle-btn" onclick="toggleMetadataSection()">
<span class="metadata-icon">📋</span>
<span class="metadata-label">Folder Information</span>
<span class="metadata-arrow" id="metadataArrow"></span>
</button>
<div class="folder-metadata-content" id="folderMetadataContent">
<div class="folder-metadata-grid">
<div class="metadata-content" id="metadataContent" style="display: none;">
<div class="metadata-grid">
{% for key, value in folder_metadata.items() %}
<div class="folder-metadata-item">
<span class="folder-metadata-key">{{ key }}:</span>
<span class="folder-metadata-value">
<div class="metadata-item">
<span class="metadata-key">{{ key }}:</span>
<span class="metadata-value">
{% if value is string and (value.startswith('http://') or value.startswith('https://')) %}
<a href="{{ value }}" target="_blank" rel="noopener noreferrer">{{ value }}</a>
{% elif value is string and value|length > 100 %}
<span class="folder-metadata-long-text">{{ value[:100] }}...</span>
<button class="folder-metadata-expand" onclick="toggleMetadataText(this)">Show more</button>
<span class="folder-metadata-full-text" style="display: none;">{{ value }}</span>
<span class="metadata-long-text">{{ value[:100] }}...</span>
<button class="metadata-expand" onclick="expandText(this)">Show more</button>
<span class="metadata-full-text" style="display: none;">{{ value }}</span>
{% elif value is iterable and value is not string and value is not mapping %}
<div class="folder-metadata-list">
<div class="metadata-list">
{% for item in value %}
<span class="folder-metadata-tag">{{ item }}</span>
<span class="metadata-tag">{{ item }}</span>
{% endfor %}
</div>
{% elif value is mapping %}
<div class="folder-metadata-nested">
<div class="metadata-nested">
{% for subkey, subvalue in value.items() %}
<div class="folder-metadata-nested-item">
<div class="metadata-nested-item">
<strong>{{ subkey }}:</strong> {{ subvalue }}
</div>
{% endfor %}
@@ -309,6 +310,9 @@
<!-- Metadata Popup Script -->
<script src="{{ assets_path }}/js/metadata-popup.js"></script>
<!-- Metadata Section Script -->
<script src="{{ assets_path }}/js/metadata-section.js"></script>
<!-- Folder Metadata Script -->
<script src="{{ assets_path }}/js/folder-metadata.js"></script>