bvandeusen/imagerepo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve modal sidebar hierarchy, collapse add-to-series, in-context feedback

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-20 08:51:03 -04:00
parent 9d7d76953e
commit 7cae463fe8
3 changed files with 177 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/_gallery_modal.html
+46 -31
View File
@@ -11,40 +11,55 @@
<img id="modalImage" src="" alt="Full View">
</div>
<div id="modalTagEditor" class="tag-editor" data-image-id="">
<!-- Shown when image IS in a series -->
<div id="modalSeriesInfo" class="modal-series-info" style="display: none;">
<div class="series-info-row">
<span class="series-info-label">📚 Page</span>
<input type="number" id="modalPageNumber" min="1" class="series-page-input">
<span class="series-info-label">of</span>
<a id="modalSeriesName" href="#" class="series-info-link"></a>
<button id="updatePageBtn" class="btn-small" title="Update page number">Save</button>
<span id="pageUpdateStatus" class="page-update-status"></span>
<div id="modalTagEditor" class="tag-editor modal-sidebar" data-image-id="">
<!-- SECTION: Series -->
<div class="modal-sidebar-section modal-series-section">
<!-- Shown when image IS in a series -->
<div id="modalSeriesInfo" class="modal-series-info" style="display: none;">
<div class="series-info-row">
<span class="series-info-label">📚</span>
<span class="series-info-label">Page</span>
<input type="number" id="modalPageNumber" min="1" class="series-page-input">
<span class="series-info-label">of</span>
<a id="modalSeriesName" href="#" class="series-info-link"></a>
<button id="updatePageBtn" class="btn-small" title="Update page number">Save</button>
<span id="pageUpdateStatus" class="tag-feedback"></span>
</div>
</div>
<!-- Shown when image is NOT in a series -->
<div id="modalAddToSeries" class="modal-add-to-series" style="display: none;">
<button id="addToSeriesToggle" class="modal-series-toggle">
<span>📚 Add to Series</span>
<span class="toggle-arrow">›</span>
</button>
<div id="addToSeriesBody" class="add-series-body" style="display: none;">
<div class="add-series-controls">
<select id="seriesSelect" class="series-select">
<option value="">Select series...</option>
</select>
<input type="number" id="addSeriesPageNumber" min="1" value="1" class="series-page-input" placeholder="#">
<button id="addToSeriesBtn" class="btn-small" disabled>Add</button>
</div>
<span id="addToSeriesStatus" class="tag-feedback"></span>
</div>
</div>
</div>
<!-- Shown when image is NOT in a series -->
<div id="modalAddToSeries" class="modal-add-to-series" style="display: none;">
<div class="add-series-header">
<span class="series-info-label">📚 Add to Series</span>
</div>
<div class="add-series-controls">
<select id="seriesSelect" class="series-select">
<option value="">Select series...</option>
</select>
<input type="number" id="addSeriesPageNumber" min="1" value="1" class="series-page-input" placeholder="#">
<button id="addToSeriesBtn" class="btn-small" disabled>Add</button>
</div>
<span id="addToSeriesStatus" class="page-update-status"></span>
<!-- SECTION: Tags -->
<div class="modal-sidebar-section modal-tags-section">
<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>
<span id="tagActionFeedback" class="tag-feedback tag-feedback-inline"></span>
</div>
<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>