diff --git a/static/css/components/lora-modal.css b/static/css/components/lora-modal.css index 3e7bebc6..7ecd93ad 100644 --- a/static/css/components/lora-modal.css +++ b/static/css/components/lora-modal.css @@ -1,8 +1,9 @@ /* Lora Modal Header */ .modal-header { display: flex; - justify-content: space-between; - align-items: center; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--lora-border); @@ -534,6 +535,7 @@ overflow: hidden; min-height: 200px; position: relative; + /* Remove the max-height and overflow-y to allow content to expand naturally */ } .model-description-loading { @@ -554,11 +556,30 @@ padding: var(--space-2); line-height: 1.5; overflow-wrap: break-word; + font-size: 0.95em; +} + +.model-description-content h1, +.model-description-content h2, +.model-description-content h3, +.model-description-content h4, +.model-description-content h5, +.model-description-content h6 { + margin-top: 1em; + margin-bottom: 0.5em; + font-weight: 600; +} + +.model-description-content p { + margin-bottom: 1em; } .model-description-content img { max-width: 100%; height: auto; + border-radius: var(--border-radius-xs); + display: block; + margin: 1em 0; } .model-description-content pre { @@ -566,29 +587,45 @@ border-radius: var(--border-radius-xs); padding: var(--space-1); white-space: pre-wrap; + margin: 1em 0; + overflow-x: auto; } .model-description-content code { font-family: monospace; + font-size: 0.9em; + background: rgba(0, 0, 0, 0.05); + padding: 0.1em 0.3em; + border-radius: 3px; } -.model-description-content hr { - border: 0; - border-top: 1px solid var(--lora-border); - margin: var(--space-2) 0; +.model-description-content pre code { + background: transparent; + padding: 0; } -.model-description-content a { - color: var(--lora-accent); - text-decoration: none; +.model-description-content ul, +.model-description-content ol { + margin-left: 1.5em; + margin-bottom: 1em; } -.model-description-content a:hover { - text-decoration: underline; +.model-description-content li { + margin-bottom: 0.5em; +} + +.model-description-content blockquote { + border-left: 3px solid var(--lora-accent); + padding-left: 1em; + margin-left: 0; + margin-right: 0; + font-style: italic; + opacity: 0.8; } /* Adjust dark mode for model description */ -[data-theme="dark"] .model-description-content pre { +[data-theme="dark"] .model-description-content pre, +[data-theme="dark"] .model-description-content code { background: rgba(255, 255, 255, 0.05); } @@ -703,39 +740,99 @@ /* Model Tags styles */ .model-tags { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 8px; - margin-bottom: 4px; + display: none; } .model-tag { - background: var(--lora-surface); - border: 1px solid var(--lora-border); - border-radius: var(--border-radius-xs); - padding: 3px 8px; - font-size: 0.8em; - color: var(--lora-accent); - cursor: pointer; - display: inline-flex; - align-items: center; - gap: 5px; - transition: all 0.2s; + display: none; } -.model-tag i { - font-size: 0.85em; - opacity: 0.6; +/* Updated Model Tags styles - improved visibility in light theme */ +.model-tags-container { + position: relative; + margin-top: 4px; +} + +.model-tags-compact { + display: flex; + flex-wrap: nowrap; + gap: 6px; + align-items: center; +} + +.model-tag-compact { + /* Updated styles to match info-item appearance */ + 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; +} + +/* Adjust dark theme tag styles */ +[data-theme="dark"] .model-tag-compact { + background: rgba(255, 255, 255, 0.03); + border: 1px solid var(--lora-border); +} + +.model-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; +} + +.model-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); /* Enhanced shadow for better visibility */ + padding: 10px 14px; + max-width: 400px; + z-index: 10; + opacity: 0; + visibility: hidden; + transform: translateY(-4px); + transition: all 0.2s ease; + pointer-events: none; +} + +.model-tags-tooltip.visible { + opacity: 1; + visibility: visible; + transform: translateY(0); + pointer-events: auto; /* Enable interactions when visible */ +} + +.tooltip-content { + display: flex; + flex-wrap: wrap; + gap: 6px; + max-height: 200px; + overflow-y: auto; +} + +.tooltip-tag { + /* Updated styles to match info-item appearance */ + 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); } -.model-tag:hover { - background: oklch(var(--lora-accent) / 0.1); - border-color: var(--lora-accent); -} - -.model-tag:hover i { - opacity: 1; - color: var(--lora-accent); +/* Adjust dark theme tooltip tag styles */ +[data-theme="dark"] .tooltip-tag { + background: rgba(255, 255, 255, 0.03); + border: 1px solid var(--lora-border); } \ No newline at end of file diff --git a/static/js/components/LoraModal.js b/static/js/components/LoraModal.js index 4f4b3c3d..49eaf368 100644 --- a/static/js/components/LoraModal.js +++ b/static/js/components/LoraModal.js @@ -15,7 +15,7 @@ export function showLoraModal(lora) { - ${renderTags(lora.tags || [])} + ${renderCompactTags(lora.tags || [])}
@@ -119,6 +119,7 @@ export function showLoraModal(lora) { setupEditableFields(); setupShowcaseScroll(); setupTabSwitching(); + setupTagTooltip(); // If we have a model ID but no description, fetch it if (lora.civitai?.modelId && !lora.modelDescription) { @@ -694,4 +695,47 @@ window.copyTag = async function(tag) { console.error('Copy failed:', err); showToast('Copy failed', 'error'); } -}; \ No newline at end of file +}; + +// New function to render compact tags with tooltip +function renderCompactTags(tags) { + if (!tags || tags.length === 0) return ''; + + // Display up to 5 tags, with a tooltip indicator if there are more + const visibleTags = tags.slice(0, 5); + const remainingCount = Math.max(0, tags.length - 5); + + return ` +
+
+ ${visibleTags.map(tag => `${tag}`).join('')} + ${remainingCount > 0 ? + `+${remainingCount}` : + ''} +
+ ${tags.length > 0 ? + `
+
+ ${tags.map(tag => `${tag}`).join('')} +
+
` : + ''} +
+ `; +} + +// Setup tooltip functionality +function setupTagTooltip() { + const tagsContainer = document.querySelector('.model-tags-container'); + const tooltip = document.querySelector('.model-tags-tooltip'); + + if (tagsContainer && tooltip) { + tagsContainer.addEventListener('mouseenter', () => { + tooltip.classList.add('visible'); + }); + + tagsContainer.addEventListener('mouseleave', () => { + tooltip.classList.remove('visible'); + }); + } +} \ No newline at end of file diff --git a/templates/components/controls.html b/templates/components/controls.html index ec6667e1..7147ee54 100644 --- a/templates/components/controls.html +++ b/templates/components/controls.html @@ -63,7 +63,7 @@
-

Tags

+

Tags (Top 20)

Loading tags...