Enhance print layouts with branded headers and fix navigation consistency
- 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:
+43
-19
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Tournament Draft</title>
|
||||
<title data-i18n="draft.tournament_draft">Tournament Draft</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
* {
|
||||
@@ -76,6 +76,17 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: #007bff;
|
||||
border-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.active:hover {
|
||||
background: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: calc(100vh - 70px);
|
||||
display: flex;
|
||||
@@ -353,32 +364,36 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="navbar-title">🏆 Tournament Draft</div>
|
||||
<div class="navbar-title">🏆 <span data-i18n="draft.tournament_draft">Tournament Draft</span></div>
|
||||
<div class="navbar-controls">
|
||||
<a href="/" class="nav-btn">← Dashboard</a>
|
||||
<a href="/tournament" class="nav-btn">⚙️ Manage</a>
|
||||
<a href="/" class="nav-btn">📺 <span data-i18n="navigation.dashboard">Dashboard</span></a>
|
||||
<a href="/tournament" class="nav-btn">🏆 <span data-i18n="navigation.tournament">Tournament</span></a>
|
||||
<a href="/archive/player-analysis" class="nav-btn">👤 <span data-i18n="players.player_analysis">Player Analysis</span></a>
|
||||
<a href="/archive" class="nav-btn">📚 <span data-i18n="navigation.archive">Archive</span></a>
|
||||
<a href="/tournament/draft" class="nav-btn active">📋 <span data-i18n="tournament.view_draft">Draft</span></a>
|
||||
<a href="/results/calculator" class="nav-btn">🎯 <span data-i18n="navigation.calculator">Results Calculator</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
{% if tournament %}
|
||||
<div class="tournament-header">
|
||||
<div class="tournament-title">🎯 Shooting Tournament</div>
|
||||
<div class="tournament-title">🎯 <span data-i18n="draft.shooting_tournament">Shooting Tournament</span></div>
|
||||
<div class="tournament-stats">
|
||||
{{ tournament.total_players }} players • {{ tournament.total_rounds }} rounds
|
||||
{{ tournament.total_players }} <span data-i18n="draft.players">players</span> • {{ tournament.total_rounds }} <span data-i18n="draft.rounds">rounds</span>
|
||||
{% if tournament.current_round %}
|
||||
• Currently on Round {{ tournament.current_round }}
|
||||
• <span data-i18n="draft.currently_on_round">Currently on Round</span> {{ tournament.current_round }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if tournament.current_round %}
|
||||
<div class="tournament-controls">
|
||||
<button class="round-nav-btn" id="prevRoundBtn" onclick="changeRound(-1)" title="Previous Round">
|
||||
← Previous
|
||||
← <span data-i18n="draft.previous">Previous</span>
|
||||
</button>
|
||||
<span class="current-round-display">Round {{ tournament.current_round }} of {{ tournament.total_rounds }}</span>
|
||||
<span class="current-round-display"><span data-i18n="draft.round">Round</span> {{ tournament.current_round }} <span data-i18n="draft.of">of</span> {{ tournament.total_rounds }}</span>
|
||||
<button class="round-nav-btn" id="nextRoundBtn" onclick="changeRound(1)" title="Next Round">
|
||||
Next →
|
||||
<span data-i18n="draft.next">Next</span> →
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -390,13 +405,13 @@
|
||||
{% set is_completed = tournament.current_round > round.round_number %}
|
||||
<div class="round-row {{ 'current' if is_current else ('completed' if is_completed else 'waiting') }}">
|
||||
<div class="round-header">
|
||||
<div class="round-title">Round {{ round.round_number }}</div>
|
||||
<div class="round-title"><span data-i18n="draft.round">Round</span> {{ round.round_number }}</div>
|
||||
{% if is_current %}
|
||||
<div class="round-badge current-badge">Current</div>
|
||||
<div class="round-badge current-badge" data-i18n="draft.current">Current</div>
|
||||
{% elif is_completed %}
|
||||
<div class="round-badge completed-badge">Done</div>
|
||||
<div class="round-badge completed-badge" data-i18n="draft.done">Done</div>
|
||||
{% else %}
|
||||
<div class="round-badge waiting-badge">Wait</div>
|
||||
<div class="round-badge waiting-badge" data-i18n="draft.wait">Wait</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -409,7 +424,7 @@
|
||||
<div class="player-name">{{ player.name }}</div>
|
||||
<div class="player-id">ID: {{ player.id }}</div>
|
||||
{% else %}
|
||||
<div class="player-name">Empty</div>
|
||||
<div class="player-name" data-i18n="draft.empty">Empty</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -420,16 +435,16 @@
|
||||
|
||||
{% else %}
|
||||
<div class="no-tournament">
|
||||
<h2>No Active Tournament</h2>
|
||||
<p>Go to Tournament Management to set up players and start a tournament.</p>
|
||||
<a href="/tournament" class="nav-btn primary">🏆 Set Up Tournament</a>
|
||||
<h2 data-i18n="draft.no_active_tournament">No Active Tournament</h2>
|
||||
<p data-i18n="draft.setup_tournament_message">Go to Tournament Management to set up players and start a tournament.</p>
|
||||
<a href="/tournament" class="nav-btn primary">🏆 <span data-i18n="draft.set_up_tournament">Set Up Tournament</span></a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Auto-refresh indicator -->
|
||||
<div class="refresh-indicator" id="refreshIndicator">
|
||||
🔄 Updating...
|
||||
🔄 <span data-i18n="draft.updating">Updating...</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -543,5 +558,14 @@
|
||||
console.log(`📊 Displaying ${totalRounds} rounds in vertical layout`);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Include i18n support -->
|
||||
<script src="/static/js/i18n.js"></script>
|
||||
<script>
|
||||
// Initialize language selector and i18n
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
translatePage();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user