nodes/ComfyAssets-ComfyUI_PromptManager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Phase 3 typography and spacing pass

Browse Source 
- Reduce heading sizes: text-xl/2xl/3xl → text-sm font-semibold
- Tighten modal padding: p-6 → p-4, px-6 py-4 → px-4 py-2
- Compact empty states: py-12 → py-6, py-8 → py-4
- Reduce space-y-6 → space-y-3 in metadata panels
- Shrink stat card numbers: text-xl → text-lg
- Shrink decorative emojis: text-2xl/3xl → text-lg
- Keep lightbox nav buttons at text-xl for usability
This commit is contained in:
Vito Sansevero
2026-02-08 06:39:00 -08:00
parent 8652bb70d6
commit b616a26df1
5 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin.html
+4 -4
View File
@@ -40,7 +40,7 @@
<div class="flex items-center justify-between">
<div>
<p class="text-pm-secondary text-xs font-medium uppercase tracking-wide">Total Prompts</p>
<p class="text-xl font-bold text-pm-accent" id="totalPrompts">-</p>
<p class="text-lg font-bold text-pm-accent" id="totalPrompts">-</p>
</div>
</div>
</div>
@@ -48,7 +48,7 @@
<div class="flex items-center justify-between">
<div>
<p class="text-pm-secondary text-xs font-medium uppercase tracking-wide">Categories</p>
<p class="text-xl font-bold text-pm" id="totalCategories">-</p>
<p class="text-lg font-bold text-pm" id="totalCategories">-</p>
</div>
</div>
</div>
@@ -57,7 +57,7 @@
<div class="flex items-center justify-between">
<div>
<p class="text-pm-secondary text-xs font-medium uppercase tracking-wide">Unique Tags</p>
<p class="text-xl font-bold text-pm-success" id="totalTags">-</p>
<p class="text-lg font-bold text-pm-success" id="totalTags">-</p>
</div>
</div>
</div>
@@ -65,7 +65,7 @@
<div class="flex items-center justify-between">
<div>
<p class="text-pm-secondary text-xs font-medium uppercase tracking-wide">Avg Rating</p>
<p class="text-xl font-bold text-pm-warning" id="avgRating">-</p>
<p class="text-lg font-bold text-pm-warning" id="avgRating">-</p>
</div>
</div>
</div>
web/js/admin.js
+17 -17
View File
@@ -420,11 +420,11 @@
if (this.prompts.length === 0) {
container.innerHTML = `
<div class="text-center py-12">
<div class="text-center py-6">
<div class="w-16 h-16 bg-pm-surface rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-2xl">📭</span>
<span class="text-lg">📭</span>
</div>
<h3 class="text-lg font-medium text-pm-secondary mb-2">No prompts found</h3>
<h3 class="text-sm font-semibold text-pm-secondary mb-2">No prompts found</h3>
<p class="text-pm-muted">Try adjusting your search criteria or create some prompts in ComfyUI</p>
</div>
`;
@@ -491,7 +491,7 @@
return `
<div class="bg-pm-surface rounded-pm-md border border-pm hover:border-pm transition-all duration-200" data-id="${prompt.id}">
<div class="p-6">
<div class="p-4">
<div class="flex items-start space-x-4">
<input type="checkbox" class="prompt-checkbox w-5 h-5 text-pm-accent bg-pm-input border-pm rounded focus:ring-pm-accent mt-1" data-id="${prompt.id}">
@@ -633,7 +633,7 @@
const isViewerOpen = viewerContainer && viewerContainer.style.display !== 'none';
const zIndex = isViewerOpen ? 'z-[50000]' : 'z-50';
notification.className = `fixed top-4 right-4 px-6 py-4 rounded-pm-sm shadow-pm ${zIndex} transition-all duration-300 transform translate-x-full`;
notification.className = `fixed top-4 right-4 px-4 py-2 rounded-pm-sm shadow-pm text-sm ${zIndex} transition-all duration-300 transform translate-x-full`;
const colors = {
success: "bg-pm-success text-pm",
@@ -1245,7 +1245,7 @@
runButton.disabled = true;
runButton.innerHTML = '🔄 Running...';
resultsContainer.innerHTML = `
<div class="text-center py-8">
<div class="text-center py-4">
<div class="w-12 h-12 border-4 border-teal-500/30 border-t-teal-500 rounded-full animate-spin mx-auto mb-4"></div>
<p class="text-pm-secondary">Running maintenance operations...</p>
<p class="text-sm text-pm-muted mt-2">Operations: ${selectedOps.map(op => op.replace(/_/g, ' ')).join(', ')}</p>
@@ -1379,7 +1379,7 @@
async runDiagnostics() {
const content = document.getElementById("diagnosticsContent");
content.innerHTML = `
<div class="text-center py-8">
<div class="text-center py-4">
<div class="w-12 h-12 border-4 border-orange-500/30 border-t-orange-500 rounded-full animate-spin mx-auto mb-4"></div>
<p class="text-pm-secondary">Running diagnostics...</p>
</div>
@@ -1691,12 +1691,12 @@
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
modal.innerHTML = `
<div class="bg-pm-surface rounded-pm-md p-6 max-w-2xl w-full mx-4 border border-pm">
<h3 class="text-xl font-semibold text-pm mb-4">📋 Copy Prompt Text</h3>
<div class="bg-pm-surface rounded-pm-md p-4 max-w-2xl w-full mx-4 border border-pm">
<h3 class="text-sm font-semibold text-pm mb-3">Copy Prompt Text</h3>
<p class="text-pm-secondary mb-4">Please manually copy the text below:</p>
<textarea readonly class="w-full h-32 px-4 py-3 bg-pm-surface border border-pm rounded-pm-sm text-pm resize-none" style="font-family: monospace;">${text}</textarea>
<div class="flex justify-end mt-4">
<button class="px-6 py-2 bg-pm-accent hover:bg-pm-accent-hover text-pm font-medium rounded-pm-sm transition-colors" onclick="this.closest('[class*=fixed]').remove()">
<button class="px-4 py-1.5 bg-pm-accent hover:bg-pm-accent-hover text-pm font-medium rounded-pm-sm transition-colors" onclick="this.closest('[class*=fixed]').remove()">
Close
</button>
</div>
@@ -1956,7 +1956,7 @@
const container = document.getElementById("logsContainer");
if (logs.length === 0) {
container.innerHTML = '<div class="text-center py-8 text-pm-muted">No logs found</div>';
container.innerHTML = '<div class="text-center py-4 text-pm-muted">No logs found</div>';
return;
}
@@ -2445,7 +2445,7 @@
<svg class="w-16 h-16 mx-auto mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-lg mb-2">Error Loading Metadata</p>
<p class="text-sm mb-2">Error Loading Metadata</p>
<p class="text-sm">Could not extract ComfyUI metadata from this image</p>
</div>
`;
@@ -2982,7 +2982,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
<svg class="w-5 h-5 text-pm-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<h1 class="text-lg font-medium text-pm">Generation data</h1>
<h1 class="text-sm font-semibold text-pm">Generation data</h1>
</div>
<button class="text-xs text-pm-accent hover:text-pm-accent transition-colors metadata-copy-all">
📋 COPY ALL
@@ -2990,13 +2990,13 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
</div>
<!-- Scrollable Content -->
<div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-6">
<div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-3">
<!-- Initial placeholder content -->
<div class="text-center text-pm-muted py-8">
<svg class="w-16 h-16 mx-auto mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<p class="text-lg mb-2">Loading Metadata...</p>
<p class="text-sm mb-2">Loading Metadata...</p>
<p class="text-sm">Extracting ComfyUI workflow data</p>
</div>
</div>
@@ -3020,7 +3020,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
<svg class="w-16 h-16 mx-auto mb-4 opacity-30 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
<p class="text-lg mb-2">Loading Metadata...</p>
<p class="text-sm mb-2">Loading Metadata...</p>
<p class="text-sm">Extracting ComfyUI workflow data</p>
</div>
</div>
@@ -3034,7 +3034,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
console.error('Failed to load metadata:', error);
metadataContent.innerHTML = `
<div class="text-center text-pm-error py-8">
<p class="text-lg mb-2">Failed to Load Metadata</p>
<p class="text-sm mb-2">Failed to Load Metadata</p>
<p class="text-sm">Could not extract ComfyUI workflow data</p>
</div>
`;
web/js/gallery.js
+16 -16
View File
@@ -221,7 +221,7 @@
<!-- Fallback for failed thumbnails -->
<div class="hidden absolute inset-0 bg-pm-surface text-pm-secondary flex items-center justify-center">
<div class="text-center">
<div class="text-2xl mb-1">${isVideo ? '🎬' : '🖼️'}</div>
<div class="text-lg mb-1">${isVideo ? '🎬' : '🖼️'}</div>
<div class="text-xs">Failed to load</div>
</div>
</div>
@@ -388,7 +388,7 @@
<svg class="w-5 h-5 text-pm-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<h1 class="text-lg font-medium text-pm">Generation data</h1>
<h1 class="text-sm font-semibold text-pm">Generation data</h1>
</div>
<button class="text-xs text-pm-accent hover:text-pm-accent transition-colors metadata-copy-all">
📋 COPY ALL
@@ -396,7 +396,7 @@
</div>
<!-- Scrollable Content -->
<div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-6">
<div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-3">
<!-- Loading state -->
<div class="text-center text-pm-muted py-8">
<div class="w-8 h-8 border-2 border-pm-accent/30 border-t-pm-accent rounded-full animate-spin mx-auto mb-2"></div>
@@ -526,7 +526,7 @@
<svg class="w-5 h-5 text-pm-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<h1 class="text-lg font-medium text-pm">Generation data</h1>
<h1 class="text-sm font-semibold text-pm">Generation data</h1>
</div>
<button class="text-xs text-pm-accent hover:text-pm-accent transition-colors metadata-copy-all">
📋 COPY ALL
@@ -534,7 +534,7 @@
</div>
<!-- Scrollable Content -->
<div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-6">
<div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-3">
<!-- Loading state -->
<div class="text-center text-pm-muted py-8">
<div class="w-8 h-8 border-2 border-pm-accent/30 border-t-pm-accent rounded-full animate-spin mx-auto mb-2"></div>
@@ -628,7 +628,7 @@
<svg class="w-5 h-5 text-pm-error" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
<h1 class="text-lg font-medium text-pm">Video Info</h1>
<h1 class="text-sm font-semibold text-pm">Video Info</h1>
</div>
<button class="text-xs text-pm-accent hover:text-pm-accent transition-colors" onclick="navigator.clipboard.writeText('${videoUrl}').then(() => this.textContent = '✓ Copied!'); setTimeout(() => this.textContent = '📋 COPY URL', 1000)">
📋 COPY URL
@@ -636,7 +636,7 @@
</div>
<!-- Video info content -->
<div id="video-info-content" class="flex-1 overflow-y-auto p-4 space-y-6">
<div id="video-info-content" class="flex-1 overflow-y-auto p-4 space-y-3">
<!-- Video details will be loaded here -->
</div>
</div>
@@ -1295,7 +1295,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `fixed top-4 right-4 px-6 py-4 rounded-pm-md shadow-pm z-[20000] transition-all duration-300 transform translate-x-full`;
notification.className = `fixed top-4 right-4 px-4 py-2 rounded-pm-md shadow-pm text-sm z-[20000] transition-all duration-300 transform translate-x-full`;
const colors = {
success: "bg-pm-success text-pm",
@@ -2138,7 +2138,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
scanStatus.classList.add('hidden');
if (duplicates.length === 0) {
list.innerHTML = '<div class="text-center py-8 text-pm-secondary">No duplicate images found! 🎉</div>';
list.innerHTML = '<div class="text-center py-4 text-pm-secondary">No duplicate images found! 🎉</div>';
content.classList.remove('hidden');
return;
}
@@ -2396,15 +2396,15 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
modal.innerHTML = `
<div class="bg-pm-surface rounded-pm-md max-w-2xl w-full mx-4 border border-pm">
<div class="p-6">
<h3 class="text-xl font-semibold text-pm mb-4 flex items-center">
<div class="p-4">
<h3 class="text-sm font-semibold text-pm mb-3 flex items-center">
<span class="mr-2">🚀</span>
Generate Thumbnails?
</h3>
<p class="text-pm-secondary mb-4">
Found ${missingCount} images without thumbnails (${imageCount} total images). Would you like to generate thumbnails for faster loading?
</p>
<p class="text-sm text-pm-muted mb-6">
<p class="text-sm text-pm-muted mb-3">
💡 Thumbnails speed up gallery loading significantly. You can change this setting in Gallery Settings.
</p>
<div class="flex space-x-3">
@@ -2443,8 +2443,8 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
// Transform the modal to show progress
const modalContent = modal.querySelector('.bg-pm-surface');
modalContent.innerHTML = `
<div class="p-6">
<h3 class="text-xl font-semibold text-pm mb-4 flex items-center">
<div class="p-4">
<h3 class="text-sm font-semibold text-pm mb-3 flex items-center">
<span class="mr-2">🚀</span>
Generating Thumbnails
</h3>
@@ -2453,7 +2453,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
</p>
<!-- Progress Section -->
<div class="mb-6">
<div class="mb-3">
<div class="flex items-center justify-between text-sm text-pm-secondary mb-2">
<span id="modalProgressText">Initializing...</span>
<span id="modalProgressPercent">0%</span>
@@ -3451,7 +3451,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
};
const notification = document.createElement('div');
notification.className = `fixed bottom-4 right-4 ${colors[type]} text-pm px-6 py-3 rounded-pm-md shadow-pm z-50 animate-fade-in`;
notification.className = `fixed bottom-4 right-4 ${colors[type]} text-pm px-4 py-2 rounded-pm-md shadow-pm text-sm z-50 animate-fade-in`;
notification.textContent = message;
document.body.appendChild(notification);
web/js/tags-page.js
+5 -5
View File
@@ -134,7 +134,7 @@ class TagsPageManager {
if (container) {
container.replaceChildren();
const errDiv = document.createElement('div');
errDiv.className = 'text-center py-8 text-pm-error text-sm';
errDiv.className = 'text-center py-4 text-pm-error text-sm';
errDiv.textContent = 'Failed to load tags. Try refreshing.';
container.appendChild(errDiv);
}
@@ -594,7 +594,7 @@ class TagsPageManager {
if (grid) {
grid.replaceChildren();
const spinner = document.createElement('div');
spinner.className = 'col-span-full text-center py-8';
spinner.className = 'col-span-full text-center py-4';
const spinEl = document.createElement('div');
spinEl.className = 'w-8 h-8 border-2 border-pm-success/30 border-t-pm-success rounded-full animate-spin mx-auto';
spinner.appendChild(spinEl);
@@ -638,7 +638,7 @@ class TagsPageManager {
if (grid) {
grid.replaceChildren();
const errDiv = document.createElement('div');
errDiv.className = 'col-span-full text-center py-8 text-pm-error';
errDiv.className = 'col-span-full text-center py-4 text-pm-error';
errDiv.textContent = 'Failed to load prompts';
grid.appendChild(errDiv);
}
@@ -752,9 +752,9 @@ class TagsPageManager {
if (this.prompts.length === 0) {
grid.replaceChildren();
const emptyDiv = document.createElement('div');
emptyDiv.className = 'col-span-full text-center py-12 text-pm-muted';
emptyDiv.className = 'col-span-full text-center py-6 text-pm-muted';
const icon = document.createElement('span');
icon.className = 'text-3xl block mb-2';
icon.className = 'text-lg block mb-2';
icon.textContent = '\uD83D\uDCED';
emptyDiv.appendChild(icon);
const msg = document.createElement('span');
web/metadata.html
+3 -3
View File
@@ -601,7 +601,7 @@ Seed: ${currentWorkflowData.seed || 'Unknown'}`;
<svg class="w-16 h-16 mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
</svg>
<p class="text-lg mb-2">Drag & Drop PNG with ComfyUI Workflow</p>
<p class="text-sm mb-2">Drag & Drop PNG with ComfyUI Workflow</p>
<p class="text-sm">Or click to browse files</p>
</div>
@@ -638,7 +638,7 @@ Seed: ${currentWorkflowData.seed || 'Unknown'}`;
<svg class="w-5 h-5 text-pm-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<h1 class="text-lg font-medium text-pm">Generation data</h1>
<h1 class="text-sm font-semibold text-pm">Generation data</h1>
</div>
<button class="text-xs text-pm-accent hover:bg-pm-hover transition-colors" onclick="copyAllData()">
📋 COPY ALL
@@ -652,7 +652,7 @@ Seed: ${currentWorkflowData.seed || 'Unknown'}`;
<svg class="w-16 h-16 mx-auto mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<p class="text-lg mb-2">No Image Loaded</p>
<p class="text-sm mb-2">No Image Loaded</p>
<p class="text-sm">Upload a PNG with embedded ComfyUI workflow to view generation data</p>
</div>
</div>