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

feat: Improve mobile layout handling for item loading indicators and prefetching logic

Browse Source
This commit is contained in:
AIIrondev
2026-04-17 19:05:34 +02:00
parent 09cea7a0f8
commit 7f1d616bb3
2 changed files with 70 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/main.html
+35 -3
View File
@@ -774,8 +774,18 @@
return; return;
} }
const distanceToEnd = itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth); const styles = window.getComputedStyle(itemsContainer);
const prefetchThreshold = Math.max(260, itemsContainer.clientWidth * 1.4); const isMobileLayout =
window.matchMedia('(max-width: 768px)').matches ||
styles.display === 'grid' ||
styles.flexDirection === 'column';
const distanceToEnd = isMobileLayout
? itemsContainer.scrollHeight - (itemsContainer.scrollTop + itemsContainer.clientHeight)
: itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
const prefetchThreshold = isMobileLayout
? Math.max(220, itemsContainer.clientHeight * 0.9)
: Math.max(260, itemsContainer.clientWidth * 1.4);
if (distanceToEnd > prefetchThreshold) { if (distanceToEnd > prefetchThreshold) {
return; return;
} }
@@ -1142,6 +1152,12 @@
const itemsContainer = ensureMainItemsSentinel(); const itemsContainer = ensureMainItemsSentinel();
if (!itemsContainer) return; if (!itemsContainer) return;
const styles = window.getComputedStyle(itemsContainer);
const isMobileLayout =
window.matchMedia('(max-width: 768px)').matches ||
styles.display === 'grid' ||
styles.flexDirection === 'column';
if (mainItemsObserver) { if (mainItemsObserver) {
mainItemsObserver.disconnect(); mainItemsObserver.disconnect();
mainItemsObserver = null; mainItemsObserver = null;
@@ -1172,7 +1188,7 @@
}, { }, {
root: itemsContainer, root: itemsContainer,
threshold: 0.15, threshold: 0.15,
rootMargin: '0px 900px 0px 0px' rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
}); });
mainItemsObserver.observe(mainItemsSentinel); mainItemsObserver.observe(mainItemsSentinel);
@@ -2942,6 +2958,22 @@
animation: items-loader-slide 1.05s ease-in-out infinite; animation: items-loader-slide 1.05s ease-in-out infinite;
} }
@media (max-width: 768px) {
.items-loading-indicator {
width: 100%;
min-width: 0;
max-width: none;
min-height: 120px;
height: auto;
padding: 14px 10px;
scroll-snap-align: none;
}
.items-loading-indicator .loading-track {
width: min(240px, 82%);
}
}
@keyframes items-loader-slide { @keyframes items-loader-slide {
0% { transform: translateX(-100%); } 0% { transform: translateX(-100%); }
100% { transform: translateX(260%); } 100% { transform: translateX(260%); }
Web/templates/main_admin.html
+35 -3
View File
@@ -369,6 +369,22 @@
animation: items-loader-slide 1.05s ease-in-out infinite; animation: items-loader-slide 1.05s ease-in-out infinite;
} }
@media (max-width: 768px) {
.items-loading-indicator {
width: 100%;
min-width: 0;
max-width: none;
min-height: 120px;
height: auto;
padding: 14px 10px;
scroll-snap-align: none;
}
.items-loading-indicator .loading-track {
width: min(240px, 82%);
}
}
@keyframes items-loader-slide { @keyframes items-loader-slide {
0% { transform: translateX(-100%); } 0% { transform: translateX(-100%); }
100% { transform: translateX(260%); } 100% { transform: translateX(260%); }
@@ -3366,8 +3382,18 @@ document.addEventListener('DOMContentLoaded', ()=>{
return; return;
} }
const distanceToEnd = itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth); const styles = window.getComputedStyle(itemsContainer);
const prefetchThreshold = Math.max(260, itemsContainer.clientWidth * 1.4); const isMobileLayout =
window.matchMedia('(max-width: 768px)').matches ||
styles.display === 'grid' ||
styles.flexDirection === 'column';
const distanceToEnd = isMobileLayout
? itemsContainer.scrollHeight - (itemsContainer.scrollTop + itemsContainer.clientHeight)
: itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
const prefetchThreshold = isMobileLayout
? Math.max(220, itemsContainer.clientHeight * 0.9)
: Math.max(260, itemsContainer.clientWidth * 1.4);
if (distanceToEnd > prefetchThreshold) { if (distanceToEnd > prefetchThreshold) {
return; return;
} }
@@ -3729,6 +3755,12 @@ document.addEventListener('DOMContentLoaded', ()=>{
const itemsContainer = ensureMainAdminItemsSentinel(); const itemsContainer = ensureMainAdminItemsSentinel();
if (!itemsContainer) return; if (!itemsContainer) return;
const styles = window.getComputedStyle(itemsContainer);
const isMobileLayout =
window.matchMedia('(max-width: 768px)').matches ||
styles.display === 'grid' ||
styles.flexDirection === 'column';
if (mainAdminItemsObserver) { if (mainAdminItemsObserver) {
mainAdminItemsObserver.disconnect(); mainAdminItemsObserver.disconnect();
mainAdminItemsObserver = null; mainAdminItemsObserver = null;
@@ -3759,7 +3791,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
}, { }, {
root: itemsContainer, root: itemsContainer,
threshold: 0.15, threshold: 0.15,
rootMargin: '0px 900px 0px 0px' rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
}); });
mainAdminItemsObserver.observe(mainAdminItemsSentinel); mainAdminItemsObserver.observe(mainAdminItemsSentinel);