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

Web/app.py

@@ -7060,9 +7060,7 @@ def register():
             
             permission_preset = (request.form.get('permission_preset') or 'standard_user').strip()
             use_custom_permissions = request.form.get('use_custom_permissions') == 'on'
-            is_student = bool(request.form.get('is_student')) if cfg.STUDENT_CARDS_MODULE_ENABLED else False
-            student_card_id = us.normalize_student_card_id(request.form.get('student_card_id')) if cfg.STUDENT_CARDS_MODULE_ENABLED else ''
-            max_borrow_days_raw = request.form.get('max_borrow_days') if cfg.STUDENT_CARDS_MODULE_ENABLED else None
+            
             if not username or not password or not name or not last_name:
                 flash('Bitte füllen Sie alle Felder aus', 'error')
                 return redirect(url_for('register'))
@@ -7081,28 +7079,14 @@ def register():
                 for endpoint_name, _ in PERMISSION_PAGE_OPTIONS:
                     page_permissions[endpoint_name] = request.form.get(f'page_{endpoint_name}') == 'on'
 
-            max_borrow_days = None
-            if is_student:
-                if not student_card_id:
-                    flash('Für Schüler muss eine Ausweis-ID angegeben werden.', 'error')
-                    return redirect(url_for('register'))
-                if us.student_card_exists(student_card_id):
-                    flash('Die Ausweis-ID ist bereits vergeben.', 'error')
-                    return redirect(url_for('register'))
-                try:
-                    max_borrow_days = int(max_borrow_days_raw) if max_borrow_days_raw else cfg.STUDENT_DEFAULT_BORROW_DAYS
-                except (TypeError, ValueError):
-                    max_borrow_days = cfg.STUDENT_DEFAULT_BORROW_DAYS
-                max_borrow_days = max(1, min(max_borrow_days, cfg.STUDENT_MAX_BORROW_DAYS))
-
             us.add_user(
                 username,
                 password,
                 name,
                 last_name,
-                is_student=is_student,
-                student_card_id=student_card_id if is_student else None,
-                max_borrow_days=max_borrow_days,
+                is_student=False,
+                student_card_id=None,
+                max_borrow_days=None,
                 permission_preset=permission_preset,
                 action_permissions=action_permissions,
                 page_permissions=page_permissions,

Web/flask.log

@@ -0,0 +1 @@
+[2026-04-19 20:20:39,502] ERROR in app: Error during scheduler shutdown: name '__file__' is not defined

Web/static/manifest.json

@@ -1,134 +1,23 @@
 {
-  "name": "Inventarsystem",
-  "short_name": "Inventar",
-  "description": "Verwaltungssystem für Schulinventare mit Ausleihmanagement",
+  "name": "Ausleihsystem",
+  "short_name": "Ausleihe",
+  "description": "System zur Verwaltung von Ausleihen",
   "start_url": "/",
-  "scope": "/",
   "display": "standalone",
-  "orientation": "portrait-primary",
   "background_color": "#ffffff",
-  "theme_color": "#007bff",
-  "dir": "ltr",
-  "lang": "de-DE",
-  "prefer_related_applications": false,
-  "related_applications": [],
+  "theme_color": "#1f2937",
   "icons": [
     {
-      "src": "/static/img/logo-72x72.png",
-      "sizes": "72x72",
+      "src": "/static/img/icon-192.png",
       "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-128x128.png",
-      "sizes": "128x128",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-152x152.png",
-      "sizes": "152x152",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-192x192.png",
       "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any"
+      "purpose": "any maskable"
     },
     {
-      "src": "/static/img/logo-384x384.png",
-      "sizes": "384x384",
+      "src": "/static/img/icon-512.png",
       "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-512x512.png",
       "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/static/img/logo-192x192-maskable.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "/static/img/logo-512x512-maskable.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
+      "purpose": "any maskable"
     }
-  ],
-  "screenshots": [
-    {
-      "src": "/static/img/screenshot-540x720.png",
-      "sizes": "540x720",
-      "type": "image/png",
-      "form_factor": "narrow"
-    },
-    {
-      "src": "/static/img/screenshot-1280x720.png",
-      "sizes": "1280x720",
-      "type": "image/png",
-      "form_factor": "wide"
-    }
-  ],
-  "categories": ["education", "productivity"],
-  "shortcuts": [
-    {
-      "name": "Meine Ausleihungen",
-      "short_name": "Ausleihungen",
-      "description": "Zeige meine aktuellen Ausleihungen",
-      "url": "/my_borrowed_items",
-      "icons": [
-        {
-          "src": "/static/img/shortcut-96x96.png",
-          "sizes": "96x96"
-        }
-      ]
-    },
-    {
-      "name": "Kalender",
-      "short_name": "Kalender",
-      "description": "Kalender für Ausleihplanungen",
-      "url": "/terminplan",
-      "icons": [
-        {
-          "src": "/static/img/shortcut-96x96.png",
-          "sizes": "96x96"
-        }
-      ]
-    }
-  ],
-  "share_target": {
-    "action": "/share",
-    "method": "POST",
-    "enctype": "multipart/form-data",
-    "params": {
-      "title": "title",
-      "text": "text",
-      "url": "url",
-      "files": [
-        {
-          "name": "media",
-          "accept": ["image/*", "video/*"]
-        }
-      ]
-    }
-  }
+  ]
 }

Web/static/sw.js

