alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-24 06:32:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

Add container padding properties to VirtualScroller and adjust card padding

Browse Source
This commit is contained in:
Will Miao
2025-05-22 15:23:32 +08:00
parent b9c9d602de
commit d3bf8eaceb
3 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/components/card.css
View File

@@ -466,7 +466,7 @@
display: block; display: block;
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: 6px 0; /* Add top/bottom padding equivalent to card padding */ padding: 4px 0; /* Add top/bottom padding equivalent to card padding */
height: auto; height: auto;
width: 100%; width: 100%;
max-width: 1400px; /* Keep the max-width from original grid */ max-width: 1400px; /* Keep the max-width from original grid */

16
static/js/utils/VirtualScroller.js
View File

@@ -15,6 +15,10 @@ export class VirtualScroller {
this.itemAspectRatio = 896/1152; // Aspect ratio of cards this.itemAspectRatio = 896/1152; // Aspect ratio of cards
this.rowGap = options.rowGap || 20; // Add vertical gap between rows (default 20px) this.rowGap = options.rowGap || 20; // Add vertical gap between rows (default 20px)
// Add container padding properties
this.containerPaddingTop = options.containerPaddingTop || 4; // Default top padding from CSS
this.containerPaddingBottom = options.containerPaddingBottom || 4; // Default bottom padding from CSS
// Add data windowing enable/disable flag // Add data windowing enable/disable flag
this.enableDataWindowing = options.enableDataWindowing !== undefined ? options.enableDataWindowing : false; this.enableDataWindowing = options.enableDataWindowing !== undefined ? options.enableDataWindowing : false;
@@ -74,6 +78,10 @@ export class VirtualScroller {
this.gridElement.style.position = 'relative'; this.gridElement.style.position = 'relative';
this.gridElement.style.minHeight = '0'; this.gridElement.style.minHeight = '0';
// Apply padding directly to ensure consistency
this.gridElement.style.paddingTop = `${this.containerPaddingTop}px`;
this.gridElement.style.paddingBottom = `${this.containerPaddingBottom}px`;
// Place the spacer inside the grid container // Place the spacer inside the grid container
this.gridElement.appendChild(this.spacerElement); this.gridElement.appendChild(this.spacerElement);
} }
@@ -336,8 +344,11 @@ export class VirtualScroller {
// Add row gaps to the total height calculation // Add row gaps to the total height calculation
const totalHeight = totalRows * this.itemHeight + (totalRows - 1) * this.rowGap; const totalHeight = totalRows * this.itemHeight + (totalRows - 1) * this.rowGap;
// Include container padding in the total height
const spacerHeight = totalHeight + this.containerPaddingTop + this.containerPaddingBottom;
// Update spacer height to represent all items // Update spacer height to represent all items
this.spacerElement.style.height = `${totalHeight}px`; this.spacerElement.style.height = `${spacerHeight}px`;
} }
getVisibleRange() { getVisibleRange() {
@@ -465,7 +476,8 @@ export class VirtualScroller {
const col = index % this.columnsCount; const col = index % this.columnsCount;
// Calculate precise positions with row gap included // Calculate precise positions with row gap included
const topPos = row * (this.itemHeight + this.rowGap); // Add the top padding to account for container padding
const topPos = this.containerPaddingTop + (row * (this.itemHeight + this.rowGap));
// Position correctly with leftOffset (no need to add padding as absolute // Position correctly with leftOffset (no need to add padding as absolute
// positioning is already relative to the padding edge of the container) // positioning is already relative to the padding edge of the container)

2
static/js/utils/infiniteScroll.js
View File

@@ -122,6 +122,8 @@ async function initializeVirtualScroll(pageType) {
fetchItemsFn: fetchDataFn, fetchItemsFn: fetchDataFn,
pageSize: 100, pageSize: 100,
rowGap: 20, rowGap: 20,
containerPaddingTop: 4,
containerPaddingBottom: 4,
enableDataWindowing: false // Explicitly set to false to disable data windowing enableDataWindowing: false // Explicitly set to false to disable data windowing
}); });