Bryan Van Deusen
111 lines
3.8 KiB
HTML
111 lines
3.8 KiB
HTML
<!-- /app/templates/gallery.html -->
|
||
{% extends "layout.html" %}
|
||
{% block title %}Gallery{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="gallery-infinite-container">
|
||
<!-- Timeline Scrollbar (left sidebar) -->
|
||
<aside id="timelineSidebar" class="timeline-sidebar">
|
||
<div id="timelineTrack" class="timeline-track">
|
||
<!-- Populated by JS with year-month markers -->
|
||
<div class="timeline-loading">Loading...</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Gallery Content -->
|
||
<main class="gallery-main">
|
||
<div class="gallery-header">
|
||
<div class="gallery-header-left">
|
||
<h1>Gallery</h1>
|
||
{% if active_tag %}
|
||
<div class="active-filter">
|
||
Filtered by: <span class="filter-tag">{{ active_tag }}</span>
|
||
<a href="{{ url_for('main.gallery') }}" class="clear-filter" title="Clear filter">×</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
<div class="gallery-header-actions">
|
||
<button id="selectModeBtn" class="btn secondary-btn">Select</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gallery Grid with Date Sections -->
|
||
<div id="galleryInfinite" class="gallery-infinite">
|
||
{% for year_month_key, year_month_label, images in grouped_images %}
|
||
<section class="date-section" data-year-month="{{ year_month_key }}">
|
||
<h2 class="date-divider" id="section-{{ year_month_key }}">
|
||
<span class="date-divider-text">{{ year_month_label }}</span>
|
||
<span class="date-divider-count">{{ images|length }} images</span>
|
||
</h2>
|
||
<div class="gallery-grid">
|
||
{% for image in images %}
|
||
{% include '_gallery_item.html' %}
|
||
{% endfor %}
|
||
</div>
|
||
</section>
|
||
{% else %}
|
||
<div class="gallery-empty">
|
||
<p>No images found{% if active_tag %} for tag "{{ active_tag }}"{% endif %}.</p>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- Loading indicator -->
|
||
<div id="galleryLoading" class="gallery-loading" style="display:none;">
|
||
<span class="loading-spinner"></span>
|
||
<span>Loading more images...</span>
|
||
</div>
|
||
|
||
<!-- End of content marker -->
|
||
<div id="galleryEnd" class="gallery-end" style="display:none;">
|
||
No more images
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Modal -->
|
||
{% include '_gallery_modal.html' %}
|
||
|
||
<!-- Bulk Editor Panel -->
|
||
<aside id="bulkEditorPanel" class="bulk-editor-panel">
|
||
<div class="bulk-editor-header">
|
||
<h3>Bulk Edit</h3>
|
||
<button id="closeBulkEditor" class="modal-close-btn">×</button>
|
||
</div>
|
||
<div class="bulk-editor-stats">
|
||
<span id="selectedCount">0</span> images selected
|
||
</div>
|
||
<div class="bulk-editor-section">
|
||
<h4>Add Tags</h4>
|
||
<form id="bulkAddTagForm" class="tag-form" autocomplete="off">
|
||
<div class="tag-form-wrapper">
|
||
<input type="text" id="bulkTagInput" name="name" placeholder="Add tag..." autocomplete="off">
|
||
<div id="bulkTagAutocomplete" class="tag-autocomplete"></div>
|
||
</div>
|
||
<button type="submit">Add</button>
|
||
</form>
|
||
</div>
|
||
<div class="bulk-editor-section">
|
||
<h4>Remove Tags</h4>
|
||
<p class="form-help">Common tags across selected images:</p>
|
||
<div id="commonTagsList" class="tags"></div>
|
||
</div>
|
||
<div class="bulk-editor-actions">
|
||
<button id="clearSelectionBtn" class="btn secondary-btn">Clear Selection</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Pass initial state to JS -->
|
||
<script>
|
||
window.galleryState = {
|
||
cursor: {{ initial_cursor | tojson | safe if initial_cursor else 'null' }},
|
||
hasMore: {{ 'true' if has_more else 'false' }},
|
||
activeTag: {{ active_tag | tojson | safe if active_tag else 'null' }}
|
||
};
|
||
</script>
|
||
|
||
<script src="{{ url_for('static', filename='js/gallery-infinite.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/modal-pagination.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/bulk-select.js') }}"></script>
|
||
{% endblock %}
|