Parcourir la source

TG-47: Refine Meal Builder UI with larger inputs, custom styling, and 0g filtering logic

FerRo988 il y a 2 semaines
Parent
commit
6182d133fd
2 fichiers modifiés avec 28 ajouts et 8 suppressions
  1. 5 3
      static/script.js
  2. 23 5
      static/style.css

+ 5 - 3
static/script.js

@@ -548,10 +548,12 @@ document.addEventListener('DOMContentLoaded', () => {
     
     if (generateRecipeBtn) {
         generateRecipeBtn.addEventListener('click', () => {
-            if (currentMealItems.length === 0) return;
+            const activeItems = currentMealItems.filter(item => item.amount > 0);
+            if (activeItems.length === 0) return;
             
-            const itemNames = currentMealItems.map(item => item.name).join(', ');
-            userInput.value = `Give me a recipe that contains: ${itemNames}`;
+            const itemStrings = activeItems.map(item => `${item.name} (${item.amount}g)`);
+            const promptText = `Give me a recipe that contains: ${itemStrings.join(', ')}`;
+            userInput.value = promptText;
             
             // UI Feedback
             userInput.focus();

+ 23 - 5
static/style.css

@@ -917,21 +917,39 @@ textarea::placeholder {
 .weight-input-wrapper {
     display: flex;
     align-items: center;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 6px;
-    padding: 2px 6px;
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
+    padding: 4px 10px;
     border: 1px solid var(--border);
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.weight-input-wrapper:focus-within {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
 }
 
 .weight-input-wrapper input {
     background: transparent;
     border: none;
     color: var(--text);
-    width: 45px;
-    font-size: 0.85rem;
+    width: 65px;
+    font-size: 0.95rem;
     text-align: right;
     padding: 2px;
     outline: none;
+    font-weight: 500;
+}
+
+/* Hide Spinners (Arrows) for cleaner look */
+.weight-input-wrapper input::-webkit-outer-spin-button,
+.weight-input-wrapper input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.weight-input-wrapper input[type=number] {
+    -moz-appearance: textfield;
 }
 
 .weight-unit {