From 46abc7796405a861e1abf51c38f6c5592d7c9162 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Thu, 30 Jan 2025 18:43:28 +0800
Subject: [PATCH] Refactor folder filtering logic and update responsive grid
layout in CSS
---
static/css/style.css | 2 +-
static/js/script.js | 13 ++++++++-----
templates/loras.html | 2 +-
3 files changed, 10 insertions(+), 7 deletions(-)
diff --git a/static/css/style.css b/static/css/style.css
index 6a77e490..91ddaa16 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -107,7 +107,7 @@ body {
/* Responsive adjustments */
@media (max-width: 1400px) {
.card-grid {
- grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.lora-card {
diff --git a/static/js/script.js b/static/js/script.js
index b39b0440..6f51a179 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -53,13 +53,16 @@ async function refreshLoras() {
// Re-apply current sorting
sortCards(currentSort);
- // Re-apply current folder filter if any
- if (activeFolder) {
+ // Modified folder filtering logic
+ if (activeFolder !== undefined) { // Check if there's an active folder
document.querySelectorAll('.lora-card').forEach(card => {
- if (card.getAttribute('data-folder') === activeFolder) {
- card.style.display = '';
+ const cardFolder = card.getAttribute('data-folder');
+ // For empty folder (root directory), only show cards with empty folder path
+ if (activeFolder === '') {
+ card.style.display = cardFolder === '' ? '' : 'none';
} else {
- card.style.display = 'none';
+ // For other folders, show cards matching the folder path
+ card.style.display = cardFolder === activeFolder ? '' : 'none';
}
});
}
diff --git a/templates/loras.html b/templates/loras.html
index 64f60830..2597ce0b 100644
--- a/templates/loras.html
+++ b/templates/loras.html
@@ -14,7 +14,7 @@
-
+