bvandeusen
a6bcc1c088
HTML/CSS for the inline fandom picker that slides in below the add-tag input. JS wiring in the next commit. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
92 lines
4.6 KiB
HTML
92 lines
4.6 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="fandomPickerWrapper" class="fandom-picker-wrapper" aria-hidden="true">
|
||
<label class="fandom-picker-label" for="fandomPickerInput">Fandom</label>
|
||
<div class="fandom-picker-input-row">
|
||
<input type="text" id="fandomPickerInput" class="fandom-picker-input"
|
||
placeholder="Pick or create fandom (optional)" autocomplete="off">
|
||
<button type="button" id="fandomPickerClear" class="btn-small"
|
||
aria-label="Clear fandom" title="Clear fandom">×</button>
|
||
</div>
|
||
<div id="fandomPickerAutocomplete"
|
||
class="tag-autocomplete tag-autocomplete-inline" aria-live="polite"></div>
|
||
</div>
|
||
<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>
|