@@ -0,0 +1,18 @@
+const CACHE_NAME = 'ausleihe-cache-v1';
+
+self.addEventListener('install', (event) => {
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(clients.claim());
+});
+
+self.addEventListener('fetch', (event) => {
+    // Einfacher Fallback aufs Netzwerk (Offline-Seite könnte hier ergänzt werden)
+    event.respondWith(
+        fetch(event.request).catch(() => {
+            return caches.match(event.request);
+        })
+    );
+});

Web/templates/main.html

@@ -724,7 +724,9 @@
     // Add this line to define allItems globally
     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 mainItemsHasMore = false;
     let mainItemsLoadingMore = false;
@@ -781,10 +783,10 @@
             styles.flexDirection === 'column';
 
         const distanceToEnd = isMobileLayout
-            ? itemsContainer.scrollHeight - (itemsContainer.scrollTop + itemsContainer.clientHeight)
+            ? Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - (window.scrollY + window.innerHeight)
             : itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
         const prefetchThreshold = isMobileLayout
-            ? Math.max(220, itemsContainer.clientHeight * 0.9)
+            ? window.innerHeight * 1.5
             : Math.max(260, itemsContainer.clientWidth * 1.4);
         if (distanceToEnd > prefetchThreshold) {
             return;
@@ -1167,6 +1169,7 @@
 
         if (!mainItemsScrollPrefetchBound) {
             itemsContainer.addEventListener('scroll', maybePrefetchMainItems, { passive: true });
+            window.addEventListener('scroll', maybePrefetchMainItems, { passive: true });
             mainItemsScrollPrefetchBound = true;
         }
 
@@ -1188,7 +1191,7 @@
                 updateMainItemsLoadingIndicator();
             });
         }, {
-            root: itemsContainer,
+            root: isMobileLayout ? null : itemsContainer,
             threshold: 0.15,
             rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
         });
@@ -3561,6 +3564,9 @@
             margin: 0 !important;
             padding: 15px !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 {

Web/templates/main_admin.html

@@ -1612,6 +1612,9 @@
             margin: 0 !important;
             padding: 15px !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 {
@@ -3339,7 +3342,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
     });
 
     // 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 mainAdminItemsHasMore = false;
     let mainAdminItemsLoadingMore = false;
@@ -3397,10 +3402,10 @@ document.addEventListener('DOMContentLoaded', ()=>{
             styles.flexDirection === 'column';
 
         const distanceToEnd = isMobileLayout
-            ? itemsContainer.scrollHeight - (itemsContainer.scrollTop + itemsContainer.clientHeight)
+            ? Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - (window.scrollY + window.innerHeight)
             : itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
         const prefetchThreshold = isMobileLayout
-            ? Math.max(220, itemsContainer.clientHeight * 0.9)
+            ? window.innerHeight * 1.5
             : Math.max(260, itemsContainer.clientWidth * 1.4);
         if (distanceToEnd > prefetchThreshold) {
             return;
@@ -3772,6 +3777,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
         if (!mainAdminItemsScrollPrefetchBound) {
             itemsContainer.addEventListener('scroll', maybePrefetchMainAdminItems, { passive: true });
+            window.addEventListener('scroll', maybePrefetchMainAdminItems, { passive: true });
             mainAdminItemsScrollPrefetchBound = true;
         }
 
@@ -3793,7 +3799,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 updateMainAdminItemsLoadingIndicator();
             });
         }, {
-            root: itemsContainer,
+            root: isMobileLayout ? null : itemsContainer,
             threshold: 0.15,
             rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
         });

Web/templates/register.html

@@ -70,27 +70,6 @@
                     </div>
                 </div>
 
-                {% if student_cards_module_enabled %}
-                <div class="form-group">
-                    <label style="display:flex; align-items:center; gap:8px; color:#1f2937;">
-                        <input type="checkbox" id="is-student" name="is_student" style="width:auto;">
-                        Schülerkonto mit Ausweis
-                    </label>
-                    <div id="student-fields" style="display:none; margin-top:10px;">
-                        <label for="student-card-id">Ausweis-ID</label>
-                        <div class="input-container">
-                            <span class="input-icon">🪪</span>
-                            <input type="text" id="student-card-id" name="student_card_id" placeholder="z.B. S-2026-001">
-                        </div>
-                        <label for="max-borrow-days" style="margin-top:10px;">Standard-Ausleihdauer (Tage)</label>
-                        <div class="input-container">
-                            <span class="input-icon">📅</span>
-                            <input type="number" id="max-borrow-days" name="max_borrow_days" min="1" max="{{ student_max_borrow_days }}" value="{{ student_default_borrow_days }}">
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
-
                 <div class="form-group">
                     <label for="permission-preset">Berechtigungs-Preset</label>
                     <select id="permission-preset" name="permission_preset" class="form-select">
@@ -561,25 +540,6 @@ document.addEventListener('DOMContentLoaded', function () {
         passwordInput.addEventListener('blur', updatePasswordRules);
         updatePasswordRules();
     }
-
-    {% if student_cards_module_enabled %}
-    const studentCheckbox = document.getElementById('is-student');
-    const studentFields = document.getElementById('student-fields');
-    const studentCardInput = document.getElementById('student-card-id');
-
-    if (!studentCheckbox || !studentFields || !studentCardInput) {
-        return;
-    }
-
-    function toggleStudentFields() {
-        const isChecked = studentCheckbox.checked;
-        studentFields.style.display = isChecked ? 'block' : 'none';
-        studentCardInput.required = isChecked;
-    }
-
-    studentCheckbox.addEventListener('change', toggleStudentFields);
-    toggleStudentFields();
-    {% endif %}
 });
 </script>
 {% endblock %}

flask.pid

@@ -0,0 +1 @@
+394722