diff --git a/static/css/components/recipe-modal.css b/static/css/components/recipe-modal.css index 89845ad0..0e877729 100644 --- a/static/css/components/recipe-modal.css +++ b/static/css/components/recipe-modal.css @@ -6,6 +6,93 @@ border-bottom: 1px solid var(--lora-border); } +/* Recipe Tags styles */ +.recipe-tags-container { + position: relative; + margin-top: 6px; + margin-bottom: 10px; +} + +.recipe-tags-compact { + display: flex; + flex-wrap: nowrap; + gap: 6px; + align-items: center; +} + +.recipe-tag-compact { + background: rgba(0, 0, 0, 0.03); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: var(--border-radius-xs); + padding: 2px 8px; + font-size: 0.75em; + color: var(--text-color); + white-space: nowrap; +} + +[data-theme="dark"] .recipe-tag-compact { + background: rgba(255, 255, 255, 0.03); + border: 1px solid var(--lora-border); +} + +.recipe-tag-more { + background: var(--lora-accent); + color: var(--lora-text); + border-radius: var(--border-radius-xs); + padding: 2px 8px; + font-size: 0.75em; + cursor: pointer; + white-space: nowrap; + font-weight: 500; +} + +.recipe-tags-tooltip { + position: absolute; + top: calc(100% + 8px); + left: 0; + background: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: var(--border-radius-sm); + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); + padding: 10px 14px; + max-width: 400px; + z-index: 10; + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: all 0.2s ease; + pointer-events: none; +} + +.recipe-tags-tooltip.visible { + opacity: 1; + visibility: visible; + transform: translateY(0); + pointer-events: auto; +} + +.tooltip-content { + display: flex; + flex-wrap: wrap; + gap: 6px; + max-height: 200px; + overflow-y: auto; +} + +.tooltip-tag { + background: rgba(0, 0, 0, 0.03); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: var(--border-radius-xs); + padding: 3px 8px; + font-size: 0.75em; + color: var(--text-color); +} + +[data-theme="dark"] .tooltip-tag { + background: rgba(255, 255, 255, 0.03); + border: 1px solid var(--lora-border); +} + /* Top Section: Preview and Gen Params */ .recipe-top-section { display: grid; @@ -205,7 +292,7 @@ .recipe-loras-list { display: flex; flex-direction: column; - gap: 12px; + gap: 10px; overflow-y: auto; flex: 1; } @@ -213,7 +300,7 @@ .recipe-lora-item { display: flex; gap: var(--space-2); - padding: var(--space-2); + padding: 10px var(--space-2); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-color); @@ -229,8 +316,8 @@ } .recipe-lora-thumbnail { - width: 50px; - height: 50px; + width: 46px; + height: 46px; flex-shrink: 0; border-radius: var(--border-radius-xs); overflow: hidden; @@ -246,7 +333,7 @@ .recipe-lora-content { display: flex; flex-direction: column; - gap: 4px; + gap: 3px; flex: 1; min-width: 0; } @@ -291,10 +378,9 @@ padding: 2px 8px; border-radius: var(--border-radius-xs); font-size: 0.85em; + color: var(--lora-accent); } - - .missing-badge { display: inline-flex; align-items: center; diff --git a/static/js/components/RecipeModal.js b/static/js/components/RecipeModal.js index 37d68a2a..c2d9c554 100644 --- a/static/js/components/RecipeModal.js +++ b/static/js/components/RecipeModal.js @@ -11,13 +11,71 @@ class RecipeModal { } showRecipeDetails(recipe) { - console.log(recipe); // Set modal title const modalTitle = document.getElementById('recipeModalTitle'); if (modalTitle) { modalTitle.textContent = recipe.title || 'Recipe Details'; } + // Set recipe tags if they exist + const tagsCompactElement = document.getElementById('recipeTagsCompact'); + const tagsTooltipContent = document.getElementById('recipeTagsTooltipContent'); + + if (tagsCompactElement && tagsTooltipContent && recipe.tags && recipe.tags.length > 0) { + // Clear previous tags + tagsCompactElement.innerHTML = ''; + tagsTooltipContent.innerHTML = ''; + + // Limit displayed tags to 5, show a "+X more" button if needed + const maxVisibleTags = 5; + const visibleTags = recipe.tags.slice(0, maxVisibleTags); + const remainingTags = recipe.tags.length > maxVisibleTags ? recipe.tags.slice(maxVisibleTags) : []; + + // Add visible tags + visibleTags.forEach(tag => { + const tagElement = document.createElement('div'); + tagElement.className = 'recipe-tag-compact'; + tagElement.textContent = tag; + tagsCompactElement.appendChild(tagElement); + }); + + // Add "more" button if needed + if (remainingTags.length > 0) { + const moreButton = document.createElement('div'); + moreButton.className = 'recipe-tag-more'; + moreButton.textContent = `+${remainingTags.length} more`; + tagsCompactElement.appendChild(moreButton); + + // Add tooltip functionality + moreButton.addEventListener('mouseenter', () => { + document.getElementById('recipeTagsTooltip').classList.add('visible'); + }); + + moreButton.addEventListener('mouseleave', () => { + setTimeout(() => { + if (!document.getElementById('recipeTagsTooltip').matches(':hover')) { + document.getElementById('recipeTagsTooltip').classList.remove('visible'); + } + }, 300); + }); + + document.getElementById('recipeTagsTooltip').addEventListener('mouseleave', () => { + document.getElementById('recipeTagsTooltip').classList.remove('visible'); + }); + + // Add all tags to tooltip + recipe.tags.forEach(tag => { + const tooltipTag = document.createElement('div'); + tooltipTag.className = 'tooltip-tag'; + tooltipTag.textContent = tag; + tagsTooltipContent.appendChild(tooltipTag); + }); + } + } else if (tagsCompactElement) { + // No tags to display + tagsCompactElement.innerHTML = ''; + } + // Set recipe image const modalImage = document.getElementById('recipeModalImage'); if (modalImage) { @@ -140,11 +198,11 @@ class RecipeModal {

${lora.modelName}

${localStatus} - ${lora.modelVersionName ? `
${lora.modelVersionName}
` : ''}
- ${lora.baseModel ? `
${lora.baseModel}
` : ''} + ${lora.modelVersionName ? `
${lora.modelVersionName}
` : ''}
Weight: ${lora.strength || 1.0}
+ ${lora.baseModel ? `
${lora.baseModel}
` : ''} `; diff --git a/templates/components/recipe_modal.html b/templates/components/recipe_modal.html index 06302449..1b791c5a 100644 --- a/templates/components/recipe_modal.html +++ b/templates/components/recipe_modal.html @@ -4,6 +4,13 @@

Recipe Details

+ +
+
+
+
+
+