Implement input-with-button layout in import modal for improved user experience

- Added a new input-with-button component to the import modal, allowing users to input an image URL and fetch the image with a button click.
- Removed the previous button placement to streamline the UI and enhance usability.
- Updated CSS styles for the new component to ensure proper layout and responsiveness.
This commit is contained in:
Will Miao
2025-03-19 05:24:28 +08:00
parent 7c56825f9b
commit 541ad624c5
2 changed files with 33 additions and 15 deletions

View File

@@ -34,14 +34,14 @@
<p>Input a Civitai image URL to import as a recipe.</p>
<div class="input-group">
<label for="imageUrlInput">Image URL:</label>
<input type="text" id="imageUrlInput" placeholder="https://civitai.com/images/...">
<div class="input-with-button">
<input type="text" id="imageUrlInput" placeholder="https://civitai.com/images/...">
<button class="primary-btn" onclick="importManager.handleUrlInput()">
<i class="fas fa-download"></i> Fetch Image
</button>
</div>
<div class="error-message" id="urlError"></div>
</div>
<div class="input-group">
<button class="primary-btn" onclick="importManager.handleUrlInput()">
<i class="fas fa-download"></i> Fetch Image
</button>
</div>
</div>
<div class="modal-actions">