diff --git a/Web/templates/main.html b/Web/templates/main.html
index c4156cc..2a7175d 100755
--- a/Web/templates/main.html
+++ b/Web/templates/main.html
@@ -774,8 +774,18 @@
return;
}
- const distanceToEnd = itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
- const prefetchThreshold = Math.max(260, itemsContainer.clientWidth * 1.4);
+ const styles = window.getComputedStyle(itemsContainer);
+ 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) {
return;
}
@@ -1142,6 +1152,12 @@
const itemsContainer = ensureMainItemsSentinel();
if (!itemsContainer) return;
+ const styles = window.getComputedStyle(itemsContainer);
+ const isMobileLayout =
+ window.matchMedia('(max-width: 768px)').matches ||
+ styles.display === 'grid' ||
+ styles.flexDirection === 'column';
+
if (mainItemsObserver) {
mainItemsObserver.disconnect();
mainItemsObserver = null;
@@ -1172,7 +1188,7 @@
}, {
root: itemsContainer,
threshold: 0.15,
- rootMargin: '0px 900px 0px 0px'
+ rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
});
mainItemsObserver.observe(mainItemsSentinel);
@@ -2942,6 +2958,22 @@
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 {
0% { transform: translateX(-100%); }
100% { transform: translateX(260%); }
diff --git a/Web/templates/main_admin.html b/Web/templates/main_admin.html
index cce98c4..7dbeaca 100755
--- a/Web/templates/main_admin.html
+++ b/Web/templates/main_admin.html
@@ -369,6 +369,22 @@
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 {
0% { transform: translateX(-100%); }
100% { transform: translateX(260%); }
@@ -3366,8 +3382,18 @@ document.addEventListener('DOMContentLoaded', ()=>{
return;
}
- const distanceToEnd = itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
- const prefetchThreshold = Math.max(260, itemsContainer.clientWidth * 1.4);
+ const styles = window.getComputedStyle(itemsContainer);
+ 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) {
return;
}
@@ -3729,6 +3755,12 @@ document.addEventListener('DOMContentLoaded', ()=>{
const itemsContainer = ensureMainAdminItemsSentinel();
if (!itemsContainer) return;
+ const styles = window.getComputedStyle(itemsContainer);
+ const isMobileLayout =
+ window.matchMedia('(max-width: 768px)').matches ||
+ styles.display === 'grid' ||
+ styles.flexDirection === 'column';
+
if (mainAdminItemsObserver) {
mainAdminItemsObserver.disconnect();
mainAdminItemsObserver = null;
@@ -3759,7 +3791,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
}, {
root: itemsContainer,
threshold: 0.15,
- rootMargin: '0px 900px 0px 0px'
+ rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
});
mainAdminItemsObserver.observe(mainAdminItemsSentinel);