From 541ad624c5775d7e0e20512157fcb37b252d621c Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 19 Mar 2025 05:24:28 +0800
Subject: [PATCH] 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.
---
 static/css/components/import-modal.css | 36 +++++++++++++++++++-------
 templates/components/import_modal.html | 12 ++++-----
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/static/css/components/import-modal.css b/static/css/components/import-modal.css
index 780ce3db..0a3291b1 100644
--- a/static/css/components/import-modal.css
+++ b/static/css/components/import-modal.css
@@ -389,6 +389,32 @@
     margin-bottom: var(--space-2);
 }
 
+.input-with-button {
+    display: flex;
+    gap: 8px;
+}
+
+.input-with-button input {
+    flex: 1;
+    min-width: 0;
+}
+
+.input-with-button button {
+    flex-shrink: 0;
+    white-space: nowrap;
+    padding: 8px 16px;
+    background: var(--lora-accent);
+    color: var(--lora-text);
+    border: none;
+    border-radius: var(--border-radius-xs);
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.input-with-button button:hover {
+    background: oklch(from var(--lora-accent) l c h / 0.9);
+}
+
 .input-group label {
     display: block;
     margin-bottom: 8px;
@@ -405,14 +431,6 @@
     color: var(--text-color);
 }
 
-.input-group button {
-    background: var(--lora-accent);
-    color: var(--lora-text);
-    border: none;
-    padding: 8px 16px;
-    border-radius: var(--border-radius-xs);
-}
-
 .error-message {
     color: var(--lora-error);
     font-size: 0.9em;
@@ -660,4 +678,4 @@
 .deleted-badge i {
     margin-right: 4px;
     font-size: 0.9em;
-}
\ No newline at end of file
+}
diff --git a/templates/components/import_modal.html b/templates/components/import_modal.html
index c67ef6f1..4d0c57cc 100644
--- a/templates/components/import_modal.html
+++ b/templates/components/import_modal.html
@@ -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">