From b250c47cb32b2bd408b578bbe16c6c686bae2641 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Sun, 3 Mar 2024 03:31:22 +0100
Subject: [PATCH] Update diagrams for landscape mode

---
 formula10/static/style/diagram.css    | 11 +++++++++++
 formula10/templates/base.jinja        |  1 +
 formula10/templates/leaderboard.jinja |  2 +-
 formula10/templates/statistics.jinja  |  4 ++--
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 formula10/static/style/diagram.css

diff --git a/formula10/static/style/diagram.css b/formula10/static/style/diagram.css
new file mode 100644
index 0000000..71fa8e3
--- /dev/null
+++ b/formula10/static/style/diagram.css
@@ -0,0 +1,11 @@
+.chart-container {
+    width: 100%;
+    height: 50vh;
+}
+
+@media only screen and (orientation: landscape) {
+    .chart-container {
+        width: 100%;
+        height: 100vh;
+    }
+}
\ No newline at end of file
diff --git a/formula10/templates/base.jinja b/formula10/templates/base.jinja
index fecfd03..f56f1c6 100644
--- a/formula10/templates/base.jinja
+++ b/formula10/templates/base.jinja
@@ -181,6 +181,7 @@
 
     <!-- Custom -->
     <link href="../static/style/grid.css" rel="stylesheet">
+    <link href="../static/style/diagram.css" rel="stylesheet">
     <script defer>
         {# Initialize Bootstrap Tooltips #}
         let tooltipTriggerList = document.querySelectorAll("[data-bs-toggle='tooltip']")
diff --git a/formula10/templates/leaderboard.jinja b/formula10/templates/leaderboard.jinja
index aae2e83..581fba3 100644
--- a/formula10/templates/leaderboard.jinja
+++ b/formula10/templates/leaderboard.jinja
@@ -61,7 +61,7 @@
         </div>
 
         <div class="card-body">
-            <div class="chart-container" style="width: 100%; height: 40vh;">
+            <div class="chart-container">
                 <canvas id="line-chart"></canvas>
             </div>
 
diff --git a/formula10/templates/statistics.jinja b/formula10/templates/statistics.jinja
index e03b82b..40b485a 100644
--- a/formula10/templates/statistics.jinja
+++ b/formula10/templates/statistics.jinja
@@ -92,7 +92,7 @@
             </div>
 
             <div class="card-body">
-                <div class="chart-container" style="width: 100%; height: 40vh;">
+                <div class="chart-container">
                     <canvas id="driver-line-chart"></canvas>
                 </div>
 
@@ -132,7 +132,7 @@
             </div>
 
             <div class="card-body">
-                <div class="chart-container" style="width: 100%; height: 40vh;">
+                <div class="chart-container">
                     <canvas id="team-line-chart"></canvas>
                 </div>