feat: add version name display to model cards in ModelCard.js and style it in card.css. Fixes #287

This commit is contained in:
Will Miao
2025-07-28 16:36:23 +08:00
parent f33d5745b3
commit c1d9b5137a
2 changed files with 28 additions and 0 deletions

View File

@@ -424,6 +424,33 @@
font-size: 0.85em;
}
/* Style for version name */
.version-name {
display: inline-block;
color: rgba(255,255,255,0.8); /* Muted white */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
font-size: 0.85em;
word-break: break-word;
overflow: hidden;
line-height: 1.4;
margin-top: 2px;
opacity: 0.8; /* Slightly transparent for better readability */
border: 1px solid rgba(255,255,255,0.25); /* Subtle border */
border-radius: var(--border-radius-xs);
padding: 1px 6px;
background: rgba(0,0,0,0.18); /* Optional: subtle background for contrast */
}
/* Medium density adjustments for version name */
.medium-density .version-name {
font-size: 0.8em;
}
/* Compact density adjustments for version name */
.compact-density .version-name {
font-size: 0.75em;
}
/* Prevent text selection on cards and interactive elements */
.model-card,
.model-card *,

View File

@@ -482,6 +482,7 @@ export function createModelCard(model, modelType) {
<div class="card-footer">
<div class="model-info">
<span class="model-name">${model.model_name}</span>
${model.civitai?.name ? `<span class="version-name">${model.civitai.name}</span>` : ''}
</div>
<div class="card-actions">
<i class="fas fa-folder-open"