major updates to theming, creation of showcase view and polish of existing systems including tagging editting.

2026-01-18 11:32:21 -05:00
parent 5f568f43bc
commit 46144ccc76
21 changed files with 1787 additions and 557 deletions
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>ImageRepo - Showcase</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body class="showcase-body">
+
+<!-- Floating navbar overlay -->
+<nav class="showcase-nav">
+  <div class="showcase-nav-links">
+    <a class="nav-link" href="{{ url_for('main.index') }}">Showcase</a>
+    <a class="nav-link" href="{{ url_for('main.gallery') }}">Gallery</a>
+    <a class="nav-link" href="{{ url_for('main.tag_list', kind='artist') }}">Artists</a>
+    <a class="nav-link" href="{{ url_for('main.tag_list') }}">Tags</a>
+    <a class="nav-link" href="{{ url_for('main.settings') }}">Settings</a>
+  </div>
+  <span class="nav-hint">Press R to shuffle</span>
+</nav>
+
+<!-- Masonry grid container - columns created by JS -->
+<div id="showcaseGrid" class="masonry-container"></div>
+
+<!-- Initial image data for JS to distribute -->
+<script id="initialImages" type="application/json">
+[{% for image in images %}
+  {
+    "id": {{ image.id }},
+    "filename": "{{ image.filename | e }}",
+    "thumb_url": "{{ url_for('main.serve_image', filename=(image.thumb_path or image.filepath) | replace('/images/', '')) }}",
+    "full_url": "{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '')) }}",
+    "is_video": {{ 'true' if image.filename.lower().endswith(('.mp4', '.mov')) else 'false' }},
+    "tags": [{% for t in image.tags %}{"name": "{{ t.name | e }}", "kind": "{{ t.kind }}"}{% if not loop.last %}, {% endif %}{% endfor %}]
+  }{% if not loop.last %},{% endif %}
+{% endfor %}]
+</script>
+
+<!-- Modal viewer -->
+<div id="imageModal" class="modal">
+  <div class="modal-content">
+    <button id="modalClose" class="modal-close-btn" title="Close (ESC)">×</button>
+    <button id="modalPrev" class="modal-button modal-prev">‹</button>
+    <button id="modalNext" class="modal-button modal-next">›</button>
+    <span class="modal-close-hint">ESC to close</span>
+
+    <div class="modal-body">
+      <div id="modalImageWrapper" class="modal-image-wrapper">
+        <img id="modalImage" src="" alt="Full View">
+      </div>
+
+      <div id="modalTagEditor" class="tag-editor" data-image-id="">
+        <div id="modalTagList" class="tags"></div>
+        <form id="modalTagForm" class="tag-form" autocomplete="off">
+          <div class="tag-form-wrapper">
+            <input type="text" id="tagInput" name="name" placeholder="Add tag..." autocomplete="off">
+            <div id="tagAutocomplete" class="tag-autocomplete"></div>
+          </div>
+          <button type="submit">Add</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="{{ url_for('static', filename='js/modal-pagination.js') }}"></script>
+<script src="{{ url_for('static', filename='js/showcase.js') }}"></script>
+</body>
+</html>