bvandeusen
03184e7f1c
Replace the floating autocomplete popup with a reserved ~5-row inline area below the add-tag input. It never covers provenance or suggestion chips — they stay visible side-by-side with the autocomplete list while the user types. The area scrolls when more matches are loaded, and is prefilled with top tags on every image load so it's never empty. The base .tag-autocomplete class (still used by bulk-select and the fandom picker) keeps its floating behavior; the modal opts in to the new inline layout via an added .tag-autocomplete-inline modifier. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
81 lines
3.9 KiB
HTML
81 lines
3.9 KiB
HTML
<!-- /app/templates/_gallery_modal.html -->
|
||
<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 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>
|
||
|
||
<!-- SECTION: Provenance (system-generated tags: post; future: source, archive) -->
|
||
<div class="modal-sidebar-section modal-provenance-section" id="modalProvenanceSection" style="display: none;">
|
||
<div id="modalProvenanceList" class="provenance-list"></div>
|
||
</div>
|
||
|
||
<!-- 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>
|
||
<button type="submit">Add</button>
|
||
</form>
|
||
<div id="tagAutocomplete" class="tag-autocomplete tag-autocomplete-inline" aria-live="polite"></div>
|
||
<span id="tagActionFeedback" class="tag-feedback tag-feedback-inline"></span>
|
||
</div>
|
||
|
||
<!-- SECTION: Suggestions (ML-backed, modal-only) -->
|
||
<div class="modal-sidebar-section modal-suggestions-section" id="modalSuggestionsSection" style="display: none;">
|
||
<div class="section-header">
|
||
<span class="section-title">Suggestions</span>
|
||
<button type="button" class="suggestions-refresh" id="suggestionsRefreshBtn" aria-label="Refresh suggestions">↻</button>
|
||
</div>
|
||
<div id="modalSuggestionsList" class="suggestions-list"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|