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 @@ Theme - +