new translation fix and some overall imrpovement to how the tournament and league workflow works.

2025-11-10 15:04:09 +01:00
parent 1e709e0248
commit 21bd6b74d2
23 changed files with 5855 additions and 1508 deletions
@@ -4,7 +4,13 @@
  <meta charset="UTF-8" />
  <title data-i18n="mobile.camera_streams">📱 Camera Streams</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, viewport-fit=cover">
+  <link rel="stylesheet" href="/static/css/base.css">
+  <link rel="stylesheet" href="/static/css/navbar.css">
+  <link rel="stylesheet" href="/static/css/buttons.css">
+  <link rel="stylesheet" href="/static/css/components.css">
+  <link rel="stylesheet" href="/static/css/responsive.css">
  <style>
+    /* Mobile streams specific styles */
    * {
      box-sizing: border-box;
    }
@@ -211,6 +217,11 @@
      text-align: center;
    }

+    /* Style for unavailable/empty streams - grey out the camera title */
+    .camera-option .stream-preview.unavailable ~ .camera-info .camera-title {
+      color: #999;
+    }
+
    @media (orientation: portrait) {
      .camera-info {
        padding: 10px 12px;
@@ -358,6 +369,7 @@
      margin-left: 5px;
    }
  </style>
+  <script src="/static/js/i18n.js"></script>
 </head>
 <body>
  <div class="mobile-navbar">
@@ -408,7 +420,12 @@

  <script>
    function handleStreamError(img, cameraId) {
-      const loadingIndicator = img.parentElement.querySelector('.stream-loading');
+      const streamPreview = img.parentElement;
+      const loadingIndicator = streamPreview.querySelector('.stream-loading');
+
+      // Add unavailable class to stream-preview
+      streamPreview.classList.add('unavailable');
+
      if (loadingIndicator) {
        loadingIndicator.textContent = 'Unavailable';
        loadingIndicator.style.color = '#ff6b6b';
@@ -595,20 +612,5 @@
      }
    });
  </script>
-
-  <!-- Internationalization Support -->
-  <script src="/static/js/i18n.js"></script>
-  <script>
-    // Initialize translations with server data
-    if (typeof {{ translations|tojson }} !== 'undefined') {
-        currentTranslations = {{ translations|tojson }};
-        currentLanguage = '{{ current_language }}';
-
-        // Apply translations when DOM is ready
-        document.addEventListener('DOMContentLoaded', function() {
-            translatePage();
-        });
-    }
-  </script>
 </body>
 </html>