Bryan Van Deusen
76 lines
2.5 KiB
HTML
76 lines
2.5 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">
|
||
<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>
|
||
|
||
<!-- 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' %}
|
||
|
||
<!-- 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>
|
||
{% endblock %}
|