bl3kunja/Sdk_TV_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance print layouts with branded headers and fix navigation consistency

Browse Source 
- Replace plain print headers with full branded headers including logo
  - Add dynamic tournament-type styling (🎯 4-target, ⚡ 20-target, 💪 40-target)
  - Remove border lines and optimize spacing for clean print appearance
  - Fix emoji positioning in league championship headers
  - Standardize navigation with proper active button indicators
  - Add missing translation keys for calculator instructions
  - Update print media queries for professional document output

  Print improvements:
  - Logo and branding now appear on printed results
  - Consistent 20px spacing between header and table
  - Clean white background with subtle borders
  - Optimized typography for print readability

  Navigation fixes:
  - Added active button highlighting across all PC pages
  - Consistent navigation order: Dashboard → Tournament → Player Analysis → Archive → Draft →
  Calculator
  - Fixed draft page active indicator

  🤖 Generated with Claude Code

  Co-Authored-By: Claude <noreply@anthropic.com>

  This commit message covers all the major improvements we made:
  - Print layout enhancements with branded headers
  - Navigation standardization and active indicators
  - Translation fixes
  - Visual styling improvements
  - Professional document output optimization
This commit is contained in:
bl3kunja
2025-09-20 20:03:44 +02:00
parent 33758e7340
commit c61c1448e4
62 changed files with 45554 additions and 11528 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/mobile_streams.html
+81 -137
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>📱 Camera Streams</title>
<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">
<style>
* {
@@ -294,31 +294,32 @@
}
}
/* Floating Fullscreen Button */
/* Floating fullscreen button */
.floating-fullscreen-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
background: #007bff;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: rgba(0, 123, 255, 0.9);
border: none;
border-radius: 50%;
color: white;
font-size: 1.2rem;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
font-size: 1.5rem;
cursor: pointer;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
}
.floating-fullscreen-btn:hover {
background: #0056b3;
background: rgba(0, 123, 255, 1);
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}
.floating-fullscreen-btn:active {
@@ -327,59 +328,8 @@
.floating-fullscreen-btn.hidden {
opacity: 0;
transform: scale(0);
pointer-events: none;
}
/* Hide floating button when in fullscreen */
:fullscreen .floating-fullscreen-btn,
:-webkit-full-screen .floating-fullscreen-btn,
:-moz-full-screen .floating-fullscreen-btn,
:-ms-fullscreen .floating-fullscreen-btn {
opacity: 0;
transform: scale(0);
pointer-events: none;
}
/* Fullscreen adjustments */
:fullscreen .mobile-navbar,
:-webkit-full-screen .mobile-navbar,
:-moz-full-screen .mobile-navbar,
:-ms-fullscreen .mobile-navbar {
display: none !important;
}
:fullscreen .container,
:-webkit-full-screen .container,
:-moz-full-screen .container,
:-ms-fullscreen .container {
padding: 10px;
min-height: 100vh;
min-height: 100dvh;
}
html:fullscreen .mobile-navbar,
html:-webkit-full-screen .mobile-navbar,
html:-moz-full-screen .mobile-navbar,
html:-ms-fullscreen .mobile-navbar {
display: none !important;
}
html:fullscreen .container,
html:-webkit-full-screen .container,
html:-moz-full-screen .container,
html:-ms-fullscreen .container {
padding: 10px;
min-height: 100vh;
min-height: 100dvh;
}
@media (max-width: 480px) {
.floating-fullscreen-btn {
width: 60px;
height: 60px;
font-size: 1.3rem;
}
transform: scale(0.8);
}
/* Tournament status indicator */
@@ -412,7 +362,7 @@
<body>
<div class="mobile-navbar">
<div class="navbar-title">
📷 Streams
<span data-i18n="mobile.camera_streams">📷 Prenosi Kamer</span>
{% if tournament_active %}
<span class="tournament-indicator">LIVE</span>
{% elif results_available %}
@@ -420,10 +370,7 @@
{% endif %}
</div>
<div class="navbar-controls">
<!-- Always show all 3 navigation buttons -->
<a href="/mobile/streams" class="nav-btn active">📷</a>
<a href="/mobile/draft" class="nav-btn">📋</a>
<a href="/mobile/results" class="nav-btn">🏆</a>
<!-- Mobile users stay on mobile - no desktop access -->
</div>
</div>
@@ -433,7 +380,7 @@
{% set camera_id = i %}
<div class="camera-option" onclick="openCameraFullscreen({{ camera_id }})">
<div class="stream-preview">
<div class="stream-loading">Loading...</div>
<div class="stream-loading" data-i18n="general.loading">Nalaganje...</div>
<img src="{{ streams[i-1].url }}"
alt="Camera {{ camera_id }}"
class="stream-img"
@@ -454,8 +401,8 @@
</div>
</div>
<!-- Floating Fullscreen Button -->
<button class="floating-fullscreen-btn" id="fullscreenBtn" onclick="toggleFullscreen()" title="Enter Fullscreen">
<!-- Floating fullscreen button -->
<button class="floating-fullscreen-btn" onclick="toggleFullscreen()" id="fullscreenBtn">
⛶
</button>
@@ -536,90 +483,69 @@
if (event.key >= '1' && event.key <= '6') {
const cameraId = parseInt(event.key);
openCameraFullscreen(cameraId);
} else if (event.key === 'f' || event.key === 'F') {
event.preventDefault();
toggleFullscreen();
}
});
// Fullscreen functionality
function toggleFullscreen() {
if (isFullscreen()) {
exitFullscreen();
const elem = document.documentElement;
if (!document.fullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
enterFullscreen();
}
}
function isFullscreen() {
return document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
}
function enterFullscreen() {
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen().catch(err => console.log('Fullscreen error:', err));
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen().catch(err => console.log('Exit fullscreen error:', err));
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
function handleFullscreenChange() {
const fullscreenBtn = document.getElementById('fullscreenBtn');
const navbar = document.querySelector('.mobile-navbar');
const isFS = isFullscreen();
if (fullscreenBtn) {
if (isFS) {
fullscreenBtn.innerHTML = '⛉';
fullscreenBtn.title = 'Exit Fullscreen';
fullscreenBtn.classList.add('hidden');
if (navbar) {
navbar.style.display = 'none';
}
} else {
fullscreenBtn.innerHTML = '⛶';
fullscreenBtn.title = 'Enter Fullscreen';
fullscreenBtn.classList.remove('hidden');
if (navbar) {
navbar.style.display = 'flex';
}
if (!fullscreenBtn) return;
const isFullscreen = document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
if (isFullscreen) {
fullscreenBtn.textContent = '⛶';
fullscreenBtn.classList.remove('hidden');
} else {
fullscreenBtn.textContent = '⛶';
fullscreenBtn.classList.remove('hidden');
// If we're coming back from a fullscreen camera view, redirect to streams
if (window.location.pathname.includes('/fullscreen/')) {
window.location.href = '/mobile/streams';
}
}
}
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
// Initialize
document.addEventListener('DOMContentLoaded', function() {
addMobileTouchFeedback();
handleFullscreenChange();
// Add fullscreen event listeners
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);
console.log('📱 Mobile camera selection loaded with fixed navigation');
console.log('🏆 Tournament active:', {{ 'true' if tournament_active else 'false' }});
console.log('📊 Results available:', {{ 'true' if results_available else 'false' }});
@@ -631,14 +557,17 @@
}
}, 500);
// Only refresh streams if page is visible
setInterval(() => {
if (document.visibilityState !== 'visible') return;
const streams = document.querySelectorAll('.stream-img');
streams.forEach(stream => {
if (stream.complete && stream.naturalHeight === 0) {
stream.src = stream.src.split('?')[0] + '?refresh=' + Date.now();
}
});
}, 30000);
}, 60000); // Reduced from 30s to 60s
if (window.innerHeight > window.innerWidth) {
const hint = document.createElement('div');
@@ -666,5 +595,20 @@
}
});
</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>