diff --git a/static/css/components/card.css b/static/css/components/card.css
index 4d7a4096..7555fc21 100644
--- a/static/css/components/card.css
+++ b/static/css/components/card.css
@@ -84,6 +84,26 @@
min-height: 0; /* Fix for potential flexbox sizing issue in Firefox */
}
+/* Smaller text for compact mode */
+.compact-mode .model-name {
+ font-size: 0.9em;
+ max-height: 2.4em;
+}
+
+.compact-mode .base-model-label {
+ font-size: 0.8em;
+ max-width: 110px;
+}
+
+.compact-mode .card-actions i {
+ font-size: 0.95em;
+ padding: 3px;
+}
+
+.compact-mode .model-info {
+ padding-bottom: 2px;
+}
+
.card-preview img,
.card-preview video {
width: 100%;
diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index 09e3e12b..1661229d 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -672,4 +672,14 @@ input:checked + .toggle-slider:before {
.changelog-item a:hover {
text-decoration: underline;
+}
+
+/* Add warning text style for settings */
+.warning-text {
+ color: var(--lora-warning, #e67e22);
+ font-weight: 500;
+}
+
+[data-theme="dark"] .warning-text {
+ color: var(--lora-warning, #f39c12);
}
\ No newline at end of file
diff --git a/static/js/managers/SettingsManager.js b/static/js/managers/SettingsManager.js
index 8bfdf9c8..e3b8c299 100644
--- a/static/js/managers/SettingsManager.js
+++ b/static/js/managers/SettingsManager.js
@@ -26,6 +26,11 @@ export class SettingsManager {
if (savedSettings) {
state.global.settings = { ...state.global.settings, ...savedSettings };
}
+
+ // Initialize default values for new settings if they don't exist
+ if (state.global.settings.compactMode === undefined) {
+ state.global.settings.compactMode = false;
+ }
}
initialize() {
@@ -76,6 +81,12 @@ export class SettingsManager {
if (autoplayOnHoverCheckbox) {
autoplayOnHoverCheckbox.checked = state.global.settings.autoplayOnHover || false;
}
+
+ // Set compact mode setting
+ const compactModeCheckbox = document.getElementById('compactMode');
+ if (compactModeCheckbox) {
+ compactModeCheckbox.checked = state.global.settings.compactMode || false;
+ }
// Load default lora root
await this.loadLoraRoots();
@@ -149,6 +160,8 @@ export class SettingsManager {
state.global.settings.autoplayOnHover = value;
} else if (settingKey === 'optimize_example_images') {
state.global.settings.optimizeExampleImages = value;
+ } else if (settingKey === 'compact_mode') {
+ state.global.settings.compactMode = value;
} else {
// For any other settings that might be added in the future
state.global.settings[settingKey] = value;
@@ -185,6 +198,12 @@ export class SettingsManager {
this.reloadContent();
}
+ // Recalculate layout when compact mode changes
+ if (settingKey === 'compact_mode' && state.virtualScroller) {
+ state.virtualScroller.calculateLayout();
+ showToast(`Compact Mode ${value ? 'enabled' : 'disabled'}`, 'success');
+ }
+
} catch (error) {
showToast('Failed to save setting: ' + error.message, 'error');
}
diff --git a/static/js/utils/VirtualScroller.js b/static/js/utils/VirtualScroller.js
index 9efc88a3..2c1372be 100644
--- a/static/js/utils/VirtualScroller.js
+++ b/static/js/utils/VirtualScroller.js
@@ -88,26 +88,42 @@ export class VirtualScroller {
// Calculate available content width (excluding padding)
const availableContentWidth = containerWidth - paddingLeft - paddingRight;
- // Calculate ideal card width based on breakpoints
- let baseCardWidth = 260; // Default for 1080p
-
- // Adjust card width based on screen width
+ // Get compact mode setting
+ const compactMode = state.global.settings?.compactMode || false;
+
+ // Set exact column counts and grid widths to match CSS container widths
+ let maxColumns, maxGridWidth;
+
+ // Match exact column counts and CSS container width values
if (window.innerWidth >= 3000) { // 4K
- baseCardWidth = 280;
+ maxColumns = compactMode ? 10 : 8;
+ maxGridWidth = 2400; // Match exact CSS container width for 4K
} else if (window.innerWidth >= 2000) { // 2K/1440p
- baseCardWidth = 270;
+ maxColumns = compactMode ? 8 : 6;
+ maxGridWidth = 1800; // Match exact CSS container width for 2K
+ } else {
+ // 1080p
+ maxColumns = compactMode ? 7 : 5;
+ maxGridWidth = 1400; // Match exact CSS container width for 1080p
}
-
- // Calculate how many columns can fit
- const maxGridWidth = window.innerWidth >= 3000 ? 2400 : // 4K
- window.innerWidth >= 2000 ? 1800 : // 2K
- 1400; // 1080p
+
+ // Calculate baseCardWidth based on desired column count and available space
+ // Formula: (maxGridWidth - (columns-1)*gap) / columns
+ const baseCardWidth = (maxGridWidth - ((maxColumns - 1) * this.columnGap)) / maxColumns;
// Use the smaller of available content width or max grid width
const actualGridWidth = Math.min(availableContentWidth, maxGridWidth);
- // Calculate column count based on available width and card width
- this.columnsCount = Math.max(1, Math.floor((actualGridWidth + this.columnGap) / (baseCardWidth + this.columnGap)));
+ // Set exact column count based on screen size and mode
+ this.columnsCount = maxColumns;
+
+ // When available width is smaller than maxGridWidth, recalculate columns
+ if (availableContentWidth < maxGridWidth) {
+ // Calculate how many columns can fit in the available space
+ this.columnsCount = Math.max(1, Math.floor(
+ (availableContentWidth + this.columnGap) / (baseCardWidth + this.columnGap)
+ ));
+ }
// Calculate actual item width
this.itemWidth = (actualGridWidth - (this.columnsCount - 1) * this.columnGap) / this.columnsCount;
@@ -129,12 +145,22 @@ export class VirtualScroller {
leftOffset: this.leftOffset,
paddingLeft,
paddingRight,
- rowGap: this.rowGap // Log row gap for debugging
+ compactMode,
+ maxColumns,
+ baseCardWidth,
+ rowGap: this.rowGap
});
// Update grid element max-width to match available width
this.gridElement.style.maxWidth = `${actualGridWidth}px`;
+ // Add or remove compact-mode class for style adjustments
+ if (compactMode) {
+ this.gridElement.classList.add('compact-mode');
+ } else {
+ this.gridElement.classList.remove('compact-mode');
+ }
+
// Update spacer height
this.updateSpacerHeight();
diff --git a/templates/components/modals.html b/templates/components/modals.html
index d046a27d..773df854 100644
--- a/templates/components/modals.html
+++ b/templates/components/modals.html
@@ -154,6 +154,29 @@
+
+
+
Layout Settings
+
+
+
+
+
+
+
+
+
+
+
+ Display more cards per row (7 on 1080p, 8 on 2K, 10 on 4K). Warning: May cause performance issues (lag and lower FPS) on systems with limited resources.
+