Invario/Inventarsystem
3
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases 41 Wiki Activity

Implement dynamic page size for mobile devices and optimize rendering with content visibility

Browse Source
This commit is contained in:
AIIrondev
2026-04-19 21:43:17 +02:00
parent 3e48aa23cc
commit 1d6c722cd3
2 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/main.html
+6 -1
View File
@@ -724,7 +724,9 @@
// Add this line to define allItems globally // Add this line to define allItems globally
let allItems = []; let allItems = [];
const MAIN_ITEMS_PAGE_SIZE = 120; // Dynamic page size: scan viewport/screen size to only load the exact amount needed.
const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
const MAIN_ITEMS_PAGE_SIZE = isMobileDevice ? 20 : 120;
let mainItemsNextOffset = 0; let mainItemsNextOffset = 0;
let mainItemsHasMore = false; let mainItemsHasMore = false;
let mainItemsLoadingMore = false; let mainItemsLoadingMore = false;
@@ -3562,6 +3564,9 @@
margin: 0 !important; margin: 0 !important;
padding: 15px !important; padding: 15px !important;
scroll-snap-align: none !important; scroll-snap-align: none !important;
/* Only render when user looks at it (content-visibility virtualizes the DOM) */
content-visibility: auto;
contain-intrinsic-size: auto 300px;
} }
.item-card:hover { .item-card:hover {
Web/templates/main_admin.html
+6 -1
View File
@@ -1612,6 +1612,9 @@
margin: 0 !important; margin: 0 !important;
padding: 15px !important; padding: 15px !important;
scroll-snap-align: none !important; scroll-snap-align: none !important;
/* Only render when user looks at it (content-visibility virtualizes the DOM) */
content-visibility: auto;
contain-intrinsic-size: auto 300px;
} }
.item-card:hover { .item-card:hover {
@@ -3339,7 +3342,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
}); });
// Function to load items from server // Function to load items from server
const MAIN_ADMIN_ITEMS_PAGE_SIZE = 120; // Dynamic page size: scan viewport/screen size to only load the exact amount needed.
const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
const MAIN_ADMIN_ITEMS_PAGE_SIZE = isMobileDevice ? 20 : 120;
let mainAdminItemsNextOffset = 0; let mainAdminItemsNextOffset = 0;
let mainAdminItemsHasMore = false; let mainAdminItemsHasMore = false;
let mainAdminItemsLoadingMore = false; let mainAdminItemsLoadingMore = false